您的位置：首页 > Web前端 > AngularJS
AngularJS 路由配置对象

2017-10-18 14:19 239 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS 路由配置对象</title>
<style type="text/css">
/*       可以利用CSS的伪类实现：
a:link，定义正常链接的样式；
a:visited，定义已访问过链接的样式；
a:hover，定义鼠标悬浮在链接上时的样式；
a:active，定义鼠标点击链接时的样式。  */
a{
text-decoration:none;
}
a:link{
color:black;
}
a:visited {
color:green;
}
a:hover {
color:red;
}
a:active {
color:peru;
}
</style>

<!-- 1.导入AngularJS库文件 -->
<script type="text/javascript" src="../js/angular.js" ></script>
<!-- 2.导入AngularJS路由支持文件（必须放在AngularJS库文件下面） -->
<script type="text/javascript" src="../js/angular-route.js" ></script>
<script>
/* 3.在AngularJS应用模块中注入路由 ngRoute (单引号''或双引号""都可以) */
var  app = angular.module("myApp",['ngRoute']);

/* 4.在config()函数中配置路由规则: */
app.config(["$routeProvider",function($routeProvider){
$routeProvider
/* 4.1 template:需要在 ng-view 中插入的简单 HTML 内容； */
.when("/",{template:"欢迎进入 主页面"})
.when("/first",{
templateUrl:"first.html",
controller:"firstCtrl"
})
.when("/second",{
/* 4.2 templateUrl：需要在 ng-view 中插入的 HTML 模板文件  */
templateUrl:"second.html",
/* 4.3 controller: function、string或数组类型.在当前模板上执行的controller函数，生成新的scope对象。
每个页面都会有一个独立的控制器，加载页面的同时会执行控制器中的函数。 */
controller:"secondCtrl"
})

/* 4.4 redirectTo:重定向的地址。 */
.otherwise({redirectTo:"/"});
}]);

app.controller("myCtrl",function($scope){
});

//为first.html页面创建一个控制器
app.controller("firstCtrl",function($scope){
$scope.firstName = "孩子";
});
//为second.html页面创建一个控制器
app.controller("secondCtrl",function($scope){
$scope.secondName = "小伙子";
$scope.result = "OUT";
});
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<center>
<!-- 5.通过 #+ 标记访问路由 -->
<p style="line-height: 88px;">
<a href="#/">主界面</a>
<a href="#/first">第一页</a>
<a href="#/second">第二页</a>
</p>

<!-- 显示内部页面 -->
<script type="text/ng-template" id="first.html">
<h3>{{firstName}}  这是第一页面，恭喜你，闯关成功</h3>
</script>

<script type="text/ng-template" id="second.html">
<h3>{{secondName}}  这是第二页面，抱歉，你被{{result}}了</h3>
</script>

<!-- 6.通过 ng-view指令 设置路由显示页面 ng-view指令不赋值也可用-->
<div ng-view style="background-color:aquamarine;width: 558px; height: 288px; border: solid 1px blueviolet;line-height: 258px;">

</div>
</center>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航