angularJS 路由模块--未实现-优快云博客

本文链接：https://blog.youkuaiyun.com/stopcpp/article/details/56844507

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由模块</title>
</head>
<body ng-app="app">
    <ul>
        <li><a href="#/a">A</a></li>
        <li><a href="#/b">B</a></li>
        <li><a href="#/c">C</a></li>
    </ul>
    <div ng-view></div>

    <script src="bower_components/angular/angular.js"></script> 
    <script src="node_modules/angular-route/angular-route.js"></script>
    <script>
        var app = angular.module('app', ['ngRoute']);

        app.controller('AController', ['$scope', function($scope){
            $scope.title = '这是A控制器';
        }]);
        app.controller('BController', ['$scope', function($scope){
            $scope.title = '这是B控制器';
        }]);
        app.controller('CController', ['$scope', function($scope){
            $scope.title = '这是C控制器';
        }]);

        app.config(['$routeProvider',function($routeProvider,$locationProvider){
            $routeProvider
                .when('/a',{
                    templateUrl:'a.html',
                    controller:'AController'
                })
                .when('/b',{
                    templateUrl:'b.html',
                    controller:'BController'
                })
                .when('/c',{
                    templateUrl:'c.html',
                    controller:'CController'
                })
                .otherwise({
                    redirectTo:'/a'
                });
        }]);


    </script>
</body>
</html>