Download presentation
Presentation is loading. Please wait.
1
Angular (JS): A Framework for Dynamic Web Pages
B. Ramamurthy 11/20/2018
2
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
3
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
4
Hello World in Angular (Dynamic)
<html> <head> <meta charset="utf-8"> <title></title> <script src=" </head> <body> <div ng-app=""> <input type="text" ng-model="name"> <h1>Hello {{name || 'world'}} </h1> </div> </body> </html>
5
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
6
AngularJS: Nuts and Bolts
Where can read more about it to prepare myself? Reference: 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
7
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
8
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
9
Lets implement the steps (1 )
<html> <head> <script src=" </script> </head> 11/20/2018
10
Define ng-app and ng-controller (2)
<body ng-app = “myApp” > <div ng-controller=“myCntrl”> </div> </body> 11/20/2018
11
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
12
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
13
Lets load the application and execute it (5)
Into your editor (Atom, sublime or whatever) 11/20/2018
14
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
Similar presentations
