Question

以下是基本设置，默认为noemployee.html partial：作为ng-view

Index.html内容：

 <div id="container" ng-controller="EmployeeCtrl">

 <!-- Side Menu -->
 <span id="smenuSpan">
 <ul id="thumbList">
 <li ng-repeat="employee in employees | filter:categories">
 <a href="Employee/{{employee.id}}"><img  class="smallImage" ng-src="content/app/images/{{employee.image}}" alt="{{employee.description}}"></a>
 </li>
 </ul>
 </span>

 <!-- Content -->
 <span id="contentSpan">
 <div ng-view></div>    
 </span>

 </div>

我的路线提供者：

var EmployeeModule = angular.module('EmployeeModule',  [], function($routeProvider, $locationProvider) {

$routeProvider.when('/', { templateUrl: 'content/app/partials/noemployee.html', controller: EmployeeModule.EmployeeCtrl });
$routeProvider.when('Employee/:id', { templateUrl: 'content/app/partials/employee.html', controller: EmployeeModule.EmployeeCtrl });
$routeProvider.otherwise({ redirectTo: '/' });

$locationProvider.html5Mode(true);

我的控制器：

函数EmployeeCtrl（$ scope，$ http，$ routeParams，$ timeout）{

    $scope.employees = [
{ "id": 1, "category": "ones", "image": "person1.jpg",  "description": "person 1 description", name:"Jane Smith" },
{ "id": 2, "category": "twos", "image": "person2.jpg", "description": "person 2 description", name: "Mark Sharp" },
{ "id": 3, "category": "threes", "image": "person3.jpg", "description": "person 3 description", name: "Kenny Suave" },
{ "id": 4, "category": "fours", "image": "person4.jpg", "description": "person 4 description", name: "Betty Charmer" },
{ "id": 5, "category": "fives", "image": "person5.jpg", "description": "person 5 description", name: "John Boss" }
];

$scope.employeesCategories = [];
$scope.currentEmployee = {};
$scope.params = $routeParams;

$scope.handleEmployeesLoaded = function (data, status) {
    //$scope.images = data;
    // Set the current image to the first image in images
    $scope.currentEmployee = _.first($scope.employees);
    // Create a unique array based on the category property in the images objects
    $scope.employeeCategories = _.uniq(_.pluck($scope.employees, 'category'));
}

$scope.fetch = function () {
    $http.get($scope.url).success($scope.handleEmployeesLoaded);
};

$scope.setCurrentEmployee = function (employee) {
    $scope.currentEmployee = employee;
};

// Defer fetch for 1 second to give everything an opportunity layout
$timeout($scope.fetch, 1000);

}

观察：

目前，如果我点击任何员工，没有'员工/ ??'被添加到地址栏路径[这对我来说不是犯罪]，但是，主要内容div不会将部分更改为employee.html。
如果我注释掉“$ locationProvider.html5Mode（true）;”，则默认的localhost现在为“http://localhost:31219/#/”，当我点击任何员工时，地址栏会显示“http://localhost:31219/Employee/1 '，页面被导航到404错误页面。

我知道我在这里贬低某些东西，解决方案很简单，它让我感到茫然。

目标：

我真的想避免在我的地址栏中使用哈希标记。
如果员工/身份证没有显示在地址栏中，但我怀疑部分不能改变，那就不错了。而且，自然
我希望在点击员工时，部分会更改为“employee.html”页面。

有没有人知道我的代码出错了？

提前致谢！

Answer 1

解决方案：


我需要在img href中添加'＃/' - ＆gt; HREF = “＃/雇员/ {{employee.id}}”

评论出来   '$ locationProvider.html5Mode（真）;'

作为旁注，我当然希望我知道如何使用这些讨厌的哈希标签来实现这一点。任何人的想法？

为了使用html5mode，您的服务器必须为其他无效路由提供主应用程序索引文件。

因此，例如，如果您的服务器端代码处理路径上的CRUD操作，例如：/ api / employees，/ api / employees /：id等......

它提供静态内容，图像，html，css，js等。

对于任何其他请求，否则它将是404，它应该，而不是用404响应，用200代码响应，并提供index.html文件。

这样，任何非静态和非服务器端路由都由角度应用程序处理。

此页面上的Angular指南中提到了这一点：http://docs.angularjs.org/guide/dev_guide.services.$location

请注意最后的“服务器端”评论：

Html链接重写

当您使用HTML5历史记录API模式时，您将需要   不同浏览器中的不同链接，但您只需要做的就是   指定常规网址链接，例如：<a href="/some?foo=bar">link</a>

当用户点击此链接时：

在旧版浏览器中，网址更改为/index.html#!/some?foo=bar

在现代浏览器中，URL更改为/ some？foo = bar在类似的情况下   以下，链接不会被重写;相反，浏览器将执行   整页重新加载到原始链接。

包含目标元素的链接   示例：<a href="/ext/link?a=b" target="_self">link</a>

转到其他域的绝对链接   示例：<a href="http://angularjs.org/">link</a>

以'/'开头的链接，在定义base时会导致不同的基本路径   示例：<a href="/not-my-base/link">link</a>

服务器端

使用此模式需要在服务器端重写URL，基本上你必须重写   所有指向应用程序入口点的链接（例如index.html）

Answer 2

这就是问题：

<a href="Employee/{{employee.id}}"><img  class="smallImage" ng-src="content/app/images/{{employee.image}}" alt="{{employee.description}}"></a>

<强>解决方案：

我需要在img href中添加'＃/' - ＆gt; HREF = “＃/雇员/ {{employee.id}}”
注释掉'$ locationProvider.html5Mode（true）;'

作为旁注，我当然希望我知道如何使用这些讨厌的哈希标签来实现这一点。任何人的想法？

Angularjs - NgView无法正常工作

2 个答案: