最近想把以前一个用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的根目录不同。
1.使用angular的话是可以配置你的路由显示模式的,使用$locationProvider
服务来进行配,默认的情况下使用的是标签模式,也就是我们常见的那种带有#
的模式,不过也可以启用html5Mode
模式来去除路由中的#
;可以像下面这样使用:
$locationProvider.html5Mode(true); // 开启html5Mode模式
这样你的路由就是html5Mode
模式了。
2.如果是本地测试的话,那么一般情况下建议使用browserSync结合gulp或者webpack开启本地服务,进行测试。
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,就不会出现你所说的情况了呀
http://readystate4.com/2012/05/17/nginx-and-apache-rewrite-to-support-html5-pushstate/
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>