Building Modern Web Apps with AngularJS
•Als PPTX, PDF herunterladen•
0 gefällt mir•248 views
Introduction to AngularJS session conducted at the Sabaragamuwa University of Sri Lanka
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (9)
Ähnlich wie Building Modern Web Apps with AngularJS
Ähnlich wie Building Modern Web Apps with AngularJS (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (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); }; });