Introduction to single page application with angular js

Angular.JS

Presenter: Nakul Suneja, Mindfire Solutions

Date: 26/03/2015

Introduction To AngularJS.1. Single Page Application.

2.What is Angular.js?

3.Why Angular.j

4.Modules.

5.Controllers

6.Views

7.Directives

8.Angular Routes

9.Custom Directives

10. Angular Services & Custom Services Demo

11. Filters & Custom Filters Demo.

Presenter:Nakul, Mindfire Solutions

Single Page Application

View View

ViewView

The Future Of Tomorrow's Web with SOA( Service Oriented Architecture). To provide User a Native

web-app Experience.

SPA

Presenter:Nakul, Mindfire Solutions

The Challenge with SPA

DOM Manipulation History Module Loading

Routing Caching Object Modeling

Data Binding Ajax/Promises View Loading

Presenter: Nakul, Mindfire Solutions

What is AngularJS?

This is a MV*(MVC OR MVVM) Javascript Framework by Google for Rich Web Application Development & Provide User a Native App by following SPA Design Pattern.

Model (Data)

Controller (Logic)

View (UI)Notifies

NotifiesChanges

Model (Data)

View (UI)

Controller (Logic)

MVC

View (UI) MVVM


“Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views”.

Angular JS Power:

l Structure, Quality and Organizationl Lightweight ( < 36KB compressed and minified).l Free.l Separation of concern.l Modularity.l Extensibility & Maintainability.l Reusable Components.

Why AngularJS?


Why AngularJS?

This means that any changes to the data need to be re-merged with the

template and then innerHTMLed into the DOM. Some of the issues with

this approach are:

Reading user input and merging it with data

Clobbering user input by overwriting it

Managing the whole update process

The Angular compiler consumes the DOM, not string templates.

The result is a linking function, which when combined with a

scope model results in a live view. The view and scope model

bindings are transparent.

Other Javascript MV* Frameworks

•BackboneJS•EmberJS


Two-way Data Binding – ViewModel as single source of truth (Glue).MV*(MVC OR MVVM) – Provides Two-way Data Binding.Modules.Directives & Custom Directives – Extend HTML.Services & Factories.Dependency Injection.Watcher.Digest.Testing.Deep Linking (Map URL to route Definition).Server-Side Communication.

Features of AngularJS



View Controller

FactoryDirectives

Routes

Module

Config

Modules are Containers

Service Provider

$scope

// Module Creation

var carApp = angular.module('CarApp', []);

// Dependencies Injection

var demoApp = angular.module('carApp', ['helperModule']);

Creating a Module


var carApp = angular.module('CarApp', []);

carApp.controller('HyundaiController', function ($scope) {

$scope.articles = [

{'name' : 'i20 Elite'},

{'name' : 'Fludic Verna'},

{'name': 'Xcent'},

{'name' : 'Eon'},

{'name' : 'i10 Grand'}

];

});

Define a ModuleDefine a

Controller

Creating a Controller in a Module



Directives are markers on Dom Elements(such as attributes, tags, and class names) that tell HTML compiler ($compile) to attach a given behavior to a DOM element (or transform it, replace it, etc.),When Angular bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements.

Some angular built-in directiveslThe ng-app - Bootstrapping your app and defining its scope. (<html ng-app>).lThe ng-controller - defines which controller will be in charge of your view. (<input ng-controller=”xyz”>).lThe ng-repeat - Allows for looping through collections.lThe ng-init – Allows to Initialize any Data Model Object.

What is a Directive?


AngularJS Help for Directives

<!DOCTYPE html>

<html ng-app>

<head>

<title>Examples</title>

</head>

<body>

<div class="container">

Name: <input type="text" ng-model="name" /> {{ name }}

</div>

<script src="Scripts/angular.js"></script>

</body>

</html>

Using Directives and Data Binding


Data Binding Expression

Directive


View, Controllers & Scope

View Controller$scope

$scope is the "glue" (ViewModel) between a controller and a view


Creating a View and Controller

<div class="examples" data-ng-controller="HyundaiController">

<h3>Adding a Simple Controller</h3>

<ul>

<li data-ng-repeat="car in articles">

{{ car.name }}

</li>

</ul>

</div>

<script>

var carApp = angular.module('CarAPP', []);

carApp.controller('HyundaiController', function ($scope) {

$scope.articles = [



{'name': 'Xcent'},

{'name' : 'Eon'},


];

});

</script>

Angular Routes & DI<html ng-app=”AutomobileApp”>

<div class=”container”>

<nav><a href=”#/hyundai”>Hyundai</a><a href=”#/maruti”>Maruti</a></nav>

<div ng-view></div>

</div>

</html>

<script>

angular.module('AutomobileApp', [ 'ngRoute', 'CarApp']).

config(['$routeProvider', function($routeProvider) {

$routeProvider.

when('/hyundai', {

templateUrl: 'hyundai.html', // To manage Hyundai Module.

controller: 'HyundaiController'

}).

when('/maruti', { // To manage Maruti Module.

templateUrl: 'maruti.html',

controller: 'MarutiController'

}). otherwise({ // Default Action.

RedirectTo: '/hyundai'

});

</script>

Custom Directives'use strict';

var app = angular.module('CarApp', []);

// Car Controller

app.controller('HyundaiController', function($scope){

$scope.properties = {

'make' : '2015',

'wheels' : 4,

};

$scope.cars = [



{'name': 'Xcent'},

{'name' : 'Eon'},


];

}).directive('car', function(){

return {

restrict: 'E',

templateUrl: 'cars.html'

};

});


Angular Services.

Angular services are substitutable objects that are wired together using dependency injection (DI). You

can use services to organize and share code across your app.

Angular services are:

Lazily instantiated – Angular only instantiates a service when an application component depends on it.

Singletons – Each component dependent on a service gets a reference to the single instance

generated by the service factory.

Angular offers several useful services (like $http), but for most applications you'll also want to create

your own.

Filters & Custom FiltersA filter formats the value of an expression for display to the user. They can be used in view

templates, controllers or services and it is easy to define your own filter.{{ expression | filter1 | filter2 | ... }}

We have in-built Filters Available as

Number : {{ 1234 | number:2 }}

Currency : {{ 12 | currency }}

Date: {{ date_expression | date : format : timezone}}

Lowercase : {{ lowercase_expression | lowercase}}

Uppercase : {{ lowercase_expression | uppercase}}

Filter : <tr ng-repeat="friend in friends | filter:'a'">

OrderBy : <tr ng-repeat="friend in friends | orderBy:'-age'">

LimitTo : {{ numbers | limitTo:numLimit }}

Custom Filter :

app.filter('reverse', function() { // Custom Filter

Reverse

return function(input) {

var out = input.split('').reverse().join();

return out;

};

});


Next Seminar : Angular in Depth.Angular Custom Directives in Depth.

Isolated Scopes.

Reusable Custom Directives.

Communication in Custom Directives.

Services, Factories Providers & Value in Depth.

Custom Services & Factories in Depth.

Event Binding in the Templates.

Unit Testing with AngularJS.


QUESTIONS?


References

I. Angular Docs → https://angularjs.org/

I. Tutorial Point → http://www.tutorialspoint.com/angularjs/

I. Head First Diving into Angularjs.

https://angularjs.org/

http://www.tutorialspoint.com/angularjs/


Thank you

Software

Introduction to single page application with angular js