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操作excel生成报表示例
May 08 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
js+css实现上下翻页相册代码分享
Aug 18 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
详解JavaScript中的属性和特性
Dec 08 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 Javascript
js Proxy的原理详解
May 25 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 编写的日历
2006/10/09 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
php表单提交实例讲解
2015/11/12 PHP
Symfony生成二维码的方法
2016/02/04 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
python编码总结(编码类型、格式、转码)
2016/07/01 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
学生信息管理系统python版
2018/10/17 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
程序员经常用到的UNIX命令
2015/04/13 面试题
应届生自我鉴定
2013/12/11 职场文书
委托书范文
2014/04/02 职场文书
投标承诺函范文
2015/01/21 职场文书
迟到检讨书
2015/01/26 职场文书
幼儿园六一主持词
2015/06/30 职场文书
团结友爱主题班会
2015/08/13 职场文书
Redis高可用集群redis-cluster详解
2022/03/20 Redis