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

More Related Content

What's hot

Viewers also liked

Similar to Master AngularJS

More from Fabien Vauchelles

Recently uploaded

Master AngularJS