Angular Material Design

Angular JS
● AngularJS est un framework JavaScript libre et open-
source développé par Google.
● C’est un Framework MVC (Modèle Vue Contrôleur)
coté client.

● SPA.
● Basé sur la librairie JQuery Lite
● Composants Réutilisables :
<google-map> <tabs> <date-picker> ...
Charger AngularsJS :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-
rc.2/angular.min.js">
</script>

Application
HTML :
<body ng-app="JCertif"> ... </body>
SCRIPT :
<script>
var app= angular.module('JCertif',[]);
</script>

Les contrôleurs
HTML :
<div ng-controller="myCtrl"> ... </div>
SCRIPT :
app.controller('myCtrl',function($scope){
//mettre ici les actions du controleur
}) ;

ng-model
<html>
<head>
<script
src="http://code.angularjs.org/1.0.6/angular.min.js">
</script>
</head>
<body ng-app=”Devfest” >
<input type=”text” ng-model="name">
<p> Hello {{name}} ! </p>
</body>
</html>

Scope
Toutes les variables manipulées par un contrôleur doivent
être attachées à son scope.
L’interprétation de variable par la vue se fait avec {{ }}
ng-show
Les directives ng-show servent a cacher ou non une portion
du view.

ng-repeat
ng-repeat="element in ensemble"
Les filtres
{{expression | filtre : element}}
{{expression | filtre : Uppercase }}

Le routage
● AngularJS est fourni avec un système de routing,
qui permet de définir pour un certain URL
appelé, une certaine page à charger en AJAX.
● Le résultat a afficher doit être rajouté dans une
portion du DOM, défini grâce à la directive ng-view .

Material Design
‘Material environment’ est
un espace 3D, ce qui signifie
que tous les objets ont x, y
et z dimensions.

Selection controls: Radio button

Angular Material Design

Contenu connexe

Tendances

Similaire à Angular Material Design

Plus de Sofien AZOUZI

Angular Material Design

Notes de l'éditeur