• Home
  • ExtropyNOW! - Courses
    • Mechatronics Engineering >
      • Mechatronics - 1st Tetramester >
        • ME-01-English I / Inglés I
        • ME-01-Values of the being / Valores del ser
        • ME-01-Metrology / Metrología >
          • Proteus Simulation Tutorial
        • ME-01-Electricity and magnetism / Electricidad y magnetismo
        • ME-01-AutoCAD / Dibujo para Ingeniería
        • ME-01-Differential and Integral Calculus >
          • II - Limits and continuity.
        • ME-01-Lineal Algebra / Álgebra lineal
      • Mechatronics - 2nd Tetramester >
        • ME-02-English II / Inglés II
        • ME-02-Emotional Intelligence / Intelligencia Emocional
        • ME-02-Static / Estática (Mechanical)
        • ME-02-Electronical Circuit Analysis / Análisis de Circuitos
        • ME-02-Structured Programming / Programación Estructurada (C)
        • ME-02-Vectorial Calculus / Cálculo Vectorial
        • ME-02-Normativity and Industrial Security / Normatividad y Seguridad Industrial
      • Mechatronics - 3rd Tetramester >
        • ME-03-English III / Inglés III
        • ME-03-Interpersonal Development / Desarrollo Interpersonal
        • ME-03-Dynamics / Dinámica (Mechanical)
        • ME-03-Analogic Electronics / Electrónica Analógica >
          • ME-03-Analog Electronics-Useful schematics
        • ME-03-Digital Electronics / Electrónica Digital >
          • N555 as timer.
        • ME-03-Probability and Statistics / Probabilidad y Estadística
        • ME-03-Maintenance Engineering
      • Mechatronics - 4th Tetramester >
        • ME-04-Thinking Abilities / Habilidades del Pensamiento
        • ME-04-Material's Resistance / Resistencia de los Materiales
        • ME-04-Power Electronics / Electrónica de Potencia
        • ME-04-Periphereal Programming / Programación de Periféricos (LabVIEW)
        • ME-04-Differential Equations / Ecuaciones Diferenciales
        • ME-04-First Internship / Estancia I
      • Mechatronics - 5th Tetramester >
        • ME-05-English V - Inglés V
        • ME-05-Organizational Abilities / Habilidades Organizacionales
        • ME-05-Engine's Analysis / Análisis de Mecanismos
        • ME-05-Sensor's and Signal Conditioning / Sensores y Acondicionamiento de Señales
        • ME-05-Microcontrollers / Microcontroladores (PIC)
        • ME-05-System's Modelling and Simulation
        • ME-05-Fluid Mechanics
      • Mechatronics - 6th Tetramester >
        • ME-06-English VI - Inglés VI
        • ME-06-Professional Ethics / Ética Profesional
        • ME-06-Mechanical Design / Diseño Mecánico
        • ME-06-Industrial Automation / Automatización Industrial (PLC's)
        • ME-06-Electric Machines / Máquinas Eléctricas
        • ME-06-Manufacturing Processes / Procesos de Manufactura
        • ME-06-Pneumatic and Hydraulic Systems / Sistemas Hidráulicos y Neumáticos
      • Mechatronics - 7th Tetramester >
        • ME-07-English VII / Inglés VII
        • ME-07-Signal Processing and Acquisition / Adquisición y Procesamiento de Señales (PDS)
        • ME-07-Computer Assisted Engineering / Ingeniería Asistida por Computadora
        • ME-07-Project's Engineering and Management / Administración e Ingeniería de Proyectos
        • ME-07-Economic Engineering / Ingeniería Económica
        • ME-07-Control Theory / Teoría de Control
        • ME-07-Second Internships / Estancias II
      • Mechatronics - 8th Tetramester >
        • ME-08-English VIII / Inglés VIII
        • ME-08-Termodynamics / Termodinámica
        • ME-08-CAM & CNC Systems / Sistemas CAM y CNC
        • ME-08-Mechatronic Design / Diseño Mecatrónico
        • ME-08-Kinematics of Robots / Cinemática de Robots
        • ME-08-Digital Control / Control Digital
        • ME-08-Mechanical Vibrations / Vibraciones Mecánicas
      • Mechatronics - 9th Tetramester. >
        • ME-09-English IX / Inglés IX
        • ME-09-Heat Transfer / Transferencia de Calor (Mechanical)
        • ME-09-Industrial Networks / Redes Industriales
        • ME-09-Mechatronics System's Integration / Integración de Sistemas Mecatrónicos (Matlab) >
          • AM Modulation - Simulation.
        • ME-09-Robot's Dynamics and Control
        • ME-09-Intelligent Control / Control Inteligente
        • ME-09-Quality and Technological Innovation. >
          • ME-09-Evidences Folder
        • A) Robotics and Control. >
          • I.-Robotics I / F. Kinematics. >
            • I.I.-An Introduction to Robotics
          • II.-Digital Control.
        • B) Computing and Programming. >
          • I.-Setting the Kinect on Ubuntu Linux (libfreenect).
          • II.-CNC Programming >
            • II.I.-An Introduction to CNC
            • II.II.-CNC Milling.
          • C) Electronics.
    • Master in Engineering with specialty on Information Technologies >
      • pcDuino
      • Artificial Intelligence >
        • Knowledge Representation >
          • Writing ontologies (RDFS and OWL)
          • RDFLib Python
          • My First Ontology in Protegé
          • My First Ontology in Protegé II
          • Making queries
          • Where to get ontologies
        • Neural Networks >
          • Perceptrons (Linear Functions)
          • One vs All Perceptron
          • Radial Networks
        • Genetic Programming >
          • Graph Colouring using GA
          • GA for function approximation >
            • String parsing
        • Scientific computing.
        • Cellular Automata
      • Machine Learning
      • Natural Language Processing >
        • AIML Language on Python
        • Machine translation
        • Markov Chatbot
        • Python Input Timeout Bot
      • Fundamentals of Information Systems >
        • Data structures >
          • Linked lists
          • Trees >
            • Implementation Binary Search Tree
          • Sparse Distributed Memory
          • Debugging with gdb
          • Finite State Machines
        • JavaFX
      • Electronics >
        • KiCAD - My First Project
        • KiCAD - Adding components
        • kiCAD - Creating Components
        • SPICE Tutorial II
        • SPICE Tutorial II - Part II
      • VHDL >
        • Programming VHDL Part I >
          • Programming VHDL Part II
          • Loading VHDL to FPGA - Part I
          • Loading VHDL to FPGA - Part II
          • VHDL - First Steps Alternative version
        • Loops
        • Switches and leds
        • UART
        • PicoBlaze uC + FPGA
        • ADC
      • Logic Programming
    • Computing. >
      • Adding subtitles to video files
      • Server Side Programming >
        • Webhosting >
          • WordPress
        • Online Storage
        • Apache/PHP >
          • MongoDB >
            • MongoDB in Python
        • Node.js >
          • NodeJS Client requests
          • MySQL with NodeJS
      • Hyperboria
      • Angular 4
      • Smartphones >
        • Rooting Samsung Galaxy Tab 2.7.0 Model P3110 >
          • Creating Nandroid Backup with Command Line
          • Installing Ubuntu Linux on Samsung Galaxy Tab 2.7.0
          • Porting Utopic Unicorn 14.10 to tablet P3110.
        • PhoneGap - Apache Cordova >
          • Debugging PhoneGap
          • PhoneGap - MyFirstApp
          • Phone Gap - My First App II
          • Improving Look and Feel with OnsenUI >
            • AngularJS + OnsenUI + Monaca
            • Angular2 + TypeScript + OnsenUI
          • Storage in Apache Cordova & Monaca
          • Maps in PhoneGap
          • Getting user location with PhoneGap
        • QT C++ >
          • Qt signals and slots
          • QT for Android
          • QT Deployment.
        • PyQt Threads
      • Computer vision >
        • OpenGL >
          • OpenGL-HelloWorld
        • Computer Vision with Matlab/Octave
        • JavaCV
        • OpenCV
      • LaTeX >
        • Citations with Zotero + LaTeX
      • Reddit
      • Video Game creation >
        • Unity3D
        • Live2D
        • Babylon JS
    • Biochemistry.
    • Humanities >
      • Cognitive Science
      • Learning
    • Economics. >
      • Accounting
      • III.-Mexican economics.
      • Patents
    • Philosophy >
      • II. The philosophical method.
      • III. Intuition as method for philosophy.
      • IV. Comes ontology.
      • V. & VI. Parménides metaphysics and Plato's realism.
      • Extropianism.
      • Extropianism II.
      • Extropianism III.
  • ExtropyNOW! - Projects
    • MacOS X on Virtual Box
    • TankSupervision System >
      • Programming
      • Programming 2 - RXTX
      • Designing the interface
      • RXTX - Functions.
      • Keybinding - Functions.
      • FAQ
    • Homemade Projector
    • Hospital Automation App >
      • Face Recognition Part I - The basics
      • Pressure and Temperature
    • The CHAMBER Project >
      • Brain Computer Interface
      • Building the Brain (AGI) >
        • OpenCog First Application
      • Server Side Programming >
        • Tornado
        • First Django Project
        • First Django Project II
      • HA Project
      • One DOF robotic arm controlled with MS Kinect. >
        • Setting Kinect+MatLAB+Processing
        • Setting communication between MatLAB and Processing.
        • The Bibliography.
    • Madoka: Superior
  • ExtropyNOW! - Interactive
    • ExtropyNOW! - Blog
    • ExtropyNOW! - Forums
  • ExtropyNOW! - Code repository...
    • ExtropyNOW! Code Repository Part II
    • ExtropyNOW! - School repository
    • ExtropyNOW! - School repository 2 >
      • School repository 3
    • ExtropyNOW! - Interesting WebPages.
  Extropy NOW!
