View
159
Download
0
Category
Preview:
Citation preview
DISCOVER ANGULARJS
ANGULARJS IS {{MAGIC}} !
INTRODUCTIONAngularJS is a framework to builda SPA (Single Page Application)
INTRO / ANGULARJS VS OTHERS FRAMEWORKS
INTRO / LEARNING CURVE
HEY MAN! TALK IS CHEAP.HEY MAN! TALK IS CHEAP.SHOW ME THE CODE!SHOW ME THE CODE!
ARCHITECTURE OF A PAGE<html ng-app="myApp">
<head> script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" /script</head>
<body ng-controller="AppController"> <h1 ng-bind="title"></h1>
script var app = angular.module('myApp', []);
app.controller('AppController', AppController);
function AppController($scope) { $scope.title = 'Hello World'; } /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 CYCLE
DATABINDING / DIGEST EXAMPLE<input type="text" ng-model="title" /><span ng-bind="title"></span>
1. User add a character in the text box2. The keydown event triggers the digest cycle3. ng‐model modifies the $scope.title4. $scope.title modifies ng‐bind5. at least one value is updated: restart digest6. nothing is updated: no more digest.
KNOW SOME BASIC
YOUR APP IS A MODULEModule = Java package
MODULE / DECLARATION
First, set your app as a module :angular.module( 'myApp', [ 'ui.router', '…' ]);
Second, use it to declare other parts :var app = angular.module('myApp');
MODULE / CONTENT
What can be declared in a module ?controllerfactorydirective
EMBED DATA IN A CONTROLLERThe controller binds variables between JavaScript and HTML.<div ng-controller="MyController"> <span ng-bind="myText"></span> <button ng-click="valid()">Valid Me !</button></div>
The $scope transports variables.angular.module('app').controller('MyController', MyController);
function MyController($scope) { $scope.myText = 'I am the best'; $scope.valid = function() { alert($scope.myText); };}
DEPENDENCY INJECTION (DI)Dependency Injection (DI) is a software design pattern thatdeals with how components get hold of their dependencies.
DI / COMPARE WITH JAVA
With JAVA :public class MyController { private static MyController s = null;
public static getInstance() { if ( s == null ) s = new MyController(); return s; }}
With JS + AngularJS :angular.module('app').controller('MyController', MyController);
MY TOOLBOX
STANDARD DIRECTIVESAll AngularJS directives :
can create new HTML elementcan modify the behaviour of existing elementsare prefixed with ng‐are web components (tomorrow's web)
STANDARD DIRECTIVES / COMMON LIST
Application ng‐app, ng‐controllerDatabinding ng‐bind, ng‐modelControl ng‐repeat, ng‐if, ng‐showEvent ng‐click, ng‐submitStyle ng‐class
HEY MAN! TALK IS CHEAP.HEY MAN! TALK IS CHEAP.SHOW ME SOME EXAMPLES!SHOW ME SOME EXAMPLES!
CUSTOM DIRECTIVESCustom directives promote your code.We can create new HTML elements !
OKAY! NOW, LET'S CREATEOKAY! NOW, LET'S CREATETHE <NYANCAT> DIRECTIVE!THE <NYANCAT> DIRECTIVE!
FILTERSFilters modify the behaviour of the databinding.
<span ng-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 !<span ng-bind="price | currency:'euR' | uppercase"></span>
DO YOU WANT SOMEDO YOU WANT SOMEEXAMPLES ?EXAMPLES ?
SERVICES
SERVICES / DEFINITION
Services group business function :REST API callscommon behaviour (eg: dropdown)
SERVICES / EXAMPLE
Find a list of peoples :angular .module('myApp') .factory('PeopleService', PeopleService);
function PeopleService() { var factory = { findAll: findAll };
return factory;
////////////
function findAll() { var list = ['joe', 'bernard', 'sandra'];
return list; }}
SERVICES / CALL
Call a service from a controller :angular .module('myAll') .controller('PeopleController', PeopleController);
function PeopleController($scope, PeopleService) { $scope.people = PeopleService.findAll(); }
BESTPRACTICES
BESTPRACTICES / CONTROLLER(function() { 'use strict';
angular .module('myApp') .controller('PeopleController', PeopleController);
function PeopleController($scope) { $scope.people = ['joe', 'bernard', 'sandra']; }
})();
BESTPRACTICES / SERVICE(function() {'use strict';
angular .module('myApp') .factory('PeopleService', PeopleService);
function PeopleService() { var factory = { findAll: findAll };
return factory;
////////////
function findAll() { var list = ['joe', 'bernard', 'sandra'];
return list; } }
})();
ORGANIZE FILES
ORGANIZE FILES / OVERVIEWmyapp|- bower_components : external plugins|- node_modules : tools to build the project|- scss : my common styles|- src |- app : the application, organized by features |- assets : media files |- images |- common : JS helper for the app |- components : Common directives |- index.html : app entry point |- index.js : app initialisation|- bower.json : list of the external plugins|- gulpfile.js : JS makefile|- package.json : list of tools to build the project
ORGANIZE FILES / 'SRC/APP'myapp|- src |- app |- area |- _area.scss |- area.controller.js |- area.html |- area.route.js |- area.service.js |- home |- _home.scss |- home.controller.js |- home.html |- home.route.js
ORGANIZE FILES / 'SRC/COMMON'myapp|- src |- common : JS helper for the app |- map | map.helper.js
ORGANIZE FILES / 'SRC/COMPONENTS'myapp|- src |- components : Common directives |- chart | _chart.scss | chart.directive.js | chart.html
REFERENCESTutorials : angularjs.org
Styleguide John PapaStyleguide Todd MottoSnippets Sublime Text FV
TUTORIAL
TUTORIAL / GET THE PROJECT
GET THE PROJECT$ git clone https://github.com/fabienvauchelles/stweb-angularjs-tutorial.git$ cd stweb-angularjs-tutorial/frontend
TUTORIAL / CREATE THE MAIN APP
GET THE NEXT STEP$ git reset --hard q0
$ npm install$ bower install
$ gulp serve
WORK1. Create the app in src/app/index.js2. Add ng‐app to the html tag (src/app/index.html)
TUTORIAL / FIRST CONTROLLER
GET THE NEXT STEP$ git reset --hard q1
$ gulp serve
WORK1. Add controller AppController in index.js2. Reference controller on body tag (index.html)
TUTORIAL / NG-REPEAT
GET THE NEXT STEP$ git reset --hard q2
$ gulp serve
WORK1. Use ng‐repeat to show many articles2. Fill every field of an article with ng‐bind3. Use ng‐repeat to show many tags of articles
TUTORIAL / FILTER
GET THE NEXT STEP$ git reset --hard q3
$ gulp serve
WORK1. 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$ git reset --hard q4
$ gulp serve
WORK1. Create an ArticlesService in common directory2. Add the findAll function which returns all articles3. Inject the service the AppController4. Use service to initialize $scope.articles
Recommended