angularjsl路由_AngularJS实现路由实例
1、首先我们要引进angular.js和angular-route.js文件
2、然后我们要在html中创建锚点和容器(ng-view)
第一页
第二页
3、在模块中注入ngRoute依赖
angular.module('myApp',['ngRoute'])
4、配置路由
config(['$routeProvider',function ($routeProvider) {
$routeProvider.when('/first',{
template : '
first
'
})
.when('/second',{
template : '
second
'
})
.otherwise({
redirectTo : '/first'
})
}])
效果展示:
完整代码:
Document
第一页
第二页
angular.module('myApp',['ngRoute'])
.config(['$routeProvider',function ($routeProvider) {
$routeProvider.when('/first',{
template : '
first
'
})
.when('/second',{
template : '
second
'
})
.otherwise({
redirectTo : '/first'
})
}])
接下来我们做一个模拟项目路由
1、首先我们看一下我们所需要的文件
所有文件展示
2、之后我们看一下效果图
有两个页面,first page跟second page,点击两个按钮,切换不同页面,展示不同样式
3、好了。我们看一下代码吧!
index.html
Document
First Page
Second Page
代码解释:
首先我们要引进三个文件
1)angular.min.js----angularJS脚本
2)angular-css.js----用来转化css的脚本
3)angular-route.js----路由脚本
然后我们需要两个锚点
First Page
Second Page
最后我们需要一个路由导入的容器
之后我们将路由的配置、服务、控制器分别放在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所依赖的其他模块。
路由设置对象总览:
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
First Page
{{ p.name }} == {{ p.age }}
second.html
Second Page
{{ p.name }} == {{ p.age }}
first.css
.first{
background-color: yellow;
}
.first *{
color: red;
}
second.css
.second{
background-color: skyblue;
}
.second *{
color: green;
}
angularjsl路由_AngularJS实现路由实例相关推荐
- angularjsl路由_AngularJs ng-route路由详解
本篇基于ng-route来讲下angular中的路由,路由功能主要是 $routeProvider服务 与 ng-view 实现. ng-view的实现原理,是根据路由的切换,动态编译html模板-- ...
- angularjsl路由_AngularJS路由和模板
1. AngularJS路由介绍 AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(re ...
- Silverlight实用窍门系列:35.细解Silverlight冒泡路由事件和注册冒泡路由事件【附带实例源码】...
Silverlight中的事件分为普通事件和冒泡路由事件,它并没有包括WPF中的隧道路由事件,在本章中将详细讲解冒泡路由事件和如何注册一个冒泡路由事件. 一.细解冒泡路由事件 冒泡路由事件可以比喻为: ...
- vue-router详尽:编程式导航、路由重定向、动态路由匹配、路由别名、嵌套路由、命名视图
vue-router编程式导航 在vue项目中经常用到this.$router.push() 和 this.$router.replace() 方法进行路由跳转就是编程式导航... 通俗理解编程式导航 ...
- ASP.NET MVC路由扩展:路由映射
上周我写了三篇文章(一.二.三)详细地介绍了ASP.NET的路由系统.ASP.NET的路由系统旨在通过注册URL模板与物理文件之间的映射进而实现请求地址与文件路径之间的分离,但是对于ASP.NET M ...
- vue2路由手动创建二级路由路由传参路由守卫打包上线
路由手动配置: #在@vue/cli创建的项目中,路由用法如下. 1.安装路由npm install vue-router@32:定义路由所需的组件(.vue文件)要实现页面about 和home两个 ...
- vue 路由嵌套(二级路由)
路由嵌套就是在父路由配置好后,配置一个children属性,里面放置的的内容跟routes属性下面的内容大体一样,这就是二级路由的配制方法. 嵌套路由的关键字children,在父路由中添加child ...
- vue动态路由添加,vue-router的addRoute方法实现权限控制,添加根路由和子路由
addRoute 路由分为静态路由和动态路由 静态路由和动态路由的优缺点 动态路由实现思路: 动态路由遇到的问题与解决方式 动态添加子路由 路由分为静态路由和动态路由 静态路由和动态路由的优缺点 1. ...
- 【博客465】BGP(边界网关协议)-----BGP路由黑洞及路由反射器与联盟
BGP(边界网关协议)-----BGP路由黑洞及路由反射器与联盟 路由黑洞的场景 黑洞出现场景: 两台非直连路由器可以建立BGP邻居关系,传递BGP路由.如果中间路由器没有运行BGP协议,可能会出现路 ...
最新文章
- 同底数幂比较大小方法_初中数学解题技法19.幂的运算
- 使用Docker运行SQL Server
- 【BZOJ3218】a+b problem (最小割 + 主席树)
- caged系统pdf_建筑行业单词中英文对照教材.pdf
- java a星寻路算法_用简单直白的方式讲解A星寻路算法原理
- ELK 日志处理开发指南
- fragment的懒加载
- linux shell中获取mongodb最大连接数、内存使用情况等
- JS调用WebService
- 泰坦尼克号数据集下载
- 手机修改ntp服务器地址,修改手机ntp服务器ip地址
- 简述你对人工智能未来发展的看法?
- grads 相关系数_气象统计方法实习报告材料
- 谈谈在项目过程中的发生争论与争吵
- 浏览器 user agent
- 【Person Re-ID】AlignedReID: Surpassing Human-Level Performance in Person Re-Identification
- AtCoder Grand Contest 012 E - Camel and Oases 状压dp
- python工程监理_1.工程监理招标属于()
- 一般3d模型代做多少钱_3d打印一个模型多少钱
- opencv应用——以图拼图
热门文章
- Spark Streaming的窗口操作
- spero性能调优记录
- (cljs/run-at (JSVM. :all) 一次说白DataType、Record和Protocol)
- 【题解】【数组】【Prefix Sums】【Codility】Genomic Range Query
- 工控图表控件ProEssentials改变子集的颜色和线条风格
- apache和tomcat开启GZIP功能
- Android之SharedPreferences(二)——跨程序调用
- 深度优先搜索(DFS)算法
- C#发现之旅第二讲 C#-XSLT开发
- DataGrip以超级管理员身份登录Oracle