master angularjs
TRANSCRIPT
MASTER ANGULARJS
FORMS
FORM / HTML5
With HTML5 :<div> <form name="myForm" method="POST" action="/myscript">
<input type="text" name="name" />
<button type="submit">Send</button> </form></div>
FORM / ANGULARJS
With AngularJS :<div ng-controller="MyController"> <form name="myForm" ng-submit="send()">
<input type="text" name="name" ng-model="valName" />
<button type="submit">Send</button> </form></div>
angular.module('MyApp') .controller('MyController', MyController);
function MyController($scope) { $scope.valName = '';
$scope.send = function() { var myName = $scope.valName;
// ajax code to send the name };}
FORM / VALIDATION CONSTRAINTS
Add constraints to text field :<div ng-controller="MyController"> <form name="myForm" ng-submit="send()" novalidate>
<input type="text" name="name" ng-model="valName" ng-minlength="3" required />
<button type="submit">Send</button> </form></div>
FORM / DON'T SEND ERROR
Disable send button if errors :<div ng-controller="MyController"> <form name="myForm" ng-submit="send()" novalidate>
<input type="text" name="name" ng-model="valName" ng-minlength="3" required />
<button type="submit" ng-disabled="!myForm.$valid">Send</button> </form></div>
FORM / VALIDATION MESSAGES
Add warnings for errors :<div ng-controller="MyController"> <form name="myForm" ng-submit="send()" novalidate>
<input type="text" name="name" ng-model="valName" ng-minlength="3" required />
<button type="submit" ng-disabled="!myForm.$valid">Send</button>
<div ng-messages="myForm.myName.$error" style="color: red"> <div ng-message="required">Name cannot be empty</div> <div ng-message="minlength">3 caracters minimum</div> </div> </form></div>
FORM / MODULE
Include script and module :<html ng-app="myApp">
<head> <script src="bower_components/angular/angular.js"></script_> <script src="bower_components/angular-messages/angular-messages.js"></script_> </head>
<body ng-controller="MyController"> // Form here
<script> angular .module('myApp', ['ngMessages']) .controller('MyController', MyController);
// Controller </script_> </body></html>
ROUTER
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 skeletonDefine where the template is injectedCreate a templateDefine 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 :<html ng-app="myApp">
<head> <script src="bower_components/angular/angular.js"></script_> <script src="bower_components/angular-ui-router/release/angular-ui-router.js"> </head>
<body> // Form here
<script> angular .module('myApp', ['ui.router']) .config(Config);
// Config </script_> </body></html>
ROUTER / TEMPLATE INJECTION
Define where the template is injected :<body>
<div ui-view></div>
</body>
ROUTER / TEMPLATES & STATES
Create templates and define statesangular .module('myApp', ['ui.router']) .config(Config);
function Config($stateProvider, $urlRouterProvider) { // First tab $stateProvider.state('tab1', { url: '/tab1', template: '<h1>This is the tab number 1</h1>' });
// Second tab $stateProvider.state('tab2', { url: '/tab2', template: '<h2>I am the tab 2</h2>' });
// Default tab $urlRouterProvider.otherwise('/tab1');}
ROUTER / CALL
Call a state with HTML :<a ui-sref="home">Home</a>
Call a state with JS :$state.go('home');
CONSUME REST API WITH $HTTP
$HTTP / GET
GET requests are simples !angular .module('myApp', []) .controller('AppController', AppController);
function AppController($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);
function AppController($http, $scope) { var newcat = { name: 'Winston', age: 3 };
$http.post('/newcat', newcat) .then(function(response) { alert('created!'); });}
ANGULARJS / WHAT'S NEXT ?
AngularJS has a monthly releaseAngularJS 1.4 will integrate ui.routerAngularJS 2.0 uses AtScript instead of JS, but isn't for now.
TUTORIAL
TUTORIAL / ROUTER
GET THE NEXT STEP$ git reset --hard q5
$ gulp serve
INSTALL UI-ROUTER$ bower install angular-ui-router --save
WORKAdd ui.router module in app configuration (index.js)
TUTORIAL / ROUTING
GET THE NEXT STEP$ git reset --hard q6
$ gulp serve
WORK1. Move the AppController to the ArticlesController insrc/app/articles
2. Move the HTML to the articles.html in src/app/articles3. Create the state articles in src/app/articles4. Inject the router in the index.html with ui‐view5. Add default route to the index.js
TUTORIAL / SERVICE ADD
GET THE NEXT STEP$ git reset --hard q7
$ gulp serve
WORKAdd a new function in ArticlesService to add an article.
Don't forget to increment id.
TUTORIAL / ROUTE ADD
GET THE NEXT STEP$ git reset --hard q8
$ gulp serve
WORK
TUTORIAL / SERVICE REMOVE
GET THE NEXT STEP$ git reset --hard q9
$ gulp serve
WORKAdd a new function in ArticlesService to remove an article by
_id.
TUTORIAL / ROUTE REMOVE
GET THE NEXT STEP$ git reset --hard q10
$ gulp serve
WORK1. Add function removeById in controller ArticlesController2. Use the function with the trash button
TUTORIAL / MESSAGES
GET THE NEXT STEP$ git reset --hard q11
$ gulp serve
INSTALL NG-MESSAGES$ bower install angular-messages --save
WORKAdd ngMessages module in app configuration (index.js)
TUTORIAL / VALIDATION
GET THE NEXT STEP$ git reset --hard q12
$ gulp serve
WORK1. Disable save button if form is not $valid2. Add class has‐error to URL and title if field isn't valid3. Add error messages to URL and title if field isn't valid
TUTORIAL / REST
GET THE NEXT STEP AND INSTALL NODEJS$ git reset --hard q13
$ gulp serve
$ cd ../backend$ npm install$ node app.js
WORK
© Fabien Vauchelles (2015)
TUTORIAL / FINAL
GET AND READ THE SOLUCE$ git reset --hard q14
$ gulp serve