building modern web apps with angularjs
TRANSCRIPT
Building Modern Web Apps with ANGULARJS
SPASingle 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
Traditional vs SPA
Client Server
Initial request
Response(HTML+CSS+JS)
Form Post
Response(HTML+CSS+J
S)
Client Server
Initial request
Respond(HTML+CSS+JS)
AJAX
Response {JSON}
Techniques Frameworks➔ Ajax - Asynchronous JS and XML
➔ Websockets
➔ Server-sent events
➔ Browser plugins
➔ Angularjs
➔ Meteor.js
➔ Ember.js
What is AngularJS
AngularJS is a structural framework for dynamic web apps.
AngularJS DirectivesDirectives are Angular’s way of bringing additional functionality to HTML
➔ Ng-app
➔ ng-model
➔ ng-bind
➔ ng-click
➔ ng-controller
➔ ng-repeat
AngularJS ServicesIn AngularJS, a service is a function, or object, that is available for, and limited to, your AngularJS application.
➔ $http
➔ $timeout
➔ $interval
Modules and Controllers
angular.module(‘moduleName’,[dependencies]);
angular.module('moduleName') .controller('controllerName', function () {
this.attributeName=”value”;
});
Expressions<body ng-app="moduleName">
....
<div ng-controller="controllerName">
<h1>{{attributeName}}</h1>
</div>
....
</body>
Expressions [example]<body ng-app="blogApp">
....
<div ng-controller="BlogCtrl as blog">
<h1>{{blog.title}}</h1>
</div>
....
</body>
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>
Routesangular.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: '/' }); });
Views and templates<body ng-app="blogApp">
....
<div class="container">
<div ng-view=""></div>
</div>
....
</body>
Directives ng-repeat<body ng-app="blogApp">
....
<div ng-controller="BlogCtrl as blog">
<h1 ng-repeat="posts as post">{{post.title}}</h1>
</div>
....
</body>
Servicesangular.module('moduleName') .service('serviceName', function() {
this.functionName=function(text){
return "Hello";
};
});
Services [Example]angular.module('blog') .service('postService', function() {
this.getPosts=function(){
return(Json);
};
});