Master AngularJS

FORM / HTML5
With HTML5 :
<div>
<formname="myForm"
method="POST"
action="/myscript">
<inputtype="text"
name="name"/>
<buttontype="submit">Send</button>
</form>
</div>

FORM / ANGULARJS
With AngularJS :
<divng-controller="MyController">
<formname="myForm"
ng-submit="send()">
<inputtype="text"
name="name"
ng-model="valName"/>
</form>
</div>
angular.module('MyApp')
.controller('MyController',MyController);
functionMyController($scope){
$scope.valName='';
$scope.send=function(){
varmyName=$scope.valName;
//ajaxcodetosendthename
};
}

FORM / VALIDATION CONSTRAINTS
Add constraints to text field :
<formname="myForm"
ng-submit="send()"
novalidate>
<inputtype="text"
name="name"
ng-model="valName"
ng-minlength="3"
required/>
</form>
</div>

FORM / DON'T SEND ERROR
Disable send button if errors :
<formname="myForm"
ng-submit="send()"
novalidate>
<inputtype="text"
name="name"
ng-model="valName"
ng-minlength="3"
required/>
<buttontype="submit"
ng-disabled="!myForm.$valid">Send</button>
</form>
</div>

FORM / VALIDATION MESSAGES
Add warnings for errors :
<formname="myForm"
ng-submit="send()"
novalidate>
<inputtype="text"
name="name"
ng-model="valName"
ng-minlength="3"
required/>
<buttontype="submit"
ng-disabled="!myForm.$valid">Send</button>
<divng-messages="myForm.myName.$error"style="color:red">
<divng-message="required">Namecannotbeempty</div>
<divng-message="minlength">3caractersminimum</div>
</div>
</form>
</div>

FORM / MODULE
Include script and module :
<htmlng-app="myApp">
<head>
<scriptsrc="bower_components/angular/angular.js"></script_>
<scriptsrc="bower_components/angular-messages/angular-messages.js"></script_>
</head>
<bodyng-controller="MyController">
//Formhere
<script>
angular
.module('myApp',['ngMessages'])
.controller('MyController',MyController);
//Controller
</script_>
</body>
</html>

TEMPLATING / BEFORE
The classic round trip client‐server

TEMPLATING / NOW
The routing on a Single Page Application

ROUTER / BIND TEMPLATE AND URL
The URL define the template to display.

ROUTER / WHAT WE NEED TO DO
Create the application skeleton
Define where the template is injected
Create a template
Define which route calls this template

ROUTER / WHICH ROUTER ?
AngularJS has 2 routers :
ngRoute (default)
ui.router has more functionnalities.
So, we will use ui.router!

ROUTER / MODULE
Create the application skeleton :
<htmlng-app="myApp">
<head>
<scriptsrc="bower_components/angular/angular.js"></script_>
<scriptsrc="bower_components/angular-ui-router/release/angular-ui-router.js">
</head>
<body>
//Formhere
<script>
angular
.module('myApp',['ui.router'])
.config(Config);
//Config
</script_>
</body>
</html>

ROUTER / TEMPLATE INJECTION
Define where the template is injected :
<body>
<divui-view></div>
</body>

ROUTER / TEMPLATES & STATES
Create templates and define states
angular
.module('myApp',['ui.router'])
.config(Config);
functionConfig($stateProvider,$urlRouterProvider){
//Firsttab
$stateProvider.state('tab1',{
url:'/tab1',
template:'<h1>Thisisthetabnumber1</h1>'
});
//Secondtab
$stateProvider.state('tab2',{
url:'/tab2',
template:'<h2>Iamthetab2</h2>'
});
//Defaulttab
$urlRouterProvider.otherwise('/tab1');
}

ROUTER / CALL
Call a state with HTML :
<aui-sref="home">Home</a>
Call a state with JS :
$state.go('home');

$HTTP / GET
GET requests are simples !
angular
.module('myApp',[])
.controller('AppController',AppController);
functionAppController($http,$scope){
$http.get('cats.json')
.then(function(response){
$scope.cats=response.data;
});
}
Example

$HTTP / POST
POST requests are simples !
angular
.module('myApp',[])
.controller('AppController',AppController);
functionAppController($http,$scope){
varnewcat={
name:'Winston',
age:3
};
$http.post('/newcat',newcat)
.then(function(response){
alert('created!');
});
}

ANGULARJS / WHAT'S NEXT ?
AngularJS has a monthly release
AngularJS 1.4 will integrate ui.router
AngularJS 2.0 uses AtScript instead of JS, but isn't for now.

TUTORIAL / ROUTER
GET THE NEXT STEP
$gitreset--hardq5
$gulpserve
INSTALL UI-ROUTER
$bowerinstallangular-ui-router--save
WORK
Add ui.router module in app configuration (index.js)

TUTORIAL / ROUTING
GET THE NEXT STEP
$gitreset--hardq6
$gulpserve
WORK
1. Move the AppController to the ArticlesController in
src/app/articles
2. Move the HTML to the articles.html in src/app/articles
3. Create the state articles in src/app/articles
4. Inject the router in the index.html with ui‐view
5. Add default route to the index.js

TUTORIAL / SERVICE ADD
GET THE NEXT STEP
$gitreset--hardq7
$gulpserve
WORK
Add a new function in ArticlesService to add an article.
Don't forget to increment id.

TUTORIAL / ROUTE ADD
GET THE NEXT STEP
$gitreset--hardq8
$gulpserve
WORK

TUTORIAL / SERVICE REMOVE
GET THE NEXT STEP
$gitreset--hardq9
$gulpserve
WORK
Add a new function in ArticlesService to remove an article by
_id.

TUTORIAL / ROUTE REMOVE
GET THE NEXT STEP
$gitreset--hardq10
$gulpserve
WORK
1. Add function removeById in controller ArticlesController
2. Use the function with the trash button

TUTORIAL / MESSAGES
GET THE NEXT STEP
$gitreset--hardq11
$gulpserve
INSTALL NG-MESSAGES
$bowerinstallangular-messages--save
WORK
Add ngMessages module in app configuration (index.js)

TUTORIAL / VALIDATION
GET THE NEXT STEP
$gitreset--hardq12
$gulpserve
WORK
1. Disable save button if form is not $valid
2. Add class has‐error to URL and title if field isn't valid
3. Add error messages to URL and title if field isn't valid

TUTORIAL / REST
GET THE NEXT STEP AND INSTALL NODEJS
$gitreset--hardq13
$gulpserve
$cd../backend
$npminstall
$nodeapp.js
WORK

Master AngularJS

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (10)

Similar to Master AngularJS

Similar to Master AngularJS (20)

More from Fabien Vauchelles

More from Fabien Vauchelles (9)

Recently uploaded

Recently uploaded (20)

Master AngularJS