3

这是基本设置,它有一个默认的 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);

我的控制器:

函数 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);”,默认的 localhost 现在是“ http://localhost:31219/#/ ”,当我点击任何员工时,地址栏会显示“ http://localhost: 31219/Employee/1 ',页面被导航到 404 错误页面。

我知道我在这里混了一些东西,解决方案是如此简单,以至于我无法理解。

目标:

  1. 我真的很想在地址栏中避免使用哈希标签。
  2. 员工/身份证不会出现在地址栏中会很好,但没有要求,但我怀疑部分无法更改。而且,自然

  3. 当单击员工时,我希望部分更改为“employee.html”页面。

有谁看到我的代码哪里出错了?

提前致谢!

4

2 回答 2

2

解决方案:

  1. 我需要把'#/'放在img href --> href="#/Employee/{{employee.id}}"
  2. 注释掉'$locationProvider.html5Mode(true);'

作为旁注,我当然希望我知道如何在没有那些讨厌的哈希标签的情况下让它工作。有什么想法吗?

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

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

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

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

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

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

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

Html链接重写

当您使用 HTML5 历史 API 模式时,您会在不同的浏览器中需要不同的链接,但您所要做的就是指定常规的 URL 链接,例如:<a href="/some?foo=bar">link</a>

当用户点击此链接时:

在旧版浏览器中,URL 更改为 /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)

于 2013-01-28T20:16:07.377 回答
1

这就是问题所在:

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

解决方案:

  1. 我需要把'#/'放在img href --> href="#/Employee/{{employee.id}}"
  2. 注释掉'$locationProvider.html5Mode(true);'

作为旁注,我当然希望我知道如何在没有那些讨厌的哈希标签的情况下让它工作。有什么想法吗?

于 2013-01-08T18:48:27.707 回答