AngularJS体验式编程系列文章 ，将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，angularjs能脱颖而出，从架构设计上就高人一等，双向数据绑定，依赖注入，指令，MVC，模板。Angular.js创新地把后台技术融入前端开发，扫去jQuery一度的光芒。用angularjs就像写后台代码，更规范，更结构化，更可控。
关于作者
- 张丹(Conan), 程序员Java,R,PHP,Javascript
- weibo：@Conan_Z
- blog: http://blog.fens.me
- email: bsspirit@gmail.com
转载请注明出处：
http://blog.fens.me/angularjs-url/
前言
天天都在用AngularJS，各类文档也都看过好几遍，但总是些编程上的事找不到优雅的解决办法。今天终于把AngularJS的项目访问路径URL里的#号去掉了，这个问题不见得有多难，关键是花多长时间去理解AngularJS框架本身。
目录
- URL的#号问题
- 找到错误原因
- 静态网站的解决方案
- 动态网站的解决方案
1. URL的#号问题
使用AngularJS的朋友都应该了解，AngularJS框架定义了自己的前端路由控制器，通过不同URL实现单面(ng-app)对视图(ng-view)的部署刷新，并支持HTML5的历史记录功能，详细介绍可以参考文章：AngularJS路由和模板。
对于默认的情况，是不启动HTML5模式的，URL中会包括一个#号，用来区别是AngularJS管理的路径还是WebServer管理的路径。
比如：下面的带#号的URL，是AngularJS管理的路径。
- http://onbook.me/
- http://onbook.me/#/
- http://onbook.me/#/book
- http://onbook.me/#/about
这种体验其实是不太友好的，特别是像我这种喜欢简洁设计的人，#号的出现非我自愿的，怎么看怎么难受。AngularJS框架提供了一种HTML5模式的路由，可以直接去掉#号。
通过设置$locationProvider.html5Mode(true)就行了。
book.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
//..省略代码
$locationProvider.html5Mode(true);
}]);
支持HTML5的路由URL。
- http://onbook.me/
- http://onbook.me/book
- http://onbook.me/about
接下来的问题就来了，当用这种方式设置了路径以后。如果用户从首页(http://onbook.me/)开始访问，然后跳转到 图书页(http://onbook.me/book)一切正常。但如果用户直接打开 图书页(http://onbook.me/book) ，就会出现404错误。
就是这个问题纠结了我好长时间，让我不得不用带#号的URL。
2. 找到错误原因
那么，这个问题的原因出在哪里了呢？ 在路径解析上出错了。
让我从头说起，AngularJS是单页应用，一个ng-app对应一个页面，一个URL。AngularJS实现了自己的前端路由，让一个ng-app可以管理多个URL，再对应到多个ng-vew上面。当我们去访问URL(http://onbook.me/book) 的时候，怎么确定这个路径是 WebServer 后台管理的URL还是AngularJS前台管理的URL呢？
分2种情况看：
- 1. 用户如果是先访问 首页(http://onbook.me)，然后再跳转到 页面(http://onbook.me/book)，则这个跳转是由AngularJS前台管理的URL，访问是正常的。
- 2. 用户直接访问 页面(http://onbook.me/book)时，请求是先被提交到了WebServer后台，后台路由没有对应页面(http://onbook.me/book)的路由管理，就会出现404的错误。
如果能把这层想明白，技术上就非常容易解决了。我们让WebServer把属于AngularJS管理的路由URL，都发转到ng-app就可以解决404的问题了，同时，没有#号，还支持HTML5的历史记录查询！！
实现起来分为2种解决方案：
- 1. 静态网站：纯前台网站(JS+HTML+CSS)，通过Nginx提供Web服务。
- 2. 动态网站：前台(JS + HTML + CSS) + 后台Node.js提供Web服务。
3. 静态网站的解决方案
静态网站，我们需要修改的地方包括3个文件
- index.html : ng-app的定义文件
- app.js : 对应ng-app的控制文件
- nginx.conf : nginx的网站配置文件
编辑 index.html，增加base标签。
<html lang="zh-CN" ng-app="book">
<head>
<base href="/">
// 省略代码
</head>
编辑app.js，增加 $locationProvider.html5Mode(true);
book.config(['$routeProvider', '$locationProvider', '$sceProvider', 'tplProvider', function ($routeProvider, $locationProvider, $sceProvider, tplProvider) {
$routeProvider
.when('/', {templateUrl: tplProvider.html('welcome'), controller: 'WelcomeCtrl'})
.when('/book', {templateUrl: tplProvider.html('book'), controller: 'BookCtrl'}) //图书
.when('/book-r1', {templateUrl: tplProvider.html('book-r1'), controller: 'BookR1Ctrl'}) //R的极客理想
.when('/video', {templateUrl: tplProvider.html('video'), controller: 'VideoCtrl'}) //视频
.when('/about', {templateUrl: tplProvider.html('about'), controller: 'AboutCtrl'}) //关于作者
.otherwise({redirectTo: '/'});
$locationProvider.html5Mode(true);
}]);
编辑nginx的配置文件，增加try_files配置。
server {
set $htdocs /www/deploy/mysite/onbook;
listen 80;
server_name onbook.me;
location / {
root $htdocs;
try_files $uri $uri/ /index.html =404;
}
}
这样，静态网站就搞定了，没有麻烦的#号了，可以直接访问和任意页面的刷新。
4. 动态网站的解决方案
动态网站，我们同样需要修改的地方包括3个文件。
- index.html : ng-app的定义文件
- app.js : 对应ng-app的控制文件
- server.js : Express框架的路由访问控制文件
index.html 和 app.js两个文件修改，同静态网站的解决方案。动态网站，一般不是通过Nginx直接路由，而是通过Web服务器管理路由。假设我们使用的是Node.js的Express的Web框架。
打开Express框架的路由访问控制文件server.js，增加路由配置。
app.use(function (req, res) {
console.log(req.path);
if(req.path.indexOf('/api')>=0){
res.send("server text");
}else{ //angular启动页
res.sendfile('app/index.html');
}
});
设置当 站内路径(req.path) 不包括 /api 时，都转发到 AngularJS的ng-app(index.html)。所以，我们再直接访问地址 (http://onbook.me/book)时，/book 不包括 /api，就会被直接转发到AngularJS进行路由管理。我们就实现了路由的优化！
我已用了AngularJS有8-9个月了，主要功能都用到了，但还不见其全貌。经常会遇到各种问题，不过比起jQuery的各种无解的问题，还是值得的。优秀的框架值得我们的研究和使用，在摸索中前进！
相关推荐
AngularJS路由技术在单页应用（SPA）开发中十分常见，其核心思想是通过改变浏览器地址栏中的URL，而不重新加载页面，来更新视图内容。AngularJS默认使用URL的哈希部分（即URL中的#符号后的内容）来追踪路由，这种...
**AngularJS去掉访问路径URL中的#号详解** 在AngularJS中，#号（哈希号）通常用于在URL中区分浏览器的路由与服务器的路由，这是因为AngularJS的默认路由机制基于传统的哈希bang（#）模式。然而，为了提供更友好的...
AngularJS 默认将会使用一个 # 号来对URL进行路由. 例如: http://example.com/ http://example.com/#/about http://example.com/#/contact 要获得干净的URL并将井号从URL中移除是很容易的. 完成两件事情就行了...
本指南将详细介绍如何在IIS服务器上配置，以便从AngularJS的URL中删除这个“#”符号。 首先，我们需要理解为什么AngularJS使用哈希符号。在HTML5 History API未被广泛支持的时代，AngularJS使用“#”来实现单页应用...
通过以上步骤，就可以将AngularJS应用的路由中的#符号去除了。这对于提高Web应用的用户体验和符合搜索引擎优化（SEO）的需要是非常有帮助的。 需要注意的是，html5Mode的使用对服务器配置有要求，错误的配置可能会...
在Angular 2+中，URL中的“#”号通常用于标识路由，这被称为哈希模式。然而，这种模式在某些情况下可能不受欢迎，比如在SEO优化、社交媒体分享或与服务器的交互中。本文将深入探讨为何要去除Angular应用中的“#”号...
`click_this` 方法的核心部分是利用 `$location.absUrl()` 获取当前页面的URL，然后通过 `split("angularJS_")[0]` 去除特定字符串 "angularJS_" 之后的部分，这通常是为了获取基础URL。假设我们的页面URL是 ...
这些数据通常以JSON格式返回，但可能需要根据应用需求进行定制，例如去除不必要的字段、重命名属性或者进行更复杂的处理。本篇文章将深入探讨如何在AngularJS中实现这种转换。 首先，我们看到一个简单的AngularJS...
为了实现这个过滤器，开发者可能使用了JavaScript的内置函数，如`encodeURIComponent()`，它将非字母数字字符转换为百分号编码，以确保它们在URL中是安全的。此外，可能还会进行一些额外的处理，比如去除不必要的...
在本文中，我们将深入探讨如何在AngularJS应用中实现按需查询的功能，特别是在课程信息管理界面的场景下。这个需求涉及到动态地展示或隐藏课程性质的选择，基于用户选择的课程类型。下面，我们将分析给定的代码片段...
1. **去除前缀**：如果指令名称以`x-`或`data-`开头，则首先去除这些前缀。 2. **转换首字母**：将每个连接符后的单词首字母转换为大写，并移除所有连接符。 例如，对于HTML中的`<x-my-directive>`，AngularJS会将...
- AngularJS中的`$watch`：AngularJS 提供了一个 `$watch` 服务，可以监控模型的变化，并在变化发生时执行回调函数。 - 监控URL fragment变化：通过监听 `window.hashchange` 事件，可以捕捉到URL哈希值的变化。 - ...
通常，Angular路由的URL模式会带有井号（#），如`#login`、`#index`、`#user`，这是因为早期Angular版本使用HashLocationStrategy，不过现代Angular应用可以选择使用PathLocationStrategy，去掉井号。 相比之下，...
上述代码首先通过`document.location.href`获取当前页面的URL，然后通过字符串操作去除URL的协议部分和主机名，最后截取到第一个斜杠前的字符串，即为Web应用的上下文路径。 这个方法适用于大多数情况，但需要注意...
为了使所有相对路径正常工作，我们需要去掉开头的斜杠，使其成为相对路径。因此，修改后的`<base>`标签应为`<base href="/"/>`。 接下来，我们需要调整`demo.js`和`demo.css`的引用路径。由于这两个文件位于`demo`...
接下来，为了满足阿里云等云存储服务的上传要求，我们需要对base64字符串进行处理，去除`data:`前缀和对应的MIME类型信息，转换为Blob对象。这里定义了两个辅助函数：`binaryblob`用于将base64字符串转化为Blob，`...
5. 用户界面：考虑到用户体验，系统可能采用了现代前端框架，如Bootstrap或AngularJS，来实现响应式布局和动态更新，确保在不同设备上都能良好运行。 6. 安全性：系统可能采用了身份验证和授权机制，防止未授权访问...