Building Modern Web Apps with AngularJS

  • Published on
    16-Jan-2017

  • View
    25

  • Download
    1

Transcript

Building Modern Web Apps with ANGULARJSSPASingle Page ApplicationsWeb application or website that fits on a single web pageProvides 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 loadedTraditional vs SPA ClientServerInitial requestResponse(HTML+CSS+JS)Form PostResponse(HTML+CSS+JS)ClientServerInitial requestRespond(HTML+CSS+JS)AJAXResponse {JSON}Techniques FrameworksAjax - Asynchronous JS and XMLWebsocketsServer-sent eventsBrowser pluginsAngularjsMeteor.jsEmber.jsWhat is AngularJSAngularJS is a structural framework for dynamic web apps.AngularJS DirectivesDirectives are Angulars way of bringing additional functionality to HTMLNg-app ng-modelng-bindng-clickng-controllerng-repeatAngularJS ServicesIn AngularJS, a service is a function, or object, that is available for, and limited to, your AngularJS application.$http $timeout$intervalModules and Controllersangular.module(moduleName,[dependencies]);angular.module('moduleName') .controller('controllerName', function () {this.attributeName=value;});Expressions.... {{attributeName}}....Expressions [example].... {{blog.title}}....Expressions [example 2].... {{blog.title}}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.... ....Directives ng-repeat.... {{post.title}}....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);}; });

Recommended

View more >