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 相关文章推荐
js实现在字符串中提取数字
Nov 05 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
React.js入门学习第一篇
Mar 30 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
Element InputNumber 计数器的实现示例
Aug 03 Javascript
浅析VUE防抖与节流
Nov 24 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
php 设计模式之 工厂模式
2008/12/19 PHP
php 无限级缓存的类的扩展
2009/03/16 PHP
让PHP支持断点续传的源码
2010/05/16 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
laravel自定义分页效果
2017/07/23 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
html下载本地
2006/06/19 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
Numpy之random函数使用学习
2019/01/29 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
生产班组长岗位职责
2014/01/05 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
工会主席事迹材料
2014/06/03 职场文书
python图片灰度化处理的几种方法
2021/06/23 Python