Contact/Contacto:

AngularJS + Onsen UI 2 + Monaca

While Angular 2 has just been released and promises to bring a revolution on the hybrid app development scene, AngularJS still is widely used, widely documented and very simple to use due to how similar it is to Cordova App development. Angular 2 makes heavier use of TypeScript which is a subset of Javascript with its own rules and features.
Picture

Coding with AngularJS

AngularJS makes use of the $scope environment to attach functions to variables and add dynamism to the elements in the App. In this example I attach the input text element to a name variable which is then used in the <p> element. This way whenever the text on the input is modified, the <p> value will display the modified text in real time.

index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <script src="lib/angular/angular.min.js"></script>
    <script src="lib/onsenui/js/onsenui.min.js"></script>
    <script src="lib/onsenui/js/angular-onsenui.min.js"></script>

    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
    <link rel="stylesheet" href="css/style.css">

    <script>
        ons.bootstrap()
          .controller('AppController', function($scope) {
              $scope.name = "ANY TEXT VALUE"
          });
        ons.ready(function() {
            console.log("Onsen UI is ready!");
        });
    </script>
</head>
<body>
    <ons-page>
        <ons-navigator
          var="navi"
          page="page.html"
          ng-controller="AppController as app"
          >
        </ons-navigator>
    </ons-page>

    <ons-template id="page.html">
      <ons-page>
        <ons-toolbar>
          <div class="left">
            <ons-back-button>Back</ons-back-button>
          </div>
          <div class="center">APP NAME</div>
        </ons-toolbar>
        <!--Set our bot avatar-->
        <img src="img/AppAvatar.jpg" id="BotAvatar"><br>
        <!--Set the bot chat box-->
        <ons-input float id="ChatInput" class="MiddleElement" ng-model="name"></ons-input><br>
        <p>Hello {{name}}</p>
      </ons-page>
    </ons-template>
