AngularJS中的路由使用及实现代码
前 言
本章节将为大家介绍 AngularJS 路由。AngularJS 路由允许我们通过不同的 URL 访问不同的内容。通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。
1.1 Angular JS路由基础知识讲解
在AngularJS中使用路由：
1. 导入路由文件：angular-route.js
2. 在主模块中注入"ngRoute"。
angular.module("app",["ngRoute"])
3. 将超链接改写为路由格式。 --> "#/标记"
<a href="#/" rel="external nofollow" rel="external nofollow" >首页</a> //首页直接使用 #/ 表示 <a href="#/page1" rel="external nofollow" rel="external nofollow" >page1</a> //其他页面"#/标记" 表示
4. 在页面的合适位置，添加ng-view，用于承载路由打开的页面：
<div ng-view></div> //或者 <ng-view></ng-view>
该 div 内的 HTML 内容会根据路由的变化而变化。
5. 在config配置阶段，注入$routeProvider，进行路由配置：
.config(function($routeProvider){
$routeProvider
.when("/",{template:'<h1 style="color:red;">这是首页</h1>'})
.when("/page1",{templateUrl:"page.html",controller:"ctrl1"})
.when("/page2",{templateUrl:"page.html",controller:function($scope){
$scope.text = "这是ctrl不知道是几控制器！！"
}})
.when("/page3",{templateUrl:"page.html"})
.when("/page4",{})
.otherwise({redirectTo:"/"})
})
AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。
$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:
- 第一个参数是 URL 或者 URL 正则规则。
- 第二个参数是路由配置对象。
1.2.1路由设置对象
AngularJS 路由也可以通过不同的模板来实现。
$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。
路由配置对象语法规则如下：
$routeProvider.when(url,{
template:string, //在ng-view中插入简单的html内容
templateUrl:string, //在ng-view中插入html模版文件
controller:string,function / array, //在当前模版上执行的controller函数
controllerAs:string, //为controller指定别名
redirectTo:string,function, //重定向的地址
resolve:object<key,function> //指定当前controller所依赖的其他模块
});
1.2.2参数说明
① template： 自定义HTML模板，会直接将这段HTML记载到ng-view中；
.when("/page3",{templateUrl:"page.html"})
② templateUrl： 导入外部的HTML模板文件。 为了避免冲突，外部的HTML应该是一个代码片段，即只保留body以内的部分。
.when("/page1",{templateUrl:"page.html",controller:"ctrl1"})
③ controller： 在当前HTML模板上，执行的controller函数。会生出新的作用域$scope. 可以接受字符串(声明好的controller名字),也可以直接接受函数。
.when("/page1",{templateUrl:"page.html",controller:"ctrl1"})
注意： 使用ng-view打开的页面，controller中的作用域是属于当前页面作用域的子作用域！！ 依然符合Angular中父子作用域"能读不能写"的要求！
所以： 如果需要在ng-view中修改当前作用域的变量，必须把这个变量声明为对象的属性！！
④ redirectTo：重定向。一般用于.otherwise()中，用于重定向回首页！
.otherwise({redirectTo:"/"})
2.1 自定指令
AngularJS允许用户自定义指令！！
例如： <div ng-view></div> 或 <ng-view></ng-view>
1. 使用.directive()声明一个自定义指令；
2. 定义指令时，指令名必须使用驼峰命名法； 而调用指令时，用"-"链接
.directive("huangGe") --> <huang-ge><huang-ge>
.directive("huangge") --> <haungge><huangge>
3. 定义指令时，对象中使用的属性：
① template: 调用指令时，生成的模板
② restrict: 用于声明指令允许的调用方式：
E->允许标签名表明 A->允许属性调用 C->允许类名调用 M->允许注释调用
默认值为：EA
如果需要注释调用，必须再添加一个属性：replace:true,而且注释调用前必须添加"directive:" eg:<!-- directive: huang-ge-->
.directive("jiangHao",function(){
return {
restrict : "EACM",
replace:true,
template:"<h1>这是一个自定义指令</h1>",
}
})
3.1 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
overflow: hidden;
}
li{
width: 100px;
height: 40px;
text-align: center;
float: left;
line-height: 40px;
list-style: none;
cursor: pointer;
}
li a{
text-decoration: none;
color: black;
}
li:hover{
background-color: yellow;
}
#div1{
width: 1000px;
height: 500px;
margin: 20px auto;
border: 2px solid red;
}
</style>
</head>
<body ng-app="app" ng-controller="ctrl">
<ul>
<li><a href="#/" rel="external nofollow" rel="external nofollow" >首页</a></li>
<li><a href="#/page1" rel="external nofollow" rel="external nofollow" >page1</a></li>
<li><a href="#/page2" rel="external nofollow" >page2</a></li>
<li><a href="#/page3" rel="external nofollow" >page3</a></li>
<li><a href="#/page4" rel="external nofollow" >page4</a></li>
</ul>
<div id="div1" ng-view></div>
<jiang-hao></jiang-hao>
<div jiang-hao></div>
<div class="jiang-hao"></div>
</body>
<script src="js/angular.js" type="text/javascript"></script>
<script src="js/angular-route.js" type="text/javascript"></script>
<script type="text/javascript">
angular.module("app",["ngRoute"])
.config(function($routeProvider){
$routeProvider
.when("/",{template:'<h1 style="color:red;">这是首页</h1>'})
.when("/page1",{templateUrl:"page.html",controller:"ctrl1"})
.when("/page2",{templateUrl:"page.html",controller:function($scope){
$scope.text = "这是ctrl不知道是几控制器！！"
}})
.when("/page3",{templateUrl:"page.html"})
.when("/page4",{})
.otherwise({redirectTo:"/"})
})
.controller("ctrl",function($scope){
$scope.test = "这是一段测试文字！";
$scope.obj = {
test:"这是一个测试对象！"
}
})
.controller("ctrl1",function($scope){
$scope.text = "这是ctrl1控制器！";
})
*/
.directive("jiangHao",function(){
return {
restrict : "EACM",
replace:true,
template:"<h1>这是一个自定义指令</h1>",
}
})
</script>
</html>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
使用AngularJS对路由进行安全性处理的方法
简介 自从出现以后,AngularJS已经被使用很长时间了. 它是一个用于开发单页应用(SPA)的javascript框架. 它有一些很好的特性,如双向绑定.指令等. 这篇文章主要介绍Angular路由安全性策略. 它是一个可用Angular开发实现的客户端安全性框架. 我已经对它进行了测试. 除了保证客户端路由安全性外,你也需要保证服务器端访问的安全性. 客户端安全性策略有助于减少对服务器进行额外的访问. 然而,如果一些人采用欺骗浏览器的手段访问服务器,那么服务器端安全性策略应当能够拒绝未授
-
angular.js 路由及页面传参示例
页面传参数方法:1.$rootScope.2.(url)/user/:name/:age. 页面转换方法:1.href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" .2.$state.Go.3.$location.path.4.ui-sref (1)自带路由ngRoute <html> <head&g
-
详解Angular4中路由Router类的跳转navigate
最近一直在学习angular4,它确实比以前有了很大的变化和改进,好多地方也不是那么容易就能理解,好在官方的文档和例子是中文,对英文不太好的还是有很大帮助去学习. 官方地址:https://angular.cn/docs/ts/latest/api/router/index/Router-class.html 在学习的过程中路由(router)机制是离不开的,并且好多地方都要用到. 首先路由配置Route: import { NgModule } from '@angular/core'; im
-
AngularJS 路由详解和简单实例
AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常我们的URL形式为 http://runoob.com/first/page,但在单页Web应用中 AngularJS 通过 # + 标记 实现,例如: http://runoob.com/#/first http://r
-
Angularjs制作简单的路由功能demo
从官网下载了最新版本的Angularjs 版本号:1.3.15 做一个简单的路由功能demo 首页:index.html <!DOCTYPE html > <html> <head> <meta charset="utf-8" /> <title>测试</title> <script src="./js/angular.min.js"></script> <scri
-
AngularJS 路由和模板实例及路由地址简化方法(必看)
最近一同事在学习AngularJS,在路由与模板的学习过程中遇到了一些问题,于是今天给她写了个例子,顺便分享出来给那些正在学习AngularJS的小伙伴们. 话说这AngularJs 开发项目非常的爽,其中爽就爽在它的开发模式,使得代码更加的清晰.更加具有可读性.更简洁.更具有维护性.但是在使用AngularJS开发的过程中也有让我头疼的地方,那就是目前前端框架更多的还是以Jquery为主,很多插件都是依赖于Jquery的,AngulaJS的插件少之又少(除了AngularUI其他的Angula
-
AngularJS监听路由的变化示例代码
话不多说,我们下面直接来看实现的示例代码 [一]Angular 路由状态发生改变时可以通过' $stateChangeStart '.' $stateChangeSuccess '.' $stateChangeError '监听,通过注入'$location'实现状态的管理 代码示例如下: function run($ionicPlatform, $location, Service, $rootScope, $stateParams) { //路由监听事件 $rootScope.$on('$s
-
AngularJS监听路由变化的方法
使用AngularJS时,当路由发生改变时,我们需要做某些处理,此时可以监听路由事件,常用的是$routeStartChange, $routeChangeSuccess.完整例子如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"
-
angular.js之路由的选择方法
在一个单页面中,我们可以添加多个模块,使得网页只在需要的时候加载这个模块.模块的切换大致上可以代替网页的切换,于是,我们便可以通过模块的切换实现网页的切换,这个切换是按需加载的. 乍一看非常普通的东西,但是仔细想想就可以发现,这种思想可以解决非常多的资源. 例如,假如有一个页面,需要显示1000种商品的信息,每个商品的表现形式各不相同(设他们有各自独立的css和js),那么一般来说,我们就需要准备1000张网页去加载这些信息.但是,使用这种模块化思想,我们就可以仅仅在后台设定1000个各不相同的
-
AngularJS路由实现页面跳转实例
AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是在同一个页面动态加载不同的内容,而这里的"跳转"可以理解为是局部页面的跳转. AngularJS是通过改变location地址来实现加载不同的页面内容到指定位置,下面是一个简单应用AngularJS路由来实现页面"跳转"的实例: 使用app.config来定义不同的lo