Tim*_*ter 254 url angularjs ngroute
是否可以从angular.js网址中删除#符号？
当我更改视图并使用params更新URL时,我仍然希望能够使用浏览器的后退按钮等,但我不想要#符号.
教程routeProvider声明如下:
angular.module('phonecat', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
otherwise({redirectTo: '/phones'});
}]);
如果没有#,我可以编辑它以具有相同的功能吗？
Max*_*ach 250
是的,您应该配置$locationProvider并设置html5Mode为true:
angular.module('phonecat', []).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
otherwise({redirectTo: '/phones'});
$locationProvider.html5Mode(true);
}]);
小智 55
请务必检查html5历史记录API的浏览器支持:
if(window.history && window.history.pushState){
$locationProvider.html5Mode(true);
}
Eme*_*bah 45
要删除漂亮网址的哈希标记以及缩小后的代码,您需要构建代码,如下例所示:
jobApp.config(['$routeProvider','$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/job-list.html',
controller: 'JobListController'
}).
when('/menus', {
templateUrl: 'views/job-list.html',
controller: 'JobListController'
}).
when('/menus/:id', {
templateUrl: 'views/job-detail.html',
controller: 'JobDetailController'
});
//you can include a fallback by including .otherwise({
//redirectTo: '/jobs'
//});
//check browser support
if(window.history && window.history.pushState){
//$locationProvider.html5Mode(true); will cause an error $location in HTML5 mode requires a tag to be present! Unless you set baseUrl tag after head tag like so: <head> <base href="/">
// to know more about setting base URL visit: https://docs.angularjs.org/error/$location/nobase
// if you don't wish to set base URL then use this
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
}]);
Yag*_*urk 18
我写了在web.config中后的规则$locationProvider.html5Mode(true)中设置app.js.
希望,帮助别人.
<system.webServer>
<rewrite>
<rules>
<rule name="AngularJS" 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="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
在我的index.html中,我添加了这个 <head>
<base href="/">
不要忘记在服务器上安装iis的url rewriter.
此外,如果您使用Web Api和IIS,此匹配URL将无法解决,因为它将更改您的api调用.所以添加第三个输入(条件的第三行)并给出一个将排除来自的调用的模式www.yourdomain.com/api
Mak*_*ood 10
如果你使用AngularJS与MVC进行.NET堆栈,那么你需要做的就是从url中删除'#':
在_Layout页面中设置基本href: <head> <base href="/"> </head>
然后,在角度应用配置中添加以下内容: $locationProvider.html5Mode(true)
以上将从网址中删除"#",但页面刷新将无法工作,例如,如果您在"yoursite.com/about"页面,则refreash将为您提供404.这是因为MVC不了解角度路由和MVC模式将寻找MVC路由路径中不存在的'about'的MVC页面.解决方法是将所有MVC页面请求发送到单个MVC视图,您可以通过添加捕获所有MVC页面的路径来执行此操作
网址:
routes.MapRoute(
name: "App",
url: "{*url}",
defaults: new {
controller = "Home", action = "Index"
}
);
您可以调整html5mode,但这仅适用于页面的html锚点中包含的链接以及网址在浏览器地址栏中的显示方式.尝试从页面外的任何位置请求没有主题标签(带或不带html5mode)的子页面将导致404错误.例如,以下CURL请求将导致页面未找到错误,无论html5mode如何:
$ curl http://foo.bar/phones
虽然以下将返回root/home页面:
$ curl http://foo.bar/#/phones
这样做的原因是在请求到达服务器之前删除了hashtag之后的任何内容.所以请求作为请求http://foo.bar/#/portfolio到达服务器http://foo.bar.服务器将响应200 OK响应(可能),http://foo.bar代理/客户端将处理其余的响应.
因此,如果您想与其他人共享网址,则除了包含主题标签外别无选择.
遵循2个步骤 -
1.首先在app配置文件中设置$ locationProvider.html5Mode(true).
例如 -
angular.module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });
2.第二步在主页面中设置<base>.
例如 - >
<base href="/">
对于不支持HTML5 History API的浏览器,$ location服务将自动回退到hash-part方法.
| 归档时间： |
|
| 查看次数： |
192841 次 |
| 最近记录： |