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 ...
随机推荐
- Java 生产者模式 消费者模式
// The standard idiom for calling the wait synchronized(sharedObject) { while(condition){ sharedObje ...
- insert into select 与select into from -- sql 批量插入
参考资料:http://www.w3school.com.cn/sql/sql_union.asp UNION:操作符用于合并两个或多个select语句的结果集. ...
- 选择Nodejs的N个理由
选择Nodejs的N个理由 作者 马德奎 发布于 2014年9月25日 Caleb Madrigal是 来自美国密尔沃基市的一名软件顾问.四年前,他在听说“将JavaScript用作服务器端语言”这样 ...
- java poi ppt操作示例
poi3.9版本,官网 http://poi.apache.org/slideshow/how-to-shapes.html import java.awt.Color; import java.io ...
- Git初使用
今天开始初次使用Git,Git作为一个使用广泛的分布式版本控制系统,我们有必要熟悉掌握. 这次主要是实现将本地上的“Hello World”的完整的项目文件提交到github上新建的代码库,主要过程如 ...
- MySQL Server-id踩到的坑
最近踩到一个说大不大,说小不小的坑,在此分享出来给各位同学.事情是这样的,线上有2台服务器,1主1从.A -> B,B服务器从A服务器同步数据.每天使用xtrabackup在B服务器上面进行全备 ...
- malloc_free_new_delete
malloc, free 是c的库函数,只会分配内存大小,不会调用构造函数,析构函数 new, delete C++关键字,操作符,不仅可以分配内存大小,还可以调用构造函数,析构函数 在执 ...
- 在 Django 模板中遍历复杂数据结构的关键是句点字符
在 Django 模板中遍历复杂数据结构的关键是句点字符 ( . ). 实例二 mysit/templates/myhtml2.html修改如下 <!DOCTYPE html> <h ...
- PHP如何通过SQL语句将数据写入MySQL数据库呢？
1,php和MySQL建立连接关系 2,打开 3,接受页面数据,PHP录入到指定的表中 1.2两步可直接使用一个数据库链接文件即可:conn.php <?phpmysql_connect(&qu ...
- PHP中文函数顺序排列一数组且其序数不变
函数Abs() 描述: mixed abs (mixed number); Returns the absolute value of number. If the argument number i ...