1.  路由启动          $locationProvider.html5Mode(true);  通过pushstatex修改url

app.js

define([
'angular',
"App/Ctrl/controllers",
"App/Directive/directive", "angularRoute"
], function (angular,controllers,directives,appDirec) {
var app=angular.module('myApp', ["ngRoute",controllers.name,directives.name])
templete="/front/propertyEntrust/view/templete"
/* /limitSell/add?propertyId=33 */ app.config(['$routeProvider',"$locationProvider", function ($routeProvider,$locationProvider) { $locationProvider.html5Mode(true); $routeProvider.when('/detail/:Id', { //详情页面
templateUrl: templete+'/detail.html'
}); $routeProvider.when('/rent/add/:propertyId', { //一般出租
templateUrl: templete+'/rent.html'
}); $routeProvider.otherwise({redirectTo: '/rent'});
}]); return app
});

2. 设置前端路由开始的字段 即服务器路由的最后的字段

 <base href="/fy/propertyEntrustApply/index/">

  

小注:angular在此处使用html5的base标签来做baseurl的配置,而不是提供API 配置baseurl 非常巧妙,充分利用了html5  base标签的特性。  debug  所有$0.href   发现都自动加上了了“/client.app/index”.

这样在模板 或者.routeprovider 配置路由的时候就不需要在另外拼装上baseurl了。节省了很多对url逻辑的处理。 但是 如果是script加载脚本 相对路径的话 可能会与base的配置冲突,我的项目使用requirejs一类的包加载器解决问题

3,后端配置重定向  nodejs为例

app.get('/fy/propertyEntrustApply/index/*', function (req, res) {
res.render("a", {});
});

如上所示     http://localhost:3000/fy/propertyEntrustApply/index/rent/add/21

/fy/propertyEntrustApply/index/  为服务器路由  指向a.ejs

之后/rent/add/21  就是前端路由了

源码小解:

对路由监听路由其实是监听rootscope,  loaction.path()的修改会自动更新rootscope,所以对location.path()的作用其实类似backbone的navigate(), 逻辑是手动走了路由随后更改url的值,而不是相反。

其次 angular对视图内的所有超链接做了事件代理

    $rootElement.on('click', function(event) {
// TODO(vojta): rewrite link when opening in new tab/window (in legacy browser)
// currently we open nice url link and redirect then if (event.ctrlKey || event.metaKey || event.which == 2) return; var elm = jqLite(event.target); // traverse the DOM up to find first A tag
while (lowercase(elm[0].nodeName) !== 'a') {
// ignore rewriting if no A tag (reached root element, or no parent - removed from document)
if (elm[0] === $rootElement[0] || !(elm = elm.parent())[0]) return;
} var absHref = elm.prop('href'); if (isObject(absHref) && absHref.toString() === '[object SVGAnimatedString]') {
// SVGAnimatedString.animVal should be identical to SVGAnimatedString.baseVal, unless during
// an animation.
absHref = urlResolve(absHref.animVal).href;
} var rewrittenUrl = $location.$$rewrite(absHref); if (absHref && !elm.attr('target') && rewrittenUrl && !event.isDefaultPrevented()) {
event.preventDefault();
if (rewrittenUrl != $browser.url()) {
// update location manually
$location.$$parse(rewrittenUrl);
$rootScope.$apply();
// hack to work around FF6 bug 684208 when scenario runner clicks on links
window.angular['ff-684208-preventDefault'] = true;
}
}
});

 可以看到, 点击超链接的默认行为被禁止,如果超链接是负责路由跳转的时候,获得路由的url, 手动执行$rootScope.$apply();

注意$().prop  与$().attr()的区别  主要在$().attr() 拿的是$0.href, $().prop拿的是$0.getAttribute("href") , 此处需要去除 base路径的拼装,只拿前端路由。所以使用$().prop

 $rootScope.$watch(function $locationWatch() {
var oldUrl = $browser.url();
var currentReplace = $location.$$replace; if (!changeCounter || oldUrl != $location.absUrl()) {
changeCounter++;
$rootScope.$evalAsync(function() {
if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).
defaultPrevented) {
$location.$$parse(oldUrl);
} else {
$browser.url($location.absUrl(), currentReplace);
afterLocationChange(oldUrl);
}
});
}
$location.$$replace = false; return changeCounter;
});

