ngRoute 路由
做单页面应用多是通过不同的url来识别出不同的页面展现的。
angularjs 为我们提供一个封装好的ngRoute工具
简单介绍用法 :
- <div ng-view></div>
界面上放入一个 ng-view指令,待会儿界面会刷新这个区域,它也支持动画,可以通过添加css在切换视图时做一些动画。
我们一段一段来看
- var app = angular.module("Main", ['ngRoute']);
- app.config(function ($locationProvider) {
- $locationProvider.html5Mode(true); //最少要 ie10 才可以使用 html5mode 哦
- //$locationProvider.html5Mode(false).hashPrefix("!");
- });
记得要依赖 ngRoute 模块
我们通过 config 来设置 $location to html5Mode , default 是 hashbang
- app.config(function ($routeProvider) {
- $routeProvider.
- when("/", {
- template: '<div>product</div>',
- controller: function () {
- console.log("in product");
- }
- }).
- when("/:category", {
- templateUrl: function(routeParams){ //这里不是依赖注入哦
return '/' +
- routeParams
- },
- controller: function ($routeParams) {
- console.log("here");
- console.log($routeParams);
- }
- }).
- when("/:category/:code", {
- template: '<div>category and code</div>',
- controller: function ($routeParams) {
- console.log($routeParams);
- console.log("in product code size");
- }
- }).
- otherwise({
- redirectTo: '/'
- });
- });
通过 $routeProvider.when 和 otherwise 我们就可以设置我们的视图 template , controller 对应到哪个URL了
每当URL装换的时候,angular会帮我们匹配 (基本原理就是用了html history api)
这里URl的格式是正对文件folder路径的 ":" 符合代表它是个参数,我们只好通过 $routeParams可以一块捕获
我举个例子 :
我们访问这里 xx.com/folder1/index.aspx (文件正正的路径)
经过 redirectTo '/' 就变成了 xx.com 也就匹配了 when('/')设置
那我们访问 xx.com/category1?key=value
会对应到 "/:category" 的设置 , 它是通过folder的数量来做配对的 (params 将会是 category='category1' key=value)
那我们在访问 xx.com/man/mk100?key=value&key2=value2
会对应到 '/:category/:code'的设置 (params 是 category='man' code='mk100' key=value key2=value2)
angularjs 会依据模板和controller 绘画好视图后覆盖到ng-view中.
对应不支持htmlMode的朋友,可以使用hashbang mode , 其实差不了多少,只是难看一些罢了,还有后台比较难对 #! 做处理
这里举出这2个mode的区别
config 设置换成这样
- $locationProvider.html5Mode(false).hashPrefix('!');
我们访问这里 xx.com/folder1/index.aspx (文件正正的路径)
经过 redirectTo '/' 就变成了 xx.com/forlder1/index.aspx#!/ 也就匹配了 when('/')设置
(它没有像html5那样把整个路径改了,而只是添加了hash在后面)
那我们访问 xx.com/forlder1/index.aspx#!/category1?key=value 会对应到 "/:category" 的设置
通过hash 访问,href="#!/.." 不能覆盖URL,只能在#hash之后添加东西。
其它的和html5其实是一样的。
小总结 : html5 会覆盖原路径,hash只是添加#! , html5 访问路径就像普通URL , hash 就是普通URL 加 #!
#! 在后台会被翻译成 ?key=value 的格式,这是协议,方便SEO蜘蛛。
ngRoute 路由的更多相关文章
- AngularJs ng-route路由详解
本篇基于ng-route来讲下路由的使用...其实主要是 $routeProvider 搭配 ng-view 实现. ng-view的实现原理,基本就是根据路由的切换,动态编译html模板. 更多内容 ...
- angular.js之路由的选择
在一个单页面中,我们可以添加多个模块,使得网页只在需要的时候加载这个模块.模块的切换大致上可以代替网页的切换,于是,我们便可以通过模块的切换实现网页的切换,这个切换是按需加载的. 乍一看非常普通的东西 ...
- Angular路由(三)
AngularJs ng-route路由详解 其实主要是$routeProvider搭配ng-view实现. ng-view的实现原理,基本就是根据路由的切换,动态编译html模板. 前提 首先必须在 ...
- 从零开始搭建口袋妖怪管理系统(2)-借助ngRoute实现详情页面跳转
一.目标 上一次我们用Angular1.x完成了简单的口袋妖怪展示列表页面,现在我们想要了解口袋妖怪更多的信息,但是发现原有单行表格可能容纳不下口袋妖怪的所有信息,所以现在我们需要一个口袋妖怪详情界面 ...
- ngRoute (angular-route.js) 和 ui-router (angular-ui-router.js) 模块有什么不同呢?
ngRoute (angular-route.js) 和 ui-router (angular-ui-router.js) 模块有什么不同呢? 很多文章中都有说道:当时ngRoute在路由配置时用$r ...
- angularjs路由监听,uirouter感知路由变化,解决uirouter路由监听不生效的问题
壹 ❀ 引 angularjs除了惊为天人的双向数据绑定外,路由也是出彩的一笔,通过路由配置,我们能在不发起页面跳转的情况下,对当前页内容进行整体更新,angularjs提供了ngRoute模块用于 ...
- AngularJS实例实战
学习了这么多天的AngularJS,今天想从实战的角度和大家分享一个简单的Demo--用户查询系统,以巩固之前所学知识.功能需求需要满足两点 1.查询所有用户信息,并在前端展示 2.根据id查询用户信 ...
- AngularJS之中级Route【二】(七)
前言 上一篇我们介绍了AngularJS内置的路由ngRoute,我们知道AngularJS被广泛应用于单页应用SPA(Single Page Application)中,此时路由对于我们来讲非常重要 ...
- angularJS获取json数据(实战)
学习了这么多天的AngularJS,今天想从实战的角度和大家分享一个简单的Demo--用户查询系统,以巩固之前所学知识.功能需求需要满足两点 1.查询所有用户信息,并在前端展示 2.根据id查询用户信 ...
随机推荐
- Cantor表(中等)
2 3 1/2 2/1 题目分析 这是NoI的一道题目,不过题目比较有创意也比较适合新生,就是一道简单的找规律的题目,首先找到第N个数应该在第几个斜行,然后判断这一行是奇数还是偶数,偶数分母递减,分子 ...
- weblogic Connection has already been closed解决方法
今天正式环境下的有一个功能报错,看了下weblogic日志,报连接已经关闭. com.ibatis.common.jdbc.exception.NestedSQLException: --- The ...
- redis在Java web项目的简单应用(转载)
看到一篇关于redis和spring集成的文章,实际测试后,可以.转载以备用.谢谢 亲昵YY! html,body { font-size: 15px } body { font-family: He ...
- 一、进程与信号之exec函数system函数
exec函数: 子进程调用exec函数执行另一个程序,exec函数进程完全由新程序代替,替换原有程序正文,数据,堆,栈段 #include <unistd.h> extern char * ...
- jquery cycle pugin
插件地址: http://jquery.malsup.com/cycle/ <div id="propaganda"><div id="pgdImg&q ...
- JAVA WEB实现前端加密后台解密
最近在研究登陆密码的加密,下边上具体代码,只是给出核心代码,具体的代码视业务而定吧,给位有什么问题或者意见请留言. 加密方法用的是AES-128-CBC,BASE64用的是org.apache.com ...
- [转] 浅谈 C++ 中的 new/delete 和 new[]/delete[]
转:http://www.cnblogs.com/hazir/p/new_and_delete.html 在 C++ 中,你也许经常使用 new 和 delete 来动态申请和释放内存,但你可曾想过以 ...
- git常用命令<转>
(转自)https://www.akii.org/git-concise-operating-tutorial.html git工作原理: 分布式,每个克隆或更新远程仓库的用户都拥有⼀一份最新的完整的 ...
- 配置NFS服务器
一.配置NFS服务器 1.安装软件包 [root@wjb10000 ~]# yum -y install nfs-utils.x86_64 2.修改配置文件[root@wjb10000 ~]# vim ...
- python对象(腌制)
python的内置对象类型主要有数字,字符串,列表,元祖,字典,集合等等,在python中,一切皆为对象 #腌制在python中如果我们有一些对象需要持久性存储,并且不丢失我们这个对象的类型与数据,我 ...