AngularJS Best Practices: pretty urls
By default, AngularJS will route URLs with a hashtag.
For example:
http://example.com/http://example.com/#/usershttp://example.com/#/roles
It is very easy to get clean URLs and remove the hashtag from the URL.
There are 2 things that need to be done.
- Configuring $locationProvider
- Setting our base for relative links
app.users.routes.js
(function() {
'use strict';
angular
.module('app.users')
.config(['$routeProvider', ', $locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/users', {
templateUrl: '/app/components/users/views/user-list.tpl.html',
controller: 'UserController'
});
// Use the HTML5 History API
$locationProvider.html5Mode(true);
}]);
})();
What is the HTML5 History API? It is a standardized way to manipulate the browser history using a script. This lets Angular change the routing and URLs of our pages without refreshing the page. For more information on this, here is a good HTML5 History API Article. The $locationProvider will automatically fallback to the hashbang method for browsers that do not support the HTML5 History API.
To link around your application using relative links, you will need to set a <base> in the <head> of your document.
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<meta charset="utf-8" />
<base href="/">
</head>
<body>
<ul>
<li>
<a href="#/users">Users</a>
</li>
<li>
<a href="#/roles">Roles</a>
</li>
</ul> <ng-view></ng-view> <script type="text/javascript" src="/assets/libs/angular/angular.min.js"></script>
<script type="text/javascript" src="/assets/libs/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/app/app.js"></script>
<script type="text/javascript" src="/app/components/users/app.users.js"></script>
<script type="text/javascript" src="/app/components/users/app.users.routes.js"></script>
<script type="text/javascript" src="/app/components/users/controllers/user.controller.js"></script>
<script type="text/javascript" src="/app/components/roles/app.roles.js"></script>
<script type="text/javascript" src="/app/components/roles/app.roles.routes.js"></script>
<script type="text/javascript" src="/app/components/roles/controllers/role.controller.js"></script>
</body>
</html>
AngularJS Best Practices: pretty urls的更多相关文章
- AngularJS Best Practices: SEO
Google can execute AJAX & JavaScript for indexing, you can read the below link for more detailed ...
- AngularJS Best Practices: ui-router
ui-router is a 3rd-party module and is very powerful. It supports everything the normal ngRoute can ...
- AngularJS Best Practices: ng-include vs directive
For building an HTML template with reusable widgets like header, sidebar, footer, etc. Basically the ...
- AngularJS Best Practices: resource
A factory which creates a resource object that lets you interact with RESTful server-side data sourc ...
- AngularJS Best Practices: ASP.NET MVC Directory Structure
/Content----- images/ // Images for your app----- css/ // Styles for your app/Scripts----- libs/ // ...
- AngularJS Best Practices: ngRoute
app/----- components/---------- users/--------------- controllers/-------------------- users.control ...
- AngularJS Best Practices: Directory Structure
app/----- common/ // Acts as reusable components for your app---------- header/--------------- contr ...
- angularJS学习资源最全汇总
基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...
- 请小心使用 ng-repeat 中的 $index
自己自学的时候,遇到$index不知道它是如何使用的,所以上网搜了一下,发现了这个关于使用$index可能会出现的一个小BUG,和大家分享一下 PS:我是小白,欢迎指正,非常感谢! 以下是全文: &q ...
随机推荐
- git的几种回滚 git revert 和 git reset的区别
git的几种回滚 git revert 和 git reset的区别:强烈建议:对HEAD不熟的话最好不要用HEAD,直接用commitID吧,我遇到的问题:reset HEAD~1之后,可能是别人提 ...
- 2015 CTSC & APIO滚粗记
o诶人太弱..... 记一发滚粗记以便治疗我的健忘症= = //文章会不定时修改,添加一些内容什么的...因此最好看一下刷新一下(因为有可能你正在看= =我正在写... 5.2 早上9点坐上长达11小 ...
- 【BZOJ1001】【BeiJing2006】狼抓兔子 最大流
Description 现在小朋友们最喜欢的"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的,而且现在的兔子还比较笨,它们只有两个窝,现在你做为狼王,面对下面这样一个 ...
- linux 下如何打开core dump文件开关
dump文件可以在程序crash时,方便我们查看程序crash的地方和上下文信息.在window下,要能生成dump文件,需要自己编写相应的代码.不过现在网上可以找到相应的代码,只要把它下载后然后加到 ...
- 详解SpringMVC请求的时候是如何找到正确的Controller[附带源码分析]
目录 前言 源码分析 重要接口介绍 SpringMVC初始化的时候做了什么 HandlerExecutionChain的获取 实例 资源文件映射 总结 参考资料 前言 SpringMVC是目前主流的W ...
- qt播放器
播放器 http://blog.csdn.net/foruok/article/details/39005703 图片 http://blog.csdn.net/liyinhuicc/article/ ...
- 使用 Eclipse C/C++ Development Toolkit 开发应用程序
使用 Eclipse C/C++ Development Toolkit 开发应用程序 (转) 来自http://blog.csdn.net/favory/article/details/189080 ...
- [LintCode] Perfect Squares 完全平方数
Given a positive integer n, find the least number of perfect square numbers (for example, 1, 4, 9, 1 ...
- Maya 2015 中英文切换
我们在使用Maya软件的时候,有时候需要把语言在中英文之间切换,目前我感觉在不用插件的情况下,下面两种方法可以比较容易的做到: 方法一: 右键我的电脑属性,高级系统设置里面找到环境变量面板,然后新建一 ...
- 从客户端(Content="<p>SF</p>")中检测到有潜在危险的 Request.Form 值
出现这个问题,一般是由于.Net Framework 使用了4.0或以上版本造成的.(从 .Net Framework 4.0 开始,ASP.NET开始强制检测Request参数安全),而我们可以通过 ...