angularjs里重要的route-优快云博客

本文通过一个具体的示例展示了如何使用Angular框架进行页面路由配置，并为不同的路由路径指定对应的控制器及模板。示例中包含了基本的路由设置、多个控制器定义以及简单的视图展示。

写一段代码来解释吧!

<!DOCTYPE html>
<html ng-app="mainApp">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div ng-view></div>
<script type="text/ng-template" id="template">
    <h1>{{title}}</h1>
</script>
<ul>
    <li><a href="#/a">A</a></li>
    <li><a href="#/b">B</a></li>
    <li><a href="#/c">C</a></li>
</ul>
</body>
<script src="angular.min.js" type="text/javascript"></script>
<script src="angular-route.min.js"></script>
<script>
    (function(angular){
        var app=angular.module('mainApp',['ngRoute']);
        //配置一个路由服务
        app.config(['$routeProvider', function($routeProvider) {
            $routeProvider
                    .when('/students/:name?', {controller: 'StudentsController',templateUrl: 'template'})
                    .when('/a',{controller:'controllerA',templateUrl:'template'})
                    .when('/b',{controller:'controllerB',templateUrl:'template'})
                    .when('/c',{controller:'controllerC',templateUrl:'template'})
                    .otherwise({redirectTo:'/a'});
        }]);
        app.controller('StudentsController',['$routeParams','$scope',function($routeParams,$scope){
            $scope.title=$routeParams['name']+'---hahhha';
            console.log($scope.title);
        }]);
        app.controller('controllerA',['$scope',function($scope){
            $scope.title='春天来了！！！';
        }]);
        app.controller('controllerB',['$scope',function($scope){
            $scope.title='夏天来了！！！';
        }]);
        app.controller('controllerC',['$scope',function($scope){
            $scope.title='秋天来了！！！';
        }]);
    })(angular)
</script>
</html>