未加星标

AngularJS实现路由实例

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

1、首先我们要引进angular.js和angular-route.js文件

复制代码 代码如下:

<script type="text/javascript" src=lib/angular.min.js></script><script type="text/javascript" src=lib/angular-route.js></script>


2、然后我们要在html中创建锚点和容器(ng-view)

<a href="#first" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 第一页 </a>
<a href="#second" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 第二页 </a>
<div ng-view></div>

3、在模块中注入ngRoute依赖

复制代码 代码如下:

angular.module('myApp',['ngRoute'])

4、配置路由

config(['$routeProvider',function ($routeProvider) {
$routeProvider.when('/first',{
template : '<h1> first </h1>'
})
.when('/second',{
template : '<h1> second </h1>'
})
.otherwise({
redirectTo : '/first'
})
}])

效果展示:

AngularJS实现路由实例

完整代码:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src=lib/angular.min.js></script>
<script type="text/javascript" src=lib/angular-route.js></script>
</head>
<body>
<a href="#first" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 第一页 </a>
<a href="#second" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 第二页 </a>
<div ng-view></div>
<script type="text/javascript">
angular.module('myApp',['ngRoute'])
.config(['$routeProvider',function ($routeProvider) {
$routeProvider.when('/first',{
template : '<h1> first </h1>'
})
.when('/second',{
template : '<h1> second </h1>'
})
.otherwise({
redirectTo : '/first'
})
}])
</script>
</body>
</html>

接下来我们做一个模拟项目路由

1、首先我们看一下我们所需要的文件

AngularJS实现路由实例

所有文件展示

2、之后我们看一下效果图

AngularJS实现路由实例

有两个页面,first page跟second page,点击两个按钮,切换不同页面,展示不同样式

3、好了。我们看一下代码吧!

index.html

<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="lib/angular.min.js" ></script>
<script type="text/javascript" src="lib/angular-css.js" ></script>
<script type="text/javascript" src="lib/angular-route.js" ></script>
</head>
<body>
<a href="#first" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >First Page</a>
<a href="#second" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Second Page</a>
<div ng-view></div>
<script type="text/javascript" src='app.js'></script>
<script type="text/javascript" src='js/services.js'></script>
<script type="text/javascript" src='js/controller.js'></script>
</body>
</html>

代码解释:

首先我们要引进三个文件

1)angular.min.js----angularJS脚本
2)angular-css.js----用来转化css的脚本
3)angular-route.js----路由脚本

然后我们需要两个锚点

<a href="#first" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >First Page</a>
<a href="#second" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Second Page</a>

最后我们需要一个路由导入的容器

复制代码 代码如下:

<div ng-view></div>

之后我们将路由的配置、服务、控制器分别放在app.js、services.js、controller.js文件中,便于代码的管理、维护。

4、接下来我们看一下路由的部分

angular.module('myApp',['ngRoute','angularCSS'])
.config(['$routeProvider',function ($routeProvider) {
$routeProvider
.when('/first',{
templateUrl : './view/first.html',
controller : 'FirstCtrl as firstCtrl'
})
.when('/second',{
templateUrl : './view/second.html',
controller : 'SecondCtrl as secondCtrl'
})
.otherwise({
redirectTo : '/first'
})
}])

代码解释:

1)首先,第一行,在myApp模块中注入ngRoute跟angularCSS依赖。

2)然后配置路由(config):

AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI,我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。

$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由,函数包含两个参数:

第一个参数是 URL 或者 URL 正则规则。第二个参数是路由配置对象。

3)controller

function、string或数组类型,在当前模板上执行的controller函数,生成新的scope。

4)controllerAs

string类型,为controller指定别名。

5)redirectTo

重定向的地址

6)resolve

指定当前controller所依赖的其他模块。

路由设置对象总览:

AngularJS实现路由实例

5、下面我们看一下服务部分,service.js

angular.module('myApp')
.factory('FirstService',[function () {
var list = [
{ name : 'Rose',age : 10 },
{ name : 'Tom',age : 19 }
];
return {
getList : function () {
return list;
}
}
}])

注意:angular.module('myApp')不需要注入依赖

6、下面看一下控制器集成,controller.js

angular.module('myApp')
.controller('FirstCtrl',['$css','FirstService',function ($css,$service) {
var self = this;
$css.add('css/first.css');
self.list = function () {
return $service.getList();
}
}])
.controller('SecondCtrl',['$css','FirstService',function ($css,$service) {
var self = this;
$css.add('css/second.css');
self.list = function () {
return $service.getList();
}
}])

代码分析:

1)在控制器中注入服务依赖以及#css依赖

复制代码 代码如下:

controller('FirstCtrl',['$css','FirstService',function ($css,$service)

2)添加css依赖路径

复制代码 代码如下:

$css.add('css/first.css');

注意:angular.module('myApp')不需要注入依赖

7、好了。逻辑的部分已经完成了,下面展示一下我们的样式以及结构部分吧

first.html

<div class='first'>
<h1> First Page </h1>
<div ng-repeat="p in firstCtrl.list()">
{{ p.name }} == {{ p.age }}
</div>
</div>

second.html

<div class='second'>
<h1> Second Page </h1>
<div ng-repeat="p in secondCtrl.list()">
{{ p.name }} == {{ p.age }}
</div>
</div>

first.css

.first{
background-color: yellow;
}
.first *{
color: red;
}

second.css

.second{
background-color: skyblue;
}
.second *{
color: green;
}

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: AngularJSCSSUT
分页:12
转载请注明
本文标题:AngularJS实现路由实例
本站链接:http://www.codesec.net/view/534083.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(20)