Angular (JS): A Framework for Dynamic Web Pages B. Ramamurthy 11/20/2018
What is Angular? Angular (JS) is a JavaScript framework AngularJS version 1.0 was released in 2012. Miško Hevery, and Adam Abrons, Google employees, started to work with AngularJS in 2009. The project is now officially supported by Google. It implements Model-View-Controller (MVC) design principle. It offers an elegant and intuitive way to add dynamic content to a web/mobile application /page. 11/20/2018
Hello World in Static HTML <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>Hello World</h1> </div> </body> </html> 11/20/2018
Hello World in Angular (Dynamic) <html> <head> <meta charset="utf-8"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body> <div ng-app=""> <input type="text" ng-model="name"> <h1>Hello {{name || 'world'}} </h1> </div> </body> </html>
Another example (dynamic filter) <div ng-app="myApp" ng-controller="myCtrl"> Name: <br /> <input type="text" ng-model="name" /> <ul> <li ng-repeat="cust in customers| filter:name | orderBy:'city'" >{{cust.name |uppercase}} - {{cust.city|lowercase}}</li> </ul> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.customers = [ {name: 'Bina', city:'Amherst'}, {name:'Charles', city:'Buffalo'}, {name:'Sophie', city:'Long Island'}, {name:'Zach',city:'Syracuse'}]; }); </script> 11/20/2018
AngularJS: Nuts and Bolts Where can read more about it to prepare myself? Reference: https://www.tutorialspoint.com/angularjs/ AngularJS is a Javascript (library) framework for creating Rich Internet Applications (RIA) with dynamic content injection The client side JavaScript application allows for elegant development using Model View Controller (MVC) model It is open source and an active community It scales well for large applications 11/20/2018
Key Concepts - MVC Model represents the data representing the application. View generates output based on the model. Controller is works with model as well as the view updating them according to user interaction or other stimulus (say from sensors). Controlls interaction between Model and View. 11/20/2018
Lets Write a Simple AngularJS program Include AngularJS API Point to AngularJS app (ng-app) and controller (ng-controller) Add a view (setup the html tags and placeholders) Add a js controller Execute Remember angular commands begin with ng- Example: ng-app, ng-repeat 11/20/2018
Lets implement the steps (1 ) <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script> </head> 11/20/2018
Define ng-app and ng-controller (2) <body ng-app = “myApp” > <div ng-controller=“myCntrl”> </div> </body> 11/20/2018
Setup Model, View, ng-operations (filters) (3) Name: <br /> <input type="text" ng-model="name" /> <ul> <li ng-repeat="cust in customers| filter:name | orderBy:'city'" >{{cust.name |uppercase}} - {{cust.city|lowercase}}</li> </ul> 11/20/2018
Write controller script connecting the model and view (4) <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.customers = [ {name: 'Bina', city:'Amherst'}, {name:'Sophie', city:'Long Island'}, {name:'Charles', city:'Buffalo'}, {name:'John',city:'Akron'}, {name:'Zach',city:'Syracuse'}]; }); </script> 11/20/2018
Lets load the application and execute it (5) Into your editor (Atom, sublime or whatever) 11/20/2018
Functional Concepts Data-binding : automatic synchronization of data between model and view components. Scope: are glue between controller and view Controller: composed of JS functions and are bound to a specific Scope Filters: to select a subset of items from an array and return a new array Many more.. 11/20/2018