routeProvider路由的使用-CSDN博客

先创建一个主程序文件index.html,内容如下：

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>index.html</title>
    </head>
    <body>
        <div>
            <ng-view></ng-view>
        </div>
    </body>
    <script src="angular.js" type="text/javascript" charset="utf-8"></script>
    <script src="angular-route.js" type="text/javascript" charset="utf-8"></script>
    <script src="app.js" type="text/javascript" charset="utf-8"></script>
</html>

其中angular.js和angular-route.js自行下载（本示例用的版本为1.5.8）

然后创建app.js文件，代码如下：

angular.module("myApp", ["ngRoute"])
    .config(["$routeProvider", function($routeProvider) {
        $routeProvider.when("/home/:a", {
            //解析模板
            templateUrl: "home.html",
            controller: "homeController"
        });
        $routeProvider.when("/user/:n", {
            templateUrl: "user.html",
            controller: "userController"
        });
        //未定义时的默认路由，这个路由将会跳转到/home:a，undefined作为aaa传入
        //此处写/home/,/home,/home/:a，都不行
        $routeProvider.otherwise("/home/undefined");
    }])
    .controller("homeController", function($scope, $location,$routeParams) {
        $scope.mainModel = {
            "name": $routeParams.a
        };
        $scope.mainModel.goToUserView = function() {
            //replace防止浏览器通过历史记录回到该页面
            $location.path("/user/" + $scope.mainModel.name).replace();
        }
    })
    .controller("userController", function($scope, $location, $routeParams) {
        $scope.mainModel = {
            goBack : function() {
                $location.path("/home/" + $scope.mainModel.name);
                //当没有replace时可以通过下面的方式后退
                //window.history.go(-1);
            },
            name: $routeParams.n
        };
    })

home.html:

        <h1>home</h1>
        <p>我的名字：{{mainModel.name}}</p>
        <input type="text" ng-model="mainModel.name"/>
        <button ng-click="mainModel.goToUserView()">按钮</button>

user.html:

        <h1>user</h1>
        <p>我的名字：{{mainModel.name}}</p>
        <input type="text" ng-model="mainModel.name" />
        <button ng-click="mainModel.goBack()">返回</button>