Discover AngularJS

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!

http://localhost:9000/slides/magic/introduction/example.html

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!

http://localhost:9000/slides/toolbox/directives-std/example.html

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!

http://localhost:9000/slides/toolbox/directives-custom/example.html

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 ?

http://localhost:9000/slides/toolbox/filters/example.html

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

https://angularjs.org/

https://github.com/johnpapa/angular-styleguide

https://github.com/fabienvauchelles/sublime-snippets

https://github.com/toddmotto/angularjs-styleguide

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


$ gulp serve

WORK1. Add controller AppController in index.js2. Reference controller on body tag (index.html)

TUTORIAL / NG-REPEAT


$ 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


$ 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


$ 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

Technology

Discover AngularJS