</body>
</html>

style.css

/**/
#BotAvatar {
    max-width: 200px;
    max-height: 200px;
    display: block;
    margin: auto;
}

.MiddleElement {
    display: block;
    text-align: center;
    margin: 0 auto; 
    width: 50%;
}

.TitleLabel {
    text-align: center;
}

.ChatBox {
    text-align: center;
}
Picture

Creating a MultiPage Application

Somewhere down the line of our development process we're going to need an application that displays several different windows. This may be due to the fact each window has a different purpose or the data among them isn't related. Whatever the reason, these can be implemented through the use of the <ons-navigator> tag.

The following code allows the Monaca application to load another page called page2.html when the user presses the Change Page button. The files are placed inside the www folder and the AngularJS file is placed inside a js folder in www.

index.html
File Size: 1 kb
File Type: html
Download File

page2.html
File Size: 0 kb
File Type: html
Download File

index.js
File Size: 0 kb
File Type: js
Download File


[1] https://onsen.io/blog/developing-hybrid-mobile-apps-with-onsen-ui/
[2] https://onsen.io/blog/onsen-ui-tutorial-angularjs-essentials-for-using-onsen-ui-part-1/
[3] https://onsen.io/v2/docs/angular1.html
[4] http://www.gajotres.net/onsenui-tutorial-2-anathomy-of-a-page/
[5] https://www.uno-de-piera.com/todo-con-phonegap-angularjs-y-onsen-ui/

Powered by Create your own unique website with customizable templates.