3.A. AngularJS - alexattia/myWiki GitHub Wiki

AngularJS est un framework JavaScript fondé sur l'extension du HTML.

Tables of contents

Basic App

Directives

###For a Basic App

####App.js

// define the main application module
var myApp = angular.module("myApp", ['ngRoute']); 

####MyController.js

myApp.controller("MyController", function($scope) {
	$scope.message = "Hello World";
});

The $scopeis the glue between the view and the controller.

####Router

app.config(function($routeProvider){
     $routeProvider.when("/", {  #redirection to index page with correct controler
            templateUrl: 'templates/index.html',
            controller: 'HomeController' 
        })
        .when("/profile", {
            templateUrl: 'templates/profile.html',
            controller: 'ProfileController',
        })
        .otherwise({
            redirectTo: '/'
        });

});

###Directives Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS'sHTML compiler to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children. ####ngRepeat List of elements in a list already existing

<li ng-repeat="session in sessions | orderBy : sortorder | limitTo:3"></li>

####ngClick Execute the click handler

<div data-ng-click="myFunction(myparam)"></div>

myFunction must be defined on the scope of the controller.

####ngSwitch

<div ng-controller="ExampleController">
  <select ng-model="selection" ng-options="item for item in items">
  </select>
  <code>selection={{selection}}</code>
  <hr/>
  <div class="animate-switch-container"
    ng-switch on="selection">
      <div class="animate-switch" ng-switch-when="settings">Settings Div</div>
      <div class="animate-switch" ng-switch-when="home">Home Span</div>
      <div class="animate-switch" ng-switch-default>default</div>
  </div>
</div>

####ngInit Set up state inside the scope of a directive when that directive is invoked.

<div ng-init="greeting='Hello'; person='World'">
    {{greeting}} {{person}}
</div>

####ngIf It differs from ng-show and ng-hide in that it actually removes and recreates the DOM nodes, rather than just showing or hiding them via css.

<div ng-if="2 + 2 === 5">
Won't see this DOM node, not even in the source code
</div>
<div ng-if="2 + 2 === 4">
Hi, I do exist
</div>