首页 > Web开发 > 详细

angularJS之路由

时间:2017-03-15 00:00:21      阅读:196      评论:0      收藏:0      [点我收藏+]

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中的写法,那就比较直接简单了!

angularJS之路由

原文:http://www.cnblogs.com/sunshine-my/p/6551229.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!