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查询用户信 ...
随机推荐
- rpm与dpkg yum与apt-get详解
由于自由软体的蓬勃发展,加上大型Unix-Like 主机的强大效能,让很多软体开发者将他们的软体使用Tarball 来释出. 后来Linux 发展起来后,由一些企业或社群将这些软体收集起来制作成为di ...
- NDN与TCP/IP
搬运自http://blog.csdn.net/programmer_at/article/details/49203241 当前TCP/IP协议存在哪些问题?如何改进? 当时没有回答好,然后提到了 ...
- Java面向对象编辑
1.面向对象的软件开发方法简介: 1).把软件系统看成是各种对象的集合,更接近人类自然思维方式. 2).软件需求的变动往往都是功能的 ...
- [置顶] Hash查找,散列查找
//Hash.h #ifndef HASH_H #define HASH_H #define HASH_ARR_SIZE 100 #define FILL -1 #include <stdlib ...
- android performClick使用
performClick 是使用代码主动去调用控件的点击事件(模拟人手去触摸控件) ----------------------------------------- boolean android. ...
- 开发中可能会用到的几个 jQuery 小提示和技巧 (转)
转自:http://www.cnblogs.com/lhb25/p/useful-jquery-tips-and-tricks.html 今天,我们将分享一些很有用的技巧和窍门给 jQuery 开发人 ...
- D3画图学习一
一.D3画图简介 D3 是最流行的可视化库之一,它被很多其他的表格插件所使用.它允许绑定任意数据到DOM,然后将数据驱动转换应用到Document中.你可以使用它用一个数组创建基本的HTML表格,或是 ...
- 关于centos6.5系统安装FTP服务和配置的方法
一般在配置服务器的时候,涉及到代码上传,通常都要用到FTP方式. 1.先查看系统是否安装vsftpd: rpm -qa | grep vsftpd 如果出现vsftpd-2.2.2-14......字 ...
- ASP.NET-FineUI开发实践-6(三)
自动补全也算是好东西吧,我也不清楚下拉列表可以过滤为啥还有自动补全,其实自动补全用到还是通过jq获取服务端的动态数据补全.我没做动态的例子,其实好写,就不写了. 1.用到了两个js包 <scri ...
- hdu 2187
#include <stdio.h> using namespace std; struct race { int p; int w; }; race r[1010]; int cmp(r ...