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 ...
随机推荐
- NOIp 2013 #1 积木大赛 Label：有趣的模拟
题目描述 春春幼儿园举办了一年一度的“积木大赛”.今年比赛的内容是搭建一座宽度为n的大厦,大厦可以看成由n块宽度为1的积木组成,第i块积木的最终高度需要是hi. 在搭建开始之前,没有任何积木(可以看成 ...
- css3立体旋转动画
demo地址 效果图 在别人网站上看到一个立体旋转的例子,然后突然想到自己前几天学习的css3旋转,就试着做了一个例子,看起来有一些粗糙. html结构很简单: <div> <ul ...
- 【BZOJ2456】mode 神奇的卡内存题
以后把题解放在前面,估计没人看题解先看题... 内存1M,4个int(其实对内存的概念十分模糊),众数即为出现次数最多的数,可以用抵消的思想(但是众数不是可以是一大坨么...) #include &l ...
- 不错的判断 UITextView 内容不超过20个字符串的方法
- (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSSt ...
- 部署node程序并维持正常运行时间
12.2部署的基础知识 假定你创建了一个想要展示的Web程序,或者创建了一个商业应用,在把它放到生产环境中之前需要测试一下.你很可能会从一个简单的部署开始,然后再做些工作让它的正常运行时间和性能达到最 ...
- mysql 的2个关于事务和安全性的参数
innodb_flush_log_at_trx_commit:(mysql写事物日志的方式) 0 log buffer 会每秒写入到日志文件中,并刷新到磁盘 (提交方式与事物无关,性能最好) 1 事 ...
- jQuery cdn使用介绍
如果您不希望下载并存放jQuery,那么也可以通过 CDN(内容分发网络)引用它,下面是具体实现,有类似需求的各位可以参考下哈,希望对你有所帮助 如果您不希望下载并存放 jQuery,那么也可以通 ...
- NeuSoft(2)添加系统调用
1.下载内核 apt-get install linux-source 在/usr/src下 2.解压内核 cd /usr/src tar -jxvf linux-source-3.2.0.tar.b ...
- java类加载机制
使用某个类是发生的事情 加载->链接(验证.准备.解析)->初始化->可以使用 加载:将class文件字节码内容加载到内存当中,并将这些静态数据转换成方法区中的运行时数据结构 在堆中 ...
- 过河问题nyoj47
时间限制:1000 ms | 内存限制:65535 KB 难度:5 描述 在漆黑的夜里,N位旅行者来到了一座狭窄而且没有护栏的桥边.如果不借助手电筒的话,大家是无论如何也不敢过桥去的.不幸的是 ...