Discover AngularJS

INTRODUCTION
AngularJS is a framework to build
a SPA (Single Page Application)

INTRO / ANGULARJS VS OTHERS FRAMEWORKS

HEY MAN! TALK IS CHEAP.HEY MAN! TALK IS CHEAP.
SHOW ME THE CODE!SHOW ME THE CODE!

ARCHITECTURE OF A PAGE
<htmlng-app="myApp">
<head>
scriptsrc="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"/script
</head>
<bodyng-controller="AppController">
<h1ng-bind="title"></h1>
script
varapp=angular.module('myApp',[]);
app.controller('AppController',AppController);
functionAppController($scope){
$scope.title='HelloWorld';
}
/script
</body>
</html>

WHAT IS DATA-BINDING ?
When modifying a value in the Javascript, HTML is updated.
And vice versa.
This is the digest cycle.

DATABINDING / DIGEST EXAMPLE
<inputtype="text"ng-model="title"/>
<spanng-bind="title"></span>
1. User add a character in the text box
2. The keydown event triggers the digest cycle
3. ng‐model modifies the $scope.title
4. $scope.title modifies ng‐bind
5. at least one value is updated: restart digest
6. nothing is updated: no more digest.

YOUR APP IS A MODULE
Module = Java package

MODULE / DECLARATION
First, set your app as a module :
angular.module('myApp',['ui.router','…']);
Second, use it to declare other parts :
varapp=angular.module('myApp');

MODULE / CONTENT
What can be declared in a module ?
controller
factory
directive

EMBED DATA IN A CONTROLLER
The controller binds variables between JavaScript and HTML.
<divng-controller="MyController">
<spanng-bind="myText"></span>
<buttonng-click="valid()">ValidMe!</button>
</div>
The $scope transports variables.
angular.module('app').controller('MyController',MyController);
functionMyController($scope){
$scope.myText='Iamthebest';
$scope.valid=function(){alert($scope.myText);};
}

DEPENDENCY INJECTION (DI)
Dependency Injection (DI) is a software design pattern that
deals with how components get hold of their dependencies.

DI / COMPARE WITH JAVA
With JAVA :
publicclassMyController{
privatestaticMyControllers=null;
publicstaticgetInstance(){
if(s==null)s=newMyController();
returns;
}
}
With JS + AngularJS :
angular.module('app').controller('MyController',MyController);

STANDARD DIRECTIVES
All AngularJS directives :
can create new HTML element
can modify the behaviour of existing elements
are prefixed with ng‐
are web components (tomorrow's web)

STANDARD DIRECTIVES / COMMON LIST
Application ng‐app, ng‐controller
Databinding ng‐bind, ng‐model
Control ng‐repeat, ng‐if, ng‐show
Event ng‐click, ng‐submit
Style ng‐class

HEY MAN! TALK IS CHEAP.HEY MAN! TALK IS CHEAP.
SHOW ME SOME EXAMPLES!SHOW ME SOME EXAMPLES!

CUSTOM DIRECTIVES
Custom directives promote your code.
We can create new HTML elements !

OKAY! NOW, LET'S CREATEOKAY! NOW, LET'S CREATE
THE <NYANCAT> DIRECTIVE!THE <NYANCAT> DIRECTIVE!

FILTERS
Filters modify the behaviour of the databinding.
<spanng-bind="name|uppercase"></span>

FILTERS / EXAMPLES
AngularJS provides many filters to format :
numbers (add spaces or ,.)
currencies (add '$')
string (lowercase, uppercase)
etc.

FILTERS / PIPE
We can pipe multiple filters !
<spanng-bind="price|currency:'euR'|uppercase"></span>

DO YOU WANT SOMEDO YOU WANT SOME
EXAMPLES ?EXAMPLES ?

SERVICES / DEFINITION
Services group business function :
REST API calls
common behaviour (eg: dropdown)

SERVICES / EXAMPLE
Find a list of peoples :
angular
.module('myApp')
.factory('PeopleService',PeopleService);
functionPeopleService(){
varfactory={
findAll:findAll
};
returnfactory;
////////////
functionfindAll(){
varlist=['joe','bernard','sandra'];
returnlist;
}
}

SERVICES / CALL
Call a service from a controller :
angular
.module('myAll')
.controller('PeopleController',PeopleController);
functionPeopleController($scope,PeopleService){
$scope.people=PeopleService.findAll();
}

BESTPRACTICES / CONTROLLER
(function(){
'usestrict';
angular
.module('myApp')
.controller('PeopleController',PeopleController);
functionPeopleController($scope){
$scope.people=['joe','bernard','sandra'];
}
})();

BESTPRACTICES / SERVICE
(function(){
'usestrict';
angular
.module('myApp')
.factory('PeopleService',PeopleService);
functionPeopleService(){
varfactory={
findAll:findAll
};
returnfactory;
////////////
functionfindAll(){
varlist=['joe','bernard','sandra'];
returnlist;
}
}
})();

ORGANIZE FILES / 'SRC/COMMON'
myapp
|-src
|-common :JShelperfortheapp
|-map
|map.helper.js

REFERENCES
Tutorials : angularjs.org
Styleguide John Papa
Styleguide Todd Motto
Snippets Sublime Text FV

TUTORIAL / GET THE PROJECT
GET THE PROJECT
$gitclonehttps://github.com/fabienvauchelles/stweb-angularjs-tutorial.git
$cdstweb-angularjs-tutorial/frontend

TUTORIAL / CREATE THE MAIN APP
GET THE NEXT STEP
$gitreset--hardq0
$npminstall
$bowerinstall
$gulpserve
WORK
1. Create the app in src/app/index.js
2. Add ng‐app to the html tag (src/app/index.html)

TUTORIAL / FIRST CONTROLLER
GET THE NEXT STEP
$gitreset--hardq1
$gulpserve
WORK
1. Add controller AppController in index.js
2. Reference controller on body tag (index.html)

TUTORIAL / NG-REPEAT
GET THE NEXT STEP
$gitreset--hardq2
$gulpserve
WORK
1. Use ng‐repeat to show many articles
2. Fill every field of an article with ng‐bind
3. Use ng‐repeat to show many tags of articles

TUTORIAL / FILTER
GET THE NEXT STEP
$gitreset--hardq3
$gulpserve
WORK
1. Add search field searchText with ng‐model to the input
(search bar)
2. Filter ng‐repeat with filter:searchText
WORK (BONUS)

© Fabien Vauchelles (2015)
TUTORIAL / SERVICE
GET THE NEXT STEP
$gitreset--hardq4
$gulpserve
WORK
1. Create an ArticlesService in common directory
2. Add the findAll function which returns all articles
3. Inject the service the AppController
4. Use service to initialize $scope.articles

Discover AngularJS

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (13)

Similar to Discover AngularJS

Similar to Discover AngularJS (20)

More from Fabien Vauchelles

More from Fabien Vauchelles (9)

Recently uploaded

Recently uploaded (20)

Discover AngularJS