angular 会watch rootscope,当rootscope更新的时候 $browser.url()  H5模式启用的条件下  调用pushstate 修改浏览器 url的值,最后afterLocationChange(oldUrl),广播 $locationChangeSuccess 事件。

然后在 angular-rout.js  ngroute模块中会监听$locationChangeSuccess 事件,执行路由模块的逻辑。

$rootScope.$on('$locationChangeSuccess', updateRoute);

  

angular 路由去除#号的更多相关文章

  1. angular路由——ui.route

    angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. angular路由详解:

    1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...

  3. angular 路由的引用

    使用angular路由 遇到的坑. 使用cmd 安装好node.js 安装成功 输入node  -v 能查看版本说明安装成功 搭建angular项目输入命令 npm install  -g  angu ...

  4. angular 路由项目例子

    angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...

  5. Angular路由参数传递

    一.路由时传递参数的方式 1.在查询参数中传递数据 //页面 <a routerLink="/product" [queryParams]="{id:1}" ...

  6. angular路由(自带路由篇)

    一.angular路由是什么? 为了实现SPA多视图的切换的效果,其原理可简述为每个 URL 都有对应的视图和控制器.所以当我们给url后面拼上不同的参数就能通过路由实现不同视图的切换. 二.文件总览 ...

  7. Angular路由守卫 canActivate

    作用 canActivate 控制是否允许进入路由. canActivateChild 等同 canActivate,只不过针对是所有子路由. 关键代码 创建路由守卫 import { Injecta ...

  8. Angular路由守卫 canDeactivate

    目的 离开页面时,做出逻辑判断 以ng-alain的项目为基础做演示 效果如图: 关键代码 定义一个CanDeactivateGuardService export class CanDeactiva ...

  9. Angular 路由守卫

    1. 路由 Angular路由: 可以控制页面跳转:可以在多视图间切换: 2. 路由守卫 Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开.进入某路由::: return true ...

随机推荐

  1. unity 解析tmx

    using UnityEngine; using System.Collections; using System.IO; using System.Xml; public class xml : M ...

  2. BZOJ1946 : [Ceoi2006]ANTENNA

    首先通过随机增量法求出最小覆盖圆,作为答案的上界. 然后二分答案,检验的时候枚举每个点作为原点,求出其他每个点被包括在圆内的角度区间,然后扫描线即可. 时间复杂度$O(Tn^2\log n)$. #i ...

  3. 【转】SpringTest框架JUnit单元测试用例获取ApplicationContext实例的方法

    转自:http://www.coderli.com/junit-spring-test-applicationcontext JUnit单元测试用例中使用Spring框架,直接方式如下. @RunWi ...

  4. ACM 水池数目

    水池数目 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 南阳理工学院校园里有一些小河和一些湖泊,现在,我们把它们通一看成水池,假设有一张我们学校的某处的地图,这个地 ...

  5. 1301. The Trip

    A number of students are members of a club that travels annually to exotic locations. Their destinat ...

  6. 【BZOJ2473/2120】维护队列 分块+二分

    Description 你小时候玩过弹珠吗? 小朋友A有一些弹珠,A喜欢把它们排成队列,从左到右编号为1到N.为了整个队列鲜艳美观,小朋友想知道某一段连续弹珠中,不同颜色的弹珠有多少.当然,A有时候会 ...

  7. BZOJ4154: [Ipsc2015]Generating Synergy

    Description 给定一棵以1为根的有根树,初始所有节点颜色为1,每次将距离节点a不超过l的a的子节点染成c,或询问点a的颜色   Input 第一行一个数T,表示数据组数 接下来每组数据的第一 ...

  8. 为什么用evernote

    其实是没有什么为什么的. 如果真要找个理由,那应该是: 为知的界面看着总觉得很糙.      这个糙指的是不像个好软件,而装上evernote感觉就不一样. 有道笔记新版本貌似在我这儿有BUG.    ...

  9. Android studio 一个项目中添加两个module遇到的bug

    1.在一个Android studio中,我添加了一个模块,然后就是各种bug 找到到R 是在module 名上面 右键 Make Module '模块名' 经过各种google 的时候发现了 htt ...

  10. 纪念逝去的岁月——C++实现一个栈(使用类模板)

    这个版本是上个版本的加强版,上个版本的代码:http://www.cnblogs.com/fengbohello/p/4542912.html 目录 1.代码 2.运行结果 1.代码 1.1 调试信息 ...