Building Modern Web Apps with AngularJS

  • View

  • Download

Embed Size (px)

Text of Building Modern Web Apps with AngularJS

Building Modern Web Apps with ANGULARJS

SPASingle 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 loaded

Traditional 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.js

What is AngularJS

AngularJS 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-repeat

AngularJS Services

In AngularJS, a service is a function, or object, that is available for, and limited to, your AngularJS application.

$http $timeout$interval

Modules and Controllersangular.module(moduleName,[dependencies]);

angular.module('moduleName') .controller('controllerName', function () {







Expressions [example]




Expressions [example 2]



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);}; });