Master AngularJS
5 likes464 views
This document provides an overview of how to build forms in AngularJS using HTML5, AngularJS directives, validation, and modules. It begins by showing a basic HTML5 form, then introduces AngularJS forms with two-way data binding. Validation constraints and error handling are added. The form is integrated into an AngularJS module and controller. Finally, it discusses routing and consuming REST APIs with $http requests.
![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>](https://image.slidesharecdn.com/release20150329-150329150528-conversion-gate01/85/Master-AngularJS-8-320.jpg)
![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>](https://image.slidesharecdn.com/release20150329-150329150528-conversion-gate01/85/Master-AngularJS-16-320.jpg)
![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');
}](https://image.slidesharecdn.com/release20150329-150329150528-conversion-gate01/85/Master-AngularJS-18-320.jpg)
![$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](https://image.slidesharecdn.com/release20150329-150329150528-conversion-gate01/85/Master-AngularJS-22-320.jpg)
![$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!');
});
}](https://image.slidesharecdn.com/release20150329-150329150528-conversion-gate01/85/Master-AngularJS-23-320.jpg)
Master AngularJS
- 2. FORMS
- 5. FORM / VALIDATION CONSTRAINTS Add constraints to text field : <divng-controller="MyController"> <formname="myForm" ng-submit="send()" novalidate> <inputtype="text" name="name" ng-model="valName" ng-minlength="3" required/> <buttontype="submit">Send</button> </form> </div>
- 6. FORM / DON'T SEND ERROR Disable send button if errors : <divng-controller="MyController"> <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>
- 7. FORM / VALIDATION MESSAGES Add warnings for errors : <divng-controller="MyController"> <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>
- 10. ROUTER
- 13. ROUTER / BIND TEMPLATE AND URL The URL define the template to display.
- 14. 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
- 15. ROUTER / WHICH ROUTER ? AngularJS has 2 routers : ngRoute (default) ui.router has more functionnalities. So, we will use ui.router!
- 17. ROUTER / TEMPLATE INJECTION Define where the template is injected : <body> <divui-view></div> </body>
- 18. 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'); }
- 21. CONSUME REST API WITH $HTTP
- 24. 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.
- 25. TUTORIAL
- 26. 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)
- 27. 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
- 28. 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.
- 29. TUTORIAL / ROUTE ADD GET THE NEXT STEP $gitreset--hardq8 $gulpserve WORK
- 30. TUTORIAL / SERVICE REMOVE GET THE NEXT STEP $gitreset--hardq9 $gulpserve WORK Add a new function in ArticlesService to remove an article by _id.
- 31. 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
- 32. TUTORIAL / MESSAGES GET THE NEXT STEP $gitreset--hardq11 $gulpserve INSTALL NG-MESSAGES $bowerinstallangular-messages--save WORK Add ngMessages module in app configuration (index.js)
- 33. 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
- 34. TUTORIAL / REST GET THE NEXT STEP AND INSTALL NODEJS $gitreset--hardq13 $gulpserve $cd../backend $npminstall $nodeapp.js WORK
- 35. © Fabien Vauchelles (2015) TUTORIAL / FINAL GET AND READ THE SOLUCE $gitreset--hardq14 $gulpserve