Gérer 2 vues avec $routeProvider d’Angular

Introduction :


On peut gérer plusieurs vues à l’aide de $routeProvider. Le code suivant montre comment afficher 2 onglets, qui affichent chacun une vue différente. Il existe un controleur différent par vue.

. Dans le code suivant, on voit que 2 controleurs vides attendent d’être emplis de données. Le routing de vue fonctionne déjà.

Le Code ( A tester Ici) :



<!DOCTYPE html>
<html>
<head>
    <title>2 Vues avec Angular</title>
    <!--styles -->
    	<link rel="stylesheet" type="text/css" href="bootstrap.min.css">

    <!--scripts-->
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="angular-route.min.js"></script>
    <script type="text/javascript" src="ui-bootstrap.min.js"></script>
    <script type="text/javascript" src="ui-bootstrap-tpls.min.js"></script>
	<script>

'use strict';

// Declare app level module which depends on other modules
angular.module('demoApp', ['ngRoute','ui.bootstrap']).
  config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/', {templateUrl: 'views/vue1.html'});
    $routeProvider.when('/vue1', {templateUrl: 'views/vue1.html', controller: 'ControlleurVue1'});
    $routeProvider.when('/vue2', {templateUrl: 'views/vue2.html', controller: 'ControlleurVue2'});
    //$routeProvider.otherwise({redirectTo: '/'});
  }]).
  controller('demoController', ['$scope', '$location', function ($scope, $location) {
    $scope.isActive = function (viewLocation) {
      var active = false;
      if ($location.path().indexOf(viewLocation) !== -1) {
        active = true;
      }
      return active;
    };

  }]);

angular.module('demoApp').controller('ControlleurVue1', ['$scope', function ($scope) {

}]);

angular.module('demoApp').controller('ControlleurVue2', ['$scope', function ($scope) {

}]);

	</script>
</head>

<body ng-app="demoApp">
	<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="board-header">
<ul class="nav nav-tabs nav-justified">
	<li><a href="#/vue1" ng-class="{active: isActive('#/vue1')}">Vue 1</a></li>
	<li><a href="#/vue2" ng-class="{active: isActive('#/vue2')}">Vue 2</a></li>
</ul>
</div>
<div ng-view></div>
</nav>
</body>
</html>

Publicités