AngularJs中route的使用方法和配置


Posted in Javascript onFebruary 04, 2016

angular是Google开发的一个单页面应用框架,是现在比较主流的单页面应用框架之一.该强大的地方有很多,比如双向数据绑定,应用了后端的MVC模式到前端,自定义指令等.

既然是单页面应用,肯定离不开页面的切换.我们首先来说一下angular的路由.

angular实现页面切换时用了route.

<script src="js/plugins/angular/angular.min.js"></script>
<script src="js/plugins/ui-router/angular-ui-router.min.js"></script>

angular.min.js要在angular-ui-router.min.js之前加载.然后我们就要在app中注册了.

(function () {
angular.module('demo', [
'ui.router', 
])
})();

注册完之后就需要配置route了

function config($stateProvider, $urlRouterProvider,$httpProvider) {
$urlRouterProvider.otherwise("/home/get");
$stateProvider
.state('login', {
url: "/login",
templateUrl: "../views/login.html",
})
.state('home', {
abstract: true,
url: "/home",
templateUrl: "views/common/content.html",
})
.state('home.get', {
url: "/get",
templateUrl: "views/get.html",
data: { pageTitle: 'Example view' }
})
.state('home.post', {
url: "/post",
templateUrl: "views/post.html",
data: { pageTitle: 'Example view' }
});
}
app = angular.module('demo');
app.config(config);

配置到这里就配置完了.配置中的每一个state就一个view,表示一个页面,页面跳转用state,对应的html文件在templateUrl对应的文件中.

以上所述是小编给大家分享的AngularJs中route的使用方法和配置的相关知识,希望对大家有所帮助。

Javascript 相关文章推荐
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
常用的javascript设计模式
Jan 11 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
通过layer实现可输入的模态框的例子
Sep 27 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 #Javascript
分享我对JS插件开发的一些感想和心得
Feb 04 #Javascript
关于JavaScript作用域你想知道的一切
Feb 04 #Javascript
Node.js重新刷新session过期时间的方法
Feb 04 #Javascript
jquery操作select元素和option的实例代码
Feb 03 #Javascript
Javascript获取统一管理的提示语(message)
Feb 03 #Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 #Javascript
You might like
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
php中define用法实例
2015/07/30 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
jQuery中$(function() {});问题详解
2015/08/10 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python ljust rjust center输出
2008/09/06 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
Python模块的加载讲解
2019/01/15 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
linux面试题参考答案(9)
2016/01/29 面试题
小学生个人先进事迹材料
2014/05/08 职场文书
民事起诉状范文
2015/05/19 职场文书
贷款担保书范本
2015/09/22 职场文书
Python数据分析入门之数据读取与存储
2021/05/13 Python
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python