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 ...
随机推荐
- 没人告诉你关于z-index的一些事
关于z-index的问题是很多程序员都不知道它是如何起作用的.说起来不难,但是大部分人并没有花时间去看规范,这往往会照成严重的后果. 你不信?那就一起来看看下面的问题. 问题 在下面的HTML我们写了 ...
- php 处理递归提成的方案
好久没有写blog了,最近CRM项目中用到了递归提成的方案 CREATE TABLE `crm_proxy_bonux_rule` ( `id` ) NOT NULL AUTO_INCREMENT C ...
- jquery过滤器之:contains()、.filter()
:contains 选择器选取包含指定字符串的元素. 该字符串可以是直接包含在元素中的文本,或者被包含于子元素中. 经常与其他元素/选择器一起使用,来选择指定的组中包含指定文本的元素,如: $(&qu ...
- preventDefault（）方法
该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作). 例如,如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调 ...
- [CareerCup] 17.6 Sort Array 排列数组
17.6 Given an array of integers, write a method to find indices m and n such that if you sorted elem ...
- scala - Map基础
Map 构造Map 不可变: val map = Map("sa" -> 1, "s" -> 2)map("sa") = 3 / ...
- 数位DP HDU3555
Bomb Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)Total Submi ...
- ArcGIS AddIN异常之：object reference not set to an instance of an object
异常出现在 frmDownload frd = new frmDownload(); frd.ShowDialog(); 在ArcMap中能正常弹出窗体,点击按钮时显示此异常:object refer ...
- CSS DIV 独占一行，清除左右两边的浮动
clear:both //表示清除左右两边浮动的层,自己独占一行
- zju(8)串口通信实验
1.实验目的 1.学习和掌握linux下串口的操作方法以及应用程序的编写: 二.实验内容 1．编写EduKit-IV实验箱Linux操作系统下串口的应用程序,运行时只需要将串口线的一端连接到开发板的c ...