SimplonBoulogne AngularJS
Design Pattern MVC avec AngularJS 1.5
Sommaire
Introduction - Installation
Expressions - Vues
Directives
Controllers / Scopes
Modles
Introduction
Angular.JS vous aide mieux organiser votre code Javascript pour
crer des sites web dynamiques.
Cest un framework Javascript ct client pour crer de lHTML
interactif. Parfait pour les SPAs (Single Page Applications)
Il est gratuit, open-source, cr par Google depuis 2009.
Une norme communaut sest cr autour de ce langage.
Installation Angular.JS
<script src="https://ajax.googleapis.com/ajax/libs/
angularjs/1.5.0/angular.min.js"></script>
Cest tout!
Notion dAPI
lavenir, vous pourrez crer ct serveur une API qui permettra
dmettre des donnes et que les dveloppeurs externes ou
applications tierces puissent puiser leurs ressources partir de votre
API
Par exemple, une web-app sous Angular pourra rcuprer les
donnes dune API et sexcuter.
Directives
Les directives permettent de booster votre vue : votre HTML.
Cest un tag HTML qui va dire dexcuter du code Javascript
Vous pouvez galement crer vos propres directives.
Quelques directives (built-in)
ng-repeat ng-init (pour initialiser des valeurs par dfaut)
ng-app Dfinit lencapsulation dun module Angular
ng-controller Dfinit un contrleur, spcification dun alias possible
ng-model Bind les valeurs HTML lapplication
(Nous allons voir plus en dtail aprs)
Modules
Portion de code de notre application Angular.
<!doctype html>
<html ng-app="myModule">
<head>
...
Modules
Portions de code de notre application Angular.
Permet aussi de dfinir les dpendances de notre code (2me
paramtre)
angular.module("myModule", ["firebase"])
Rappel Modle MVC
request
Controller
CRUD binding
response
data
Model Vue
Controller
L o lon dfinit nos fonctionnalits avec des fonctions et valeurs.
app.js
myModule.controller("PostsCtrl", function($scope) {
// Les choses srieuses commencent ici
});
Controller - $scope
La variable scope sert attacher des variables pour les utiliser dans
la vue qui utilise le controller.
myModule.controller("PostsCtrl", function($scope) {
$scope.posts = [
{ name: "Le welsh", desc: "C'est dlicieux" },
{ name: "Les Macs", desc: "C'est la vie" }
];
});
Controllers - fonctions
Les controllers, comme pour Symfony, ont pour rle dexcuter du
code de traitement en tout genre.
Chaque controller peut donc avoir plusieurs fonctions qui lui sont
propres.
$scope.addTodo = function(){
console.log("Un nouvel article a t post");
var post = {name: "Nouvel article"};
//Code pour ajout du nouvel article (push?)
Expressions et vue
Ct vue, cest similaire Twig avec Symfony, vous pouvez bind des
paramtres, faire des calculs, des conditions etc
<div ng-controller="PostsCtrl">
{{ posts[0].name }}
</div>
Penser bien vous situez dans une directive qui a charg le
contrleur correspondant vos donnes.
Toujours plus de directives
<ul>
<li ng-repeat="post in posts">
<strong>{{ post.name }}</strong>:
<span>{{ post.desc }}</span> Boucle
</li>
</ul>
<div ng-if="posts.length > 2"> <!-- $scope -->
<span>Il y a plus de deux articles</span>
</div>
Conditions
Modles
Vous pouvez crer vos entits dans Angular pour ensuite les
instancier dans vos contrleurs.
Penser bien sparer pour une architecture MVC correcte vos
contrleurs, vues et models (des noms de dossiers explicites
suffiront)
Modles
function Post(name, description) {
models.js
this.name = name;
this.desc = description;
};
$scope.posts = [ controller.js
new Post("Le welsh", "C'est dlicieux"),
new Post("Another entity", "C'est la vie")
];
Modles
Exemple dutilisation dune entit avec ng-model
Permet de binder une valeur HTML dans le $scope du
contrleur et lactualisation se fait en direct !
<div ng-repeat="post in posts">
Titre de larticle:
<input type="text" ng-model="post.name"/>
<br/><span>{{ post.name }}</span>
</div>
Affichage de la valeur du $scope
Liste dvnements
ng-blur Quand un lment perd son focus
ng-change Changement de valeur dans un input
ng-mouseleave Dtecte lorsque la sourie sort dun lment
ng-mouseover Dtecte lorsque la sourie entre dans un lment
Appeler vnement
Gnralement, vous dfinissez une fonction dans votre
contrleur et lappelez dans votre vue avec une directive
$scope.onMyButtonClick = function() { // app.js
// Some code
};
<button ng-click="onMyButtonClick">Lorem ipsum</button>
Un ptit rcap
Les contrleurs et les vues sont lis grce au
Les sont utiliss pour afficher des donnes ct client
Un peut contenir des (2 rponses possibles)
Ch llenge 1
Crer un contrleur qui bind des paramtres au $scope
Crer un modle avec une entit Produit qui prend un titre, une description et
un prix.
Penser bien sparer pour une architecture MVC correcte vos contrleurs, vues
et models (des noms de dossiers explicites suffiront)
partir de la vue, vous pourrez facilement voir, ajouter, modifier, supprimer un
produit (penser donc crer les fonctions ncessaires). Utilisation dune BDD
non demand donc donnes non sauvegardes.
Ressources
https://www.codeschool.com/courses/shaping-up-with-angular-js/
https://angularjs.org
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/
Array/unshift
http://www.w3schools.com/angular/tryit.asp?filename=try_ng_model_two-way
Plug-in Angular Batarang pour Chrome (debug Angular)
https://docs.angularjs.org/api/ng/filter (pour ng-repeat)
