11 Mar AngularJS SPA (Single Page Application)
Dans ce tutoriel on va utiliser les directives : ng-app et ng-view.
Vous pouvez consulter la liste des directives d’Angular sur le site officiel.
Etape 1 :
On va créer un fichier index.html
<!doctype html>
<html ng-app="myApp">
<head>
<!-- Appel du script Angular -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<!-- Pour l'utilisation des routes dans notre site -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
</head>
<body>
<a href="#/">Accueil</a>
<a href="#/a-propos">A propos</a>
<a href="#/blog">Blog</a>
<!-- Pour l'affichage des views -->
<div ng-view></div>
<!-- Notre script -->
<script src="app.js"></script>
</body>
</html>
Etape 2 :
On va créer notre script app.js
/* MODULE */
var app = angular.module('myApp', ['ngRoute']);
/* Les ROUTES */
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/accueil.html',
controller : 'HomeController'
})
.when('/blog', {
templateUrl : 'pages/blog.html',
controller : 'BlogController'
})
.when('/a-propos', {
templateUrl : 'pages/a-propos.html',
controller : 'AboutController'
})
.otherwise({redirectTo: '/'});
});
/*Les Controllers */
app.controller('HomeController', function($scope) {
$scope.texte = "Page d'accueil";
});
app.controller('BlogController', function($scope) {
$scope.texte = "Page du blog";
});
app.controller('AboutController', function($scope) {
$scope.texte = "Page à propos";
});
Etape 3 :
La création des pages statiques dans un dossier pages
<!-- accueil.html -->
<h1>Accueil</h1>
<p>{{texte}}</p>
<!-- blog.html -->
<h1>Blog</h1>
<p>{{texte}}</p>
<!-- a-propos.html -->
<h1>A propos</h1>
<p>{{texte}}</p>