Download to read offline
![Modules and Controllers angular.module(‘moduleName’,[dependencies]); angular.module('moduleName') .controller('controllerName', function () { this.attributeName=”value”; });](https://image.slidesharecdn.com/nqhqgqgsb2xwwe9vkejc-signature-c274755b8534525d4665b51ac4272ac2275be021d7b5b7645e7bb26f655c4de7-poli-160921153140/75/Building-Modern-Web-Apps-with-AngularJS-9-2048.jpg)
![Expressions [example] <body ng-app="blogApp"> .... <div ng-controller="BlogCtrl as blog"> <h1>{{blog.title}}</h1> </div> .... </body>](https://image.slidesharecdn.com/nqhqgqgsb2xwwe9vkejc-signature-c274755b8534525d4665b51ac4272ac2275be021d7b5b7645e7bb26f655c4de7-poli-160921153140/75/Building-Modern-Web-Apps-with-AngularJS-11-2048.jpg)
![Expressions [example 2] <body ng-app="blogApp"> .... <div ng-controller="BlogCtrl as blog"> <h1>{{blog.title}}</h1> <input type="text" ng-model="blog.title" value="GDG"/> </div> </body>](https://image.slidesharecdn.com/nqhqgqgsb2xwwe9vkejc-signature-c274755b8534525d4665b51ac4272ac2275be021d7b5b7645e7bb26f655c4de7-poli-160921153140/75/Building-Modern-Web-Apps-with-AngularJS-12-2048.jpg)
![Services [Example] angular.module('blog') .service('postService', function() { this.getPosts=function(){ return(Json); }; });](https://image.slidesharecdn.com/nqhqgqgsb2xwwe9vkejc-signature-c274755b8534525d4665b51ac4272ac2275be021d7b5b7645e7bb26f655c4de7-poli-160921153140/75/Building-Modern-Web-Apps-with-AngularJS-17-2048.jpg)
Uploaded byRaveen Perera
Building Modern Web Apps with AngularJS
This document provides an overview of building modern web applications with AngularJS. It discusses key concepts like single page applications, traditional vs SPA architectures, and techniques/frameworks like Ajax, WebSockets, and AngularJS. It then explains core AngularJS concepts like directives, services, modules/controllers, expressions, routes, views/templates, and using ng-repeat with directives. Services in AngularJS allow sharing reusable functions across the application.
Building Modern Web Apps with AngularJS
- 1. Building Modern WebApps with ANGULARJS
- 2. SPA Single Page Applications Webapplication or website that fits on a single web page Provides a more fluid user experience similar to a desktop application. Either all necessary code (HTML, JS, and CSS) is retrieved with a single page load or dynamically loaded
- 3. Traditional vs SPA ClientServer Initial request Response (HTML+CSS+JS) Form Post Response (HTML+CSS+JS) Client Server Initial request Respond (HTML+CSS+JS) AJAX Response {JSON}
- 4. Techniques Frameworks ➔ Ajax- Asynchronous JS and XML ➔ Websockets ➔ Server-sent events ➔ Browser plugins ➔ Angularjs ➔ Meteor.js ➔ Ember.js
- 5. What is AngularJS AngularJS isa structural framework for dynamic web apps.
- 6. AngularJS Directives Directives areAngular’s way of bringing additional functionality to HTML ➔ Ng-app ➔ng-model ➔ ng-bind ➔ ng-click ➔ ng-controller
- 7. AngularJS Services In AngularJS,a service is a function, or object, that is available for, and limited to, your AngularJS application. ➔ $http ➔$timeout ➔$interval
- 9. Modules and Controllers angular.module(‘moduleName’,[dependencies]); angular.module('moduleName') .controller('controllerName',function () { this.attributeName=”value”; });
- 10.
- 11. Expressions [example] <body ng-app="blogApp"> .... <divng-controller="BlogCtrl as blog"> <h1>{{blog.title}}</h1> </div> .... </body>
- 12. Expressions [example 2] <bodyng-app="blogApp"> .... <div ng-controller="BlogCtrl as blog"> <h1>{{blog.title}}</h1> <input type="text" ng-model="blog.title" value="GDG"/> </div> </body>
- 13. Routes angular.config(function ($routeProvider) { $routeProvider .when('/',{ templateUrl: 'views/main.html', controller: 'MainCtrl', controllerAs: 'main' }) .when('/about', { templateUrl: 'views/about.html', controller: 'AboutCtrl', controllerAs: 'about' }) .otherwise({ redirectTo: '/' }); });
- 14. Views and templates <bodyng-app="blogApp"> .... <div class="container"> <div ng-view=""></div> </div> .... </body>
- 15. Directives ng-repeat <body ng-app="blogApp"> .... <divng-controller="BlogCtrl as blog"> <h1 ng-repeat="posts as post">{{post.title}}</h1> </div> .... </body>
- 16.
- 17. Services [Example] angular.module('blog') .service('postService', function(){ this.getPosts=function(){ return(Json); }; });