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 ...
随机推荐
- android 第三方 Im
1.阿里百川 单聊.群聊.客服能力集成,仅需花费4小时,不收费,0成本接入,让App轻松拥有沟通能力,历经多次双十一考验,消息到达率100%,全年可用性高达99.99%,登录异常提醒,木马钓鱼网站监测 ...
- Codeforces Round #228 (Div. 2) B. Fox and Cross
#include <iostream> #include <string> #include <vector> #include <algorithm> ...
- IOS学习笔记25—HTTP操作之ASIHTTPRequest
IOS学习笔记25—HTTP操作之ASIHTTPRequest 分类: iOS2012-08-12 10:04 7734人阅读 评论(3) 收藏 举报 iosios5网络wrapper框架新浪微博 A ...
- PHP 7 测试用例(转)
性能改善:PHP 7高达两倍快的PHP 5.6 显著减少内存使用 抽象语法树 一致的64位支持 改进的异常层次结构 许多转化为异常致命错误 安全随机数发生器 删除旧的和不支持的SAPIs和扩展 空合并 ...
- 一键搞定JavaEE应用,JRE+Tomcat+Mysql-JaveEE绿色运行环境JTM0.9版
本文转载自[http://www.blogjava.net/huliqing/archive/2009/01/09/247375.html] 这是一个集成了jre,tomcat,mysql的绿色运行环 ...
- 淘宝前端工程师：国内WEB前端开发十日谈
一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...
- JAVA 线程同步异步简单实例
package test; public class testThread { public static void main(String[] args) { Example example = n ...
- Webform——中国省市三级联动以及IsPostBack
首先要明白Webform的运行顺序,当开始启动时候,首先执行的是Page_Load事件, 当点击任意按钮后,每次点击都要先执行一遍Page_Load(在这里Page_Load里面的事件是给数据控件加载 ...
- CentOS下IP的配置
1.打开命令窗口,切换成root账户:su - root 2.进入目录:/etc/sysconfig/network-scripts,打开文件vi ifcfg-eth0 3.修改参数: ## 名称DE ...
- Web前端开发基础 第四课（CSS一些性质）
继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签 ...