Part 27 Remove # from URL AngularJS
2016-05-15 03:06
615 查看
There are 4 simple steps to remove # from URLs in Angular.
Step 1 : Enable html5mode routing. To do this inject $locationProvider into config() function in script.js and call html5Mode() method passing true as the argument value. With this change the config function will now look as shown below.
Step 2 : In index.html, remove # symbols from all the links. The links in index.html should look as shown below.
Step 3 : Include the following URL rewrite rule in web.config. This rewrite rule, rewrites all urls to index.html, except if the request is for a file, or a directory or a Web API request.
Step 4 : Set the base href to the location of your single page application. In the head section of index.html include the following line.
Step 1 : Enable html5mode routing. To do this inject $locationProvider into config() function in script.js and call html5Mode() method passing true as the argument value. With this change the config function will now look as shown below.
.config(function ($routeProvider, $locationProvider) { $routeProvider .when("/home", { templateUrl: "Templates/home.html", controller: "homeController" }) .when("/courses", { templateUrl: "Templates/courses.html", controller: "coursesController" }) .when("/students", { templateUrl: "Templates/students.html", controller: "studentsController" }) $locationProvider.html5Mode(true); })
Step 2 : In index.html, remove # symbols from all the links. The links in index.html should look as shown below.
<a href="home">Home</a> <a href="courses">Courses</a> <a href="students">Students</a>
Step 3 : Include the following URL rewrite rule in web.config. This rewrite rule, rewrites all urls to index.html, except if the request is for a file, or a directory or a Web API request.
<system.webServer> <rewrite> <rules> <rule name="RewriteRules" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> </conditions> <action type="Rewrite" url="/index.html" /> </rule> </rules> </rewrite> </system.webServer>
Step 4 : Set the base href to the location of your single page application. In the head section of index.html include the following line.
<base href="/" />
相关文章推荐
- [AngularJS面面观] 2. scope中的Dirty Checking(脏数据检查) --- Digest Cycle
- AngularJS中,联合使用ng-repeat和ng-if,可以实现对数据删选显示效果,特别适合于用作表单数据的显示
- angularjs-表单验证
- angular中重要指令介绍($eval,$parse和$compile)
- 深究AngularJS——过滤器(filter)
- angularJS指令参数详解
- angularJs中ngModel的坑
- 深究AngularJS——自定义服务详解(factory、service、provider)
- Angularjs中UI Router的使用方法
- AngularJS控制器controller如何通信?
- 深究AngularJS——排序
- Part 23 to 26 Routing in Angular
- AngularJS在IE8的不支持的解决方法
- AngularJS 指令编译原理
- AngularJS与单选框及多选框的双向动态绑定
- 深究AngularJS——$sce的使用
- Yeoman构建AngularJs应用初步
- 深究AngularJS——校验(非form表单)
- angularjs 解决之前的遗留的一个问题
- 深究AngularJS——ng-checked(回写:带真实案例代码)