Javascript Angularjs-NgView不工作

这里是基本设置，它有一个默认的noemployee.html部分：作为ng视图

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

我的控制器：

 <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）{

}

观察结果：

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

目前，如果我单击任何员工，地址栏路径中不会添加“employee/？？”[这对我来说不是犯罪]，但是，main content div不会将部分更改为employee.html

如果我注释掉“$locationProvider.html5Mode（true）；”，默认的本地主机现在是“”，当我单击任何员工时，地址栏会显示“”，页面会导航到404错误页面

我知道我在这里贬低一些东西，以至于解决方案如此简单，我无法理解

目标：

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

我真的很想避免地址栏中的散列标签

这将是很好的，但没有要求员工/id不显示在地址栏中，但我怀疑部分不能更改它。当然

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

有人知道我在这段代码中哪里出错了吗

---

提前感谢！

这就是问题所在：

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

解决方案：

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

我需要在img href-->href=“#/Employee/{{{Employee.id}”中添加“#/”

注释掉“$locationProvider.html5Mode（true）；”

顺便说一句，我真希望我知道如何在没有那些讨厌的散列标签的情况下实现这一点。有什么想法吗？

解决方案：

我需要在img href-->href=“#/Employee/{{{Employee.id}”中添加“#/”

点评 “$locationProvider.html5Mode（true）；”

顺便说一句，我真希望我知道如何在没有那些讨厌的散列标签的情况下使用它。有什么想法吗

为了使用HTML5模式，服务器必须为其他无效路由提供主应用程序索引文件

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

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

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

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

本页的角度指南中提到了这一点：

请注意结尾处的“服务器端”注释：

Html链接重写

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

当您使用HTML5历史API模式时，您需要 在不同的浏览器中有不同的链接，但你所要做的就是 指定常规URL链接，例如：

当用户单击此链接时：

在传统浏览器中，URL更改为/index.html#！/some？foo=bar

在现代浏览器中，URL在以下情况下更改为/some？foo=bar 接下来，链接不会被重写；相反，浏览器将执行以下操作 将整个页面重新加载到原始链接

包含目标元素的链接 示例：

指向不同域的绝对链接 示例：

以“/”开头的链接，在定义基时指向不同的基路径
示例：

服务器端

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

---

控制台上说了什么？只是想确定一下，您是否在index.html（html标记）中包含了ng app=“EmployeeModule”？如果可能，设置一个。这样可以更轻松地签出内容。[叹气]是的，我确实包含了“”。我将返回种子程序，看看是否可以找到解决方案。感谢您的帮助。