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 相关文章推荐
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
JS实现炫酷雪花飘落效果
Aug 19 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函数解决SQL injection
2006/10/09 PHP
一个PHP日历程序
2006/12/06 PHP
php读取3389的脚本
2014/05/06 PHP
php中file_exists函数使用详解
2015/05/08 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
JS面向对象编程详解
2016/03/06 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
新加坡交友网站:be2新加坡
2019/04/10 全球购物
幼儿教师培训感言
2014/03/08 职场文书
市场拓展计划书
2014/05/03 职场文书
建设投标担保书
2014/05/13 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
PyMongo 查询数据的实现
2021/06/28 Python
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS