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 相关文章推荐
javascript 无提示关闭窗口脚本
Aug 17 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
js数组去重的方法汇总
Jul 29 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
javascript基础知识讲解
Jan 11 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
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
一个ftp类(ini.php)
2006/10/09 PHP
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
vue实现计算器功能
2020/02/22 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
js实现复制粘贴的两种方法
2020/12/04 Javascript
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
详解Python字典小结
2018/10/20 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
Django model class Meta原理解析
2020/11/14 Python
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
MySQL面试题
2014/01/12 面试题
大学生个人自我鉴定
2013/12/03 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
可可西里观后感
2015/06/08 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
《迟到》教学反思
2016/02/24 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS