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入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
JS获取当前日期和时间的简单实例
Nov 19 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
基于Layer+jQuery的自定义弹框
May 26 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
微信小程序自定义底部弹出框功能
Nov 18 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以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
PHP 无限级分类
2017/05/04 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
javascript function、指针及内置对象
2009/02/19 Javascript
ext 同步和异步示例代码
2009/09/18 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
js实现微博发布小功能
2017/01/12 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
了解JavaScript中的选择器
2019/05/24 Javascript
python列表去重的二种方法
2014/02/14 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
Python中常用的内置方法
2019/01/28 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
python实现证件照换底功能
2019/08/20 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
Django重设Admin密码过程解析
2020/02/10 Python
Python是怎样处理json模块的
2020/07/16 Python
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
致跳远运动员加油稿
2014/02/11 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
公司感谢信范文
2015/01/22 职场文书
永远是春天观后感
2015/06/12 职场文书
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js