最近想把以前一个用Asp.Net MVC做的项目前端改成用Angularjs,在路由那里,因为Angularjs的路由嵌套很复杂,就用了angular-ui-router,
不过不管是用Angularjs的router还是用angular-ui-router,在地址栏显示的是“http://localhost:8390/home.html#/index”,看起来非常难看,而看了其他网上用Angularjs做的网站,
如“http://angularjs.cn/latest”、“https://www.ele.me/shop/902882/rate”,
这些都看不到“.html”、“#”这种,
或者如“https://angular-ui.github.io/ui-router/site/#/api/ui.router”这种就只有一个“#”分隔。
请教下各位大神怎么做成这种效果?而不是“xxx.html#/xxx”这种不好看的样式。谢谢!
最终解决方案详见Chobits大神的内容,已经完美解决。
这个就是打开姿势的问题了,我分别试了三种方式(ng-ui-router
)没做任何特殊配置:
1.直接打开文件,url是这样的: file:///Users/showonne/Desktop/ngdemo/index.html#/login
,
2.在webstorm中点击chrome图标打开(其实是webstorm给你开了一个简单的files server),url是这样的:http://localhost:63342/ngdemo/index.html#/login
,
3.使用browser-sync
在项目的根目录下启动服务browser-sync start --server --files .
,url是这样的:http://localhost:3002/#/index
。
总结一下: 应该发现了,前两个url比最后一个多了一层ngdemo
,其实就是文件服务器host的根目录不同。
url中怎么显示 你在配置中是可以自己写的,比如下面一段配置。
楼主已经知道angular-ui-router
和 angular
的一些用法
/**
* 路由配置
*/
'use strict';
app.config(function ($stateProvider, $urlRouterProvider, $resourceProvider) {
$stateProvider
// 首页
.state('home', {
url: '/home',
templateUrl: '../pages/home.html'
})
// 应用列表
.state('home.application_list', {
url: '/apps',
templateUrl: '../pages/application-list.html',
controller: 'application_list'
})
// 渠道管理
.state('home.channel_management', {
url: '/channels',
templateUrl: '../pages/channel-management.html',
controller: 'channel_management'
})
// 应用渠道部署
.state('home.appChannel', {
url: '/apps/channels/:appId',
templateUrl: '../pages/application-channels.html',
controller: 'AppChannels'
})
// 默认路由
$urlRouterProvider.otherwise('/apps');
$resourceProvider.defaults.stripTrailingSlashes = false;
});
可以看到上面的每条路由几乎都是一个状态
对应着
一个url
一个模板
一个控制器
当某个状态
触发的时候,地址栏中显示的就是你在这份配置中该状态对应的url
,并且当前页面渲染的是该状态
对应的模板
,模版中的数据,逻辑等来自该条路由的控制器
。
所以楼主,url怎么显示,是你自己定的,你不要在url中设置 *.html,就不会出现你所说的情况了呀
1.使用angular的话是可以配置你的路由显示模式的,使用browserSync结合gulp或者webpack开启本地服务,进行测试。
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
http://readystate4.com/2012/05/17/nginx-and-apache-rewrite-to-support-html5-pushstate/
http://stackoverflow.com/questions/25730797/asp-net-mvc-hosting-angular-app-with-html5mode-and-routing
http://www.codeproject.com/Articles/806500/Getting-started-with-AngularJS-and-ASP-NET-MVC-P
header里设置
<base href="/app/" />
新建app文件夹 把index.html放入
Try changing your RouteConfig.cs, like this:
routes.MapRoute(
name: "Default",
url: "app/{*.}",
defaults: new { controller = "Ng", action = "Index" }
);
Azure IIS Rewrites:
<system.webServer>
<rewrite>
<rules>
<rule name="Main Rule" stopProcessing="true">
<match url="^app/.*$" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/app/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>