Building Modern Web Apps with AngularJS
•Download as PPTX, PDF•
0 likes•248 views
Introduction to AngularJS session conducted at the Sabaragamuwa University of Sri Lanka
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (9)
Similar to Building Modern Web Apps with AngularJS
Similar to Building Modern Web Apps with AngularJS (20)
Recently uploaded
Recently uploaded (20)
Building Modern Web Apps with AngularJS
- 1. Building Modern Web Apps with ANGULARJS
- 2. SPA Single Page Applications Web application 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 Client Server 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 is a structural framework for dynamic web apps.
- 6. AngularJS Directives Directives are Angular’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”; });
- 11. Expressions [example] <body ng-app="blogApp"> .... <div ng-controller="BlogCtrl as blog"> <h1>{{blog.title}}</h1> </div> .... </body>
- 12. 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>
- 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 <body ng-app="blogApp"> .... <div class="container"> <div ng-view=""></div> </div> .... </body>
- 15. Directives ng-repeat <body ng-app="blogApp"> .... <div ng-controller="BlogCtrl as blog"> <h1 ng-repeat="posts as post">{{post.title}}</h1> </div> .... </body>
- 16. Services angular.module('moduleName') .service('serviceName', function() { this.functionName=function(text){ return "Hello"; }; });
- 17. Services [Example] angular.module('blog') .service('postService', function() { this.getPosts=function(){ return(Json); }; });