Tuto AngularJS

Routes AngularJS

Comment créer des routes avec angularJS? L'intérêt des routes dans AngularJS est de pouvoir faire une appli de type Single Page en incluant des portions de pages lorsqu'on en a besoin sans avoir à recharger une nouvelle page.

Exemple de routes AngularJS

<!-- index.html-->
<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="UTF-8">
        <title>Routes AngularJS</title>
    </head>
    <body>
        <a href="#!/temp1">Click vers template 1</a><br>
        <a href="#!/temp2">Click vers template 2</a>
        <div ng-view>

        </div>
        <script src="https://code.angularjs.org/1.6.5/angular.min.js"></script>
        <script src="https://code.angularjs.org/1.6.5/angular-route.min.js"></script>
        <script>
            var app = angular.module('app', ['ngRoute']);

            app.config(function($routeProvider){
                $routeProvider
                .when('/temp1', {
                    templateUrl: 'templates/template1.html'
                })
                .when('/temp2', {
                    templateUrl: 'templates/template2.html'
                })
                .otherwise({ redirectTo: '/'});
            });
        </script>
    </body>
</html>

<!--templates/template1.html-->
<h1>Template 1</h1>
<p>Bienvenue à Paris</p>

<!--templates/template2.html-->
<h1>Template 2</h1>
<p>Welcome to London</p>

Routes avec contrôleurs AngularJS

<!--index.html-->
<!DOCTYPE html>
<html ng-app="routesApp">
    <head>
        <meta charset="UTF-8">
        <title>Routes et controlleurs AngularJS</title>
    </head>
    <body>
        <a href="#!/template1">Template 1</a>
        <a href="#!/template2">Template 2</a>
        <div ng-view>

        </div>
        <script src="https://code.angularjs.org/1.6.5/angular.min.js"></script>
        <script src="https://code.angularjs.org/1.6.5/angular-route.min.js"></script>
        <script>
            var routesApp = angular.module('routesApp', ['ngRoute']);

            routesApp.config(function($routeProvider){
                $routeProvider
                .when('/template1', {
                    templateUrl: 'templates/template1.html',
                    controller : 'TheController'
                })
                .when('/template2', {
                    templateUrl: 'templates/template2.html',
                    controller : 'TheController'
                })
                .otherwise({redirectTo: '/view1'});
            });

            routesApp.controller('TheController', function($scope){
                $scope.affichvue1 = "Affichage vue 1";
                $scope.affichvue2 = "Affichage vue 2";
            });
        </script>
    </body>
</html>

<!--templates/template1-->
<p>{{affichvue1}}</p>

<!--templates/template2-->
<p>{{affichvue2}}</p>