我的印象是Angular会重写在tempaltes中的锚标记的href属性中出现的URL,这样无论是在html5模式还是hashbang模式下它们都能正常工作.位置服务的文档似乎说HTML链接重写处理了hashbang情况.因此,我希望在不在HTML5模式下,插入哈希值,并且在HTML5模式下,它们不会.
但是,似乎没有重写.以下示例不允许我只更改模式.应用程序中的所有链接都需要手动重写(或者在运行时从变量派生.我是否需要根据模式手动重写所有URL？
我没有在Angular 1.0.6,1.1.4或1.1.3中看到任何客户端URL重写.似乎所有href值都需要以#/为hashbang模式和/为html5模式.
是否有必要进行重写？我误读了文档吗？做些别傻话？
这是一个小例子:
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.3/angular.js"></script>
</head>
<body>
<div ng-view></div>
<script>
angular.module('sample', [])
.config(
['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
//commenting out this line (switching to hashbang mode) breaks the app
//-- unless # is added to the templates
$locationProvider.html5Mode(true);
$routeProvider.when('/', {
template: 'this is home. go to <a href="/about"/>about</a>'
});
$routeProvider.when('/about', {
template: 'this is about. go to <a href="/"/>home</a'
});
}
])
.run();
</script>
</body>
附录:在重新阅读我的问题时,我发现我使用了"重写"一词,但没有明确说明我何时以及何时进行重写.问题是如何让Angular在呈现路径时重写URL,以及如何在两种模式下统一解释JS代码中的路径.它不是关于如何使Web服务器执行HTML5兼容的请求重写.
我设置Angular路线与Express一起工作陷入僵局.
我试着像Express 4,NodeJS,AngularJS路由那样做,但是没有用.每次url更改时,静态index.html都会提供服务,但Angular不会捕获部分内容.
在我的Express中,我有以下代码:
var express = require("express");
var app = express();
app.use(express.static(__dirname + '/app'));
app.use("*",function(req,res){
res.sendFile(path.join(__dirname,"app/index.html"));
});
app.listen(1337, function(){
console.log("Server is listening on port 1337");
});
在我的Angular应用程序中,我有以下内容:
var app = angular.module("myapp",["ngRoute","appControllers"]);
app.config(["$routeProvider","$locationProvider",function($routeProvider,$locationProvider){
$locationProvider.html5Mode(true);
$routeProvider
.when("/list",{
templateUrl: "/partials/users.html",
controller: "userListCntr"
})
.when("/edit", {
templateUrl: "/partials/edit.html",
controller: "userEditCntr"
})
.when("/register", {
templateUrl: "/partials/register.html",
controller: "registerCntr"
})
.when("/login", {
templateUrl: "/partials/login.html",
controller: "registerCntr"
});
}]);
我的浏览器控制台中没有任何错误.html检查器显示:
<!-- ngView: -->所以指令是初始化的.
和依赖列表:
dependencies": {
"angular": "1.3.x",
"angular-mocks": "1.3.x",
"jquery": …您已经用自耕农,咕噜声和凉亭创建了一个angularJS应用程序.我为应用程序启用了html5Mode.它的工作.但是,当我刷新页面(localhost:9000/login)时,它说
Cannot GET /login //or any url I type or refresh
这是应用程序结构
MainApp
|
|__app
| |
| |__bower_components
| |
| |__scripts
| | |
| | |__ app.js
| | |
| | |__contollers -- login.js, home.js, register.js
| | |
| | |__service -- js files
| | |
| | |__styles -- CSS files
| | |
| | |__views -- main.html, login.html, register.html,home.html
| |
| |__ index.html
|
|__ node_modules
|
|__ bower.json, Gruntfile.js, …我正在开发我的角应用程序,并设置了这样的路线
angular.module('app', ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/', {
template : "",
controller : function($window) {
$window.location.href = '/';
}
}).when('/test', {
redirectTo : '/test/dashboard'
}).when('/test/dashboard', {
templateUrl : '../partials/dashboard.html',
controller : 'DashboardController'
}).when('/test/unit', {
templateUrl : '../partials/unit.html',
controller : 'unitController'
});
$locationProvider.html5Mode(true);
});
HTML是
<body ng-app="app">
...
<div id="sidebar-wrapper" class="fill-height sidebar-nav">
<ul class="tabRow nav nav-stacked">
<li ng-class="{active: isActive('dashboard') }"><a id="dashboardLink" ng-href="#test/dashboard">Dashboard</a>
</li>
<li ng-class="{active: isActive('unit') }"><a id="unitLink" ng-href="#test/unit">Unit</a>
</li>
</ul>
</div>
...
</body>
问题:
当我输入"/ test"时,此代码会将URL重定向到"/ test/dashboard",但该页面的html不会显示.但是,当我使用该路由刷新页面时,它会在页面的内容区域中显示html.
当我在链接之间切换时,仪表板显示,只是在第一次导航时不加载.
此外,当我将重定向更改为/ …
我的index.html文件中定义了一个角度应用程序。使用角度路由，我正在路由一个名为/erez加载带有模板的视图的链接。/erez它在应用程序内部工作 - 当我单击导航栏上的链接时，index.html它工作得很好。但是当我在地址栏上直接访问 my.site.com/erez 时，它会给出404. 我明白为什么没有服务器端代码，但是有没有一种纯粹的角度方式来实现直接网址？我的路由代码：
var app = angular.module('labApp', ['ngRoute', 'angular.filter']);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'index.html',
controller: 'mainCtrl'
}).
when('/erez', {
templateUrl: 'erez2.html',
controller: 'erezCtrl'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});