Angular js

1. Introduction to AngularJS
2. Controllers & Views
3. Services
4. Filters
5. Routing
6. Directives
AGENDA

A JavaScript framework for creating dynamic web
applications
INTRODUCTION TO ANGULARJS
• Model
The data
• Controller
The behavior
Modifying / updating the models
• View
The interface
How the data is presented to the user

• Views are declarative
The structure of the interface
• Controllers do not need to directly manipulate the view
Changes in the models / data are automatically
reflected in the view
Updates are managed by the frameworks
CONTROLLERS AND VIEWS

• Make use of special ng attributes (directives) on the
HTML elements
ng-app
• Determines which part of the page will use AngularJS
• If given a value it will load that application module
ng-controller
• Determines which Javascript Controller should be used for that part
of the page
ng-model
• Determines what model the value of an input field will be bound to
• Used for two-way binding

• More ng directives
ngSwitch=<ANY ng-switch="expression">
<ANY ng-switch-when="matchValue1"></ANY>
<ANY ng-switch-when="matchValue2"></ANY>
<ANY ng-switch-default>...</ANY> </ANY>
ng-if=“<model expression>”
• Inserts HTML element if expression is true
• Does not insert element in the DOM if it is false
ng-repeat=“<variable> in <array>”
• Repeats the HTML element for each value in the array
• Also a key-value pair version for JSON objects
“(<key>, <value>) in <JSON>”

<div ng-app="" ng-controller="personController">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
function personController($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
}
</script>

$q
A service that helps you run functions asynchronously, and use their return values (or exceptions)
when they are done processing.
$http.get('/api/v1/movies/avengers')
.success(function(data, status, headers, config) {
$scope.movieContent = data;
});
// is the same as
var promise = $http.get('/api/v1/movies/avengers');
promise.then(
function(payload) {
$scope.movieContent = payload.data;
})
SERVICES

module.factory(‘factory_id’, function() {
return {
functionname: function() {
return “this is a function”;
},
anotherfunction: function() {
// make a request and get data from backend
return data;
}
}
});
FACTORY

• Reusable operation using which you can modify the
content that is shown on the page
• Examples: uppercase a value, filter search results, etc.
module.filter(“filter_name”, function(data) {
// data is filtered or modified in a
//specific manner and returned
return data;
}
FILTERS

• Use different views for different URL fragments
• Makes use of template partials
Templates that are not a whole web page (i.e. part of a
page)
Used in conjunction with the ng-view directive
• ng-view determines where the partial will be
placed
• Can only have one ng-view per page
ROUTING

• URL parameters
To access the parameters in the URL, use the
$routeParams service
The $routeParams object will have a field with the same
name as the parameter
Ex.
• $routeParams.userId
ROUTE PARAMS

app.directive('ngSparkline', function() {
return {
restrict: 'A',
require: '^ngCity',
scope: {
ngCity: '@'
},
template: '<div class="sparkline"><h4>Weather for {{ngCity}}</h4></div>',
controller: ['$scope', '$http', function($scope, $http) {
$scope.getTemp = function(city) {}
}],
link: function(scope, iElement, iAttrs, ctrl) {
scope.getTemp(iAttrs.ngCity);
}
}
});
CUSTOM DIRECTIVES

Raisers:
$broadcast(parent scope to child scope)
$emit(child scope to parent scope)
Listeners
$on
EVENTS

'use strict';
angular.module('myAppControllers', [])
.controller('FirstCtrl', function ($scope) {
$scope.$broadcast('UPDATE_CHILD');
})
.controller('SecondCtrl', function ($scope) {
$scope.$on('UPDATE_CHILD', function() {
// do something useful here;
});
})
EXAMPLE

Angular js

More Related Content

What's hot (20)

Similar to Angular js (20)

Recently uploaded (20)

Angular js