angularJS之路由

angularJS是一种单页面web应用(简称spa),路由允许我们通过不同的URL路径来访问不同的内容,在AngularJS中需要用到 # + 标记 的格式;好了,我们直接看代码:

【1】通过a标签进行跳转:

<script>
        var app = angular.module("app",["ngRoute"]);
        app.config(["$routeProvider", function ($routeProvider) {
            $routeProvider.when("/content1",{template:"1111"})
                    .when("/content2",{templateUrl:"select.html"})
                    .when("/content3",{template:"33333"})
                    .when("/content4",{template:"4444"})
                    .otherwise({redirectTo:"/content1"});
        }])
</script>
</head>
<body ng-app="app">
<div ng-view></div>
<ul>
    <li><a href="#/content1">111</a></li>
    <li><a href="#/content2">222</a></li>
    <li><a href="#/content3">333</a></li>
    <li><a href="#/content4">444</a></li>
</ul>
</body>
 
【2】通过ng-click跳转:
<h3>这是第三部分child3.html的页面{{name3}}</h3>
<p>
    <span ng-click="clear()">清空缓存</span>
    <span ng-click="info()">版本信息</span>
    <span ng-click="check()">检查</span>
</p>
 
<script>
        var app = angular.module("app",["ngRoute"]);
        app.config(["$routeProvider", function ($routeProvider) {
            $routeProvider.when("/content1",{template:"1111"})
                    .when("/check",{templateUrl:"child/check.html"})
                    .when("/clear",{templateUrl:"child/clear.html"})
                    .when("/info",{templateUrl:"child/info.html"})
                    .otherwise({redirectTo:"/content1"});
        }])
</script>
<script>
app.controller("child3Controller",["$scope","$location", function ($scope,$location) {
    $scope.check= function () {
        $location.path("check");
    };
    $scope.clear= function () {
        $location.path("clear");
    };
    $scope.info= function () {
        $location.path("info");
    };
}]);
</script>
通过AngularJS的来实现这种效果,写的代码看上去还是比较冗余,大家可以学习一下onsenUI中的写法,那就比较直接简单了!
posted @ 2017-03-14 22:44  Qinzi03  阅读(107)  评论(0编辑  收藏  举报