Building Modern Web Apps with AngularJS
•Transferir como PPTX, PDF•
0 gostou•248 visualizações
Introduction to AngularJS session conducted at the Sabaragamuwa University of Sri Lanka
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (9)
Semelhante a Building Modern Web Apps with AngularJS
Semelhante a Building Modern Web Apps with AngularJS (20)
Último
Último (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); }; });