Vous êtes sur la page 1sur 23

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)