Angular JS
ESTEI
2014 - 2015
Master 1 Web
Denis LABASTE & Maximilien TRUFIER
Javascript
Created in 1995 by Brendran Eich
ECMA Script Syntax (like AS3)
Prototype-based & object-oriented programming language
Revival
Brought by mobile & web applications
JS Libraries
JS Frameworks
Jquery, Mootools, ...
Backbone, Ember, Angular
AngularJS
Made in 2009 by Miško Hevery
Interest to rebuild his code
Conclusive results
Framework Development
History
?
SPA
Architecture MODEL - VIEW - CONTROLLER
The serveur becomes an API ( XML & JSON datas)
Single Page Application
Why Angular JS?
1
2
Loading of a page
If the user load another page
HTTP Request
Sending the response (page + ressources )
New HTTP Request
Sending a new response (page + ressources )
Without AngularJS
With Angular JS
1
2
Loading of a page
If the user load another page
HTTP Request
Sending of the response (page + ressources + JSON datas )
Datas request
Response with the JSON datas loaded
No new requests
Application collection of controllers and directives.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS</title>
</head>
<body>
<label>Name :</label>
<input type="text" ng-model="nom">
<h1>Hi {{nom}} ! </h1>
</body>
<script src="angular.js"></script>
<script src="app.js"></script>
</html>index.html
Application
Controller Algorithmic Logic
Linked to the DOM
<div ng-controller="MyCtrl">
</div>index.html
myApp.controller('MyCtrl', function($scope) {
});app.js
Controller
Scope Specific to a controller
Reference variables, methods and model function
Bi-directional Data Binding
Syntax : {{ Code }}
Views Management
<body>
<label>Name :</label>
<input type="text" ng-model="name">
<h1>Hello {{name}} ! </h1>
</body>index.html
myApp.controller('MonCtrl', function($scope) {
$scope.name = 'Alan Mc Kay';
});app.js
Scope Example
index.html
{{ data | filter:settings }}Syntax
Some filters
{{'1388123412323' | date:'MM/dd/yyyy @ h:mma'}}
{{'My text' | uppercase}}
{{'My Description' | limitTo:8}}
<li ng-repeat="product in store.products | limitTo:3">
<li ng-repeat="product in store.products | orderBy:'-price'">Filters
index.html
<button ng-click="count = count + 1" ng-init="count = 0">
Increment
</button>
count : <span ng-class="{max: count > 5}"> {{count}}</span>Possibilities
index.html
<div ng-view></div>Routes
URL Patterns
Page addition in AJAX in a DOM element
app.js
myApp.config([‘$routeProvider’, function($routeProvider) {
$routeProvider
.when(‘/contact’, {
templateUrl : ‘partials/contact.html’,
controller: ‘ContactCtrl’
})
});
Benefits & Drawbacks
Bi-directionnal data-binding
MVC Architecture
Reactivity of the user interface
Very flexible
Supported by Google
Syntax confusing at first
Implementation of SEO
IE7+ Compatibility only
Still young
Conclusion
Promising & Appreciated Technology
Easy applications creation
Excellent framework for big web projects
Angular JS
By tzehart
