Un atelier de Jérôme BEHUET à Simplon Village 2014

Qui suis-je ?


var jerome = {
	age:     28,
	city:    "Senonches",
	company: "Proj'ystem",
	label:   "Développeur FullStack",
	skills:  ['Javascript', 'Node.JS', 'Java', 'C#', 'Python', 'Perl'],
	special: "Autodidacte"
};

AngularJS

En quelques mots

  • Créé en 2009 par Google
  • Framework SPA (Single Page Application)
  • Pattern MVC
  • Projet Libre et OpenSource (sous licence MIT)
  • Autres Frameworks (Backbone, EmberJS, etc.)

Tendance

MVC, Kesako ?

  • Modèle : Contient les données
  • Vue : Capture les évènements et les transmets au controlleur
  • Controlleur : Modifie les données suivant les évènements

Install !

A vos claviers...

L’atelier

Par Git :

$ git clone https://github.com/jbehuet/atelier-angularjs-simplon-village-2014.git

Ou en téléchargeant l’archive

Bower

Gestionnaire de paquet


		                	$ npm install -g bower

AngularJS

Via bower

Création du fichier .bowerrc 

		            		{ "directory" : "js/libs" }
		            	

		            		$ bower init
$ bower install angular#1.2.26 --save

Ou via le CDN


		              		https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js

Hello Angular

Dynamisons notre contenu statique





Hello {{yourName}} !

Directives

Les directives permettent de créer des éléments et des attributs HTML spécifiques afin de manipuler proprement le DOM

Controllers

Lien entre la vue et les données.


function mainController($scope){
	$scope.titre = "Le titre";
}

$scope représente ce lien.

Services

  • Partager les données dans l'application, par le biais d'injection de dépendances.
  • Exemple de services (providers) proposé par AngularJS
    • $http
    • $timout
    • $location
  • Singleton

Routes

Gérer la navigation et le contenu de l'application 

							bower install angular-route#1.2.26 --save

Quelques liens


Documentation AngularJS

TodoMVC

Egghead.io

CodeSchool


Merci !


Jérôme BEHUET @jbehuet

Retrouvez les slides sur bit.ly/angularsimplon2014

mais aussi le dépôt complet sur GitHub.