angularjs and its implementations
DESCRIPTION
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write.TRANSCRIPT
![Page 1: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/1.jpg)
ByApex TG India Pvt Ltd
http://www.apextgi.in
A brief Introduction to Angular JS
![Page 2: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/2.jpg)
What is AngularJS
MVC Javascript Framework by Google for Rich Web Application Development
![Page 3: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/3.jpg)
Why AngularJS
“Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views”.
• Structure, Quality and Organization• Lightweight ( < 36KB compressed and minified)• Free• Separation of concern• Modularity• Extensibility & Maintainability • Reusable Components
“ HTML? Build UI Declaratively! CSS? Animations! JavaScript? Use it the plain old way!”
![Page 4: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/4.jpg)
jQuery
• Allows for DOM Manipulation• Does not provide structure to your code • Does not allow for two way binding
![Page 5: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/5.jpg)
Other Javascript MV* Frameworks
• BackboneJS• EmberJS
![Page 6: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/6.jpg)
Features of AngularJS
• Two-way Data Binding – Model as single source of truth
• Directives – Extend HTML• MVC• Dependency Injection• Testing • Deep Linking (Map URL to route Definition) • Server-Side Communication
![Page 7: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/7.jpg)
Data Binding
<html ng-app><head> <script src='angular.js'></script></head><body> <input ng-model='user.name'> <div ng-show='user.name'>Hi {{user.name}}</div></body></html>
![Page 8: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/8.jpg)
MVC
Model (Data)
Controller (Logic)
View (UI)Notifies
NotifiesChanges
![Page 9: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/9.jpg)
MVC
Controller
Model
View
JS Classes
DOM
JS Objects
![Page 10: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/10.jpg)
MVC<html ng-app><head> <script src='angular.js'></script> <script src='controllers.js'></script></head><body ng-controller='UserController'> <div>Hi {{user.name}}</div></body></html>
function XXXX($scope) { $scope.user = { name:'Larry' };}
![Page 11: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/11.jpg)
Hello HTML
<p>Hello World!</p>
![Page 12: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/12.jpg)
Hello Javascript<p id="greeting1"></p> <script>var isIE = document.attachEvent;var addListener = isIE ? function(e, t, fn) { e.attachEvent('on' + t, fn);} : function(e, t, fn) { e.addEventListener(t, fn, false);};addListener(document, 'load', function(){ var greeting = document.getElementById('greeting1'); if (isIE) { greeting.innerText = 'Hello World!'; } else { greeting.textContent = 'Hello World!'; }});</script>
![Page 13: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/13.jpg)
Hello JQuery
<p id="greeting2"></p> <script>$(function(){ $('#greeting2').text('Hello World!');});</script>
![Page 14: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/14.jpg)
Hello AngularJS
<p ng:init="greeting = 'Hello World!'">{{greeting}}</p>
![Page 15: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/15.jpg)
DEMONSTRATION!!!!!
Feeder Apphttp://www.toptal.com/angular-js/a-step-by-step-guide-to-your-first-angularjs-app
![Page 16: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/16.jpg)
App Skeleton
![Page 17: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/17.jpg)
Final View (Championship Table)
![Page 18: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/18.jpg)
Sample Angular Powered View<body ng-app="F1FeederApp" ng-controller="driversController"> <table> <thead> <tr><th colspan="4">Drivers Championship Standings</th></tr> </thead> <tbody> <tr ng-repeat="driver in driversList"> <td>{{$index + 1}}</td> <td> <img src="img/flags/{{driver.Driver.nationality}}.png" /> {{driver.Driver.givenName}} {{driver.Driver.familyName}} </td> <td>{{driver.Constructors[0].name}}</td> <td>{{driver.points}}</td> </tr> </tbody> </table></body>
![Page 19: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/19.jpg)
Expressions
Expressions allow you to execute some computation in order to return a desired value.
• {{ 1 + 1 }}• {{ 946757880 | date }}• {{ user.name }}
you shouldn’t use expressions to implement any higher-level logic.
![Page 20: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/20.jpg)
Directives
Directives are markers (such as attributes, tags, and class names) that tell AngularJS to attach a given behaviour to a DOM element (or transform it, replace it, etc.)
Some angular directives• The ng-app - Bootstrapping your app and defining its
scope. • The ng-controller - defines which controller will be in
charge of your view.• The ng-repeat - Allows for looping through collections
![Page 21: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/21.jpg)
Directives as Components
<rating max='5' model='stars.average'>
<tabs> <tab title='Active tab' view='...'> <tab title='Inactive tab' view='...'></tabs>
<tooltip content='messages.tip1'>
![Page 22: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/22.jpg)
Adding Controllersangular.module('F1FeederApp.controllers', []).controller('driversController', function($scope) { $scope.driversList = [ { Driver: { givenName: 'Sebastian', familyName: 'Vettel' }, points: 322, nationality: "German", Constructors: [ {name: "Red Bull"} ] }, { Driver: { givenName: 'Fernando', familyName: 'Alonso' }, points: 207, nationality: "Spanish", Constructors: [ {name: "Ferrari"} ] } ];});
• The $scope variable – Link your controllers and view
![Page 23: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/23.jpg)
App.js
angular.module('F1FeederApp', [ 'F1FeederApp.controllers']);
Initializes our app and register the modules on which it depends
![Page 24: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/24.jpg)
Index.html
<body ng-app="F1FeederApp" ng-controller="driversController"> <table> <thead> <tr><th colspan="4">Drivers Championship Standings</th></tr> </thead> <tbody> <tr ng-repeat="driver in driversList"> <td>{{$index + 1}}</td> <td> <img src="img/flags/{{driver.Driver.nationality}}.png" /> {{driver.Driver.givenName}} {{driver.Driver.familyName}} </td> <td>{{driver.Constructors[0].name}}</td> <td>{{driver.points}}</td> </tr> </tbody> </table> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-route/angular-route.js"></script> <script src="js/app.js"></script> <script src="js/services.js"></script> <script src="js/controllers.js"></script></body></html>
![Page 25: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/25.jpg)
Loading data from the server(services.js)
angular.module('F1FeederApp.services', []). factory('ergastAPIservice', function($http) {
var ergastAPI = {};
ergastAPI.getDrivers = function() { return $http({ method: 'JSONP', url:
'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'
}); }
return ergastAPI; });
• $http - a layer on top of XMLHttpRequest or JSONP
• $resource - provides a higher level of abstraction
• Dependency Injection
we create a new module (F1FeederApp.services) and register a service within that module (ergastAPIservice).
![Page 26: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/26.jpg)
Modified controller.js
angular.module('F1FeederApp.controllers', []). controller('driversController', function($scope, ergastAPIservice) { $scope.nameFilter = null; $scope.driversList = [];
ergastAPIservice.getDrivers().success(function (response) { //Dig into the responde to get the relevant data $scope.driversList =
response.MRData.StandingsTable.StandingsLists[0].DriverStandings; }); });
![Page 27: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/27.jpg)
Routes• $routeProvider – used for dealing with routes
Modified app.js
angular.module('F1FeederApp', [ 'F1FeederApp.services', 'F1FeederApp.controllers', 'ngRoute']).config(['$routeProvider', function($routeProvider) { $routeProvider.
when("/drivers", {templateUrl: "partials/drivers.html", controller: "driversController"}).when("/drivers/:id", {templateUrl: "partials/driver.html", controller: "driverController"}).otherwise({redirectTo: '/drivers'});
}]);
![Page 28: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/28.jpg)
Partial views<!DOCTYPE html><html><head> <title>F-1 Feeder</title></head>
<body ng-app="F1FeederApp"> <ng-view></ng-view> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-route/angular-route.js"></script> <script src="js/app.js"></script> <script src="js/services.js"></script> <script src="js/controllers.js"></script></body></html>
![Page 29: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/29.jpg)
Advanced AngularJS Concept
• Dependency Injection • Modularity• Digesting• Scope• Handling SEO• End to End Testing• Promises• Localization• Filters
![Page 30: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/30.jpg)
Useful Links
• https://angularjs.org/• http://campus.codeschool.com/courses/shapi
ng-up-with-angular-js/contents• http://www.toptal.com/angular-js/a-step-by-
step-guide-to-your-first-angularjs-app• https://github.com/raonibr/f1feeder-part1
![Page 31: AngularJS and Its Implementations](https://reader034.vdocuments.us/reader034/viewer/2022051419/55cf8ff0550346703ba1746a/html5/thumbnails/31.jpg)