javascript - Angularjs - NgView 不工作

Question

这是基本设置，它有一个默认的 noemployee.html 部分:作为 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);

我的 Controller :

函数 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);

观察:

1. 目前，如果我点击任何员工，则不会出现“员工/??”添加到地址栏路径 [这对我来说不是犯罪]，但是，主要内容 div 不会将部分更改为 employee.html。

2. 如果我注释掉“$locationProvider.html5Mode(true);”，默认本地主机现在是“http://localhost:31219/#/”，当我点击任何员工时，地址栏显示“http://localhost:31219/Employee/1” '，然后页面导航到 404 错误页面。

我知道我在这里搞砸了一些事情，因为解决方案太简单了，以至于我无法理解。

目标:

1. 我真的很想避免在我的地址栏中使用井号标签。

2. 这很好，但不要求员工/ID 不显示在地址栏中，但我怀疑没有它就无法更改部分内容。而且，自然地

3. 我希望在单击员工时将局部更改为“employee.html”页面。

有人看到我这段代码哪里出了问题吗？

提前致谢!

Answer 1

Solution:

1. I needed to put '#/' in the img href --> href="#/Employee/{{employee.id}}"
2. Comment out '$locationProvider.html5Mode(true);'

As a side note, I sure wish I knew how to get this to work w/o those pesky hash tags. Any ideas anyone?

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

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

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

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

通过这种方式，任何非静态和非服务器端路由都由 Angular 应用程序处理。

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

注意末尾的“服务器端”注释:

Html link rewriting

When you use HTML5 history API mode, you will need different links in different browsers, but all you have to do is specify regular URL links, such as: <a href="/some?foo=bar">link</a>

When a user clicks on this link:

In a legacy browser, the URL changes to /index.html#!/some?foo=bar

In a modern browser, the URL changes to /some?foo=bar In cases like the following, links are not rewritten; instead, the browser will perform a full page reload to the original link.

Links that contain target element Example: <a href="/ext/link?a=b" target="_self">link</a>

Absolute links that go to a different domain Example: <a href="http://angularjs.org/">link</a>

Links starting with '/' that lead to a different base path when base is defined
Example: <a href="/not-my-base/link">link</a>

Server side

Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html)