Angularjs路由描述：定义路由规则(routeProvider)，然后通过不同的URL，告诉(ng-app)加载哪个页面(HTML)，再渲染到(ng-app)视图(ng-view)中。
主界面index.html
<!DOCTYPE html>
<html>
<head></head>
<body>
<div ng-app="routeApp">
<h3>路由</h3>
<div ng-view></div><!--模板将添加到此div里面-->
</div>
<script src="js/angular.min.js"></script><!--加载angularJS库 -->
<script src="js/app.js"></script><!--加载app.js 库，定义路由规则写在这里 -->
<script src="js/main.js"></script><!-- 定义控制器-->
</body>
</html>
定义路由规则app.js
var routeApp=angular.module("routeApp",[]);
routeApp.config(["$routeProvider",function($routeProvider){
$routeProvider.when("/temp1",{
templateUrl:temp1/template1.html,
controller:"myCtrl1"
})
.when("temp2",{
templateUrl:temp2/template2.html,
controller:"myCtrl2"
}).
otherwise({
redirectTo:"/temp1";
});
}]);
定义控制器 main.js
routeApp.controller("myCtrl1",["$scope",function($scope){
//code
}])
.controller("myCtrl2",["$scope",function($scope){
//code
}]);
定义模板 template1.html 、template2.html
扫一扫
161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
