Building Modern Web Apps with AngularJS

  • Published on
    16-Jan-2017

  • View
    25

  • Download
    1

Transcript

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 () {

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