Tutoriel AngularJS Design Pattern MVC

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"> 

<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)

Tutoriel AngularJS Design Pattern MVC

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tutoriel AngularJS Design Pattern MVC

Uploaded by

Copyright:

Available Formats

SimplonBoulogne AngularJS

Design Pattern MVC avec AngularJS 1.5

Cest un framework Javascript ct client pour crer de lHTML

Il est gratuit, open-source, cr par Google depuis 2009.

Une norme communaut sest cr autour de ce langage.

Par exemple, une web-app sous Angular pourra rcuprer les

Cest un tag HTML qui va dire dexcuter du code Javascript

Vous pouvez galement crer vos propres directives.

ng-app Dfinit lencapsulation dun module Angular

ng-controller Dfinit un contrleur, spcification dun alias possible

ng-model Bind les valeurs HTML lapplication

Permet aussi de dfinir les dpendances de notre code (2me

Les controllers, comme pour Symfony, ont pour rle dexcuter du

Penser bien vous situez dans une directive qui a charg le

<div ng-if="posts.length > 2">

Penser bien sparer pour une architecture MVC correcte vos

function Post(name, description) {

<div ng-repeat="post in posts">

Affichage de la valeur du $scope

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

$scope.onMyButtonClick = function() { // app.js

<button ng-click="onMyButtonClick">Lorem ipsum</button>

Les sont utiliss pour afficher des donnes ct client

Un peut contenir des (2 rponses possibles)

partir de la vue, vous pourrez facilement voir, ajouter, modifier, supprimer un

Plug-in Angular Batarang pour Chrome (debug Angular)

https://docs.angularjs.org/api/ng/filter (pour ng-repeat)

You might also like