路线不适用于 angularJS 1.6答案

【问题标题】：route does not work with angularJS 1.6路线不适用于 angularJS 1.6
【发布时间】：2023-03-27 11:59:02
【问题描述】：

我正在使用 angularjs 1.6 创建一个简单的应用程序，只是为了显示组列表并显示每个组的所有用户... 我的问题是我无法显示使用 ng-view 的用户列表

这是我的 index.html ：

<!DOCTYPE html>
<html lang="en" ng-app="application"> 
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My application</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="assets/bootstrap-3/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/app.css">
</head>
<body>
  <div ng-controller="groupctrl">
    <div class="well">
      <ul ng-repeat="grp in group">
        <li class="link" ng-click="displayusers(grp.uuid)">{{ grp.name }}</li>
        <li class="link" ng-click="displayusers(grp.uuid)">{{ grp.name }}</li>
     </ul>
    </div>
  </div>
    <div ng-view>

    </div>
</body>
  <script src="assets/angular.min.js"></script>
  <script src="assets/angular-route.min.js"></script>
  <script src="controllers/app.js"></script>
  <script src="controllers/route.js"></script>
  <script src="controllers/service.js"></script>
  <script src="controllers/mainctrl.js"></script>

</html>

app.js

var app = angular.module('application', ['ngRoute']);

route.js 和 mainctrl.js

app.config(['$locationProvider', '$routeProvider', 
	function($locationProvider, $routeProvider) {

		  $locationProvider.hashPrefix('!');

		  $routeProvider
		  .when('/', {
	    	templateUrl: 'index.html'
		   })
		  // .when('/group', {
		  //   	templateUrl: 'group.html',
		  //   	controller: 'groupctrl'
		  //  })
		   .when('/users', {
		    	templateUrl: 'users.html',
		    	controller: 'usersctrl'
		   })
		  .otherwise({redirectTo: '/'});
}]);

app
.controller('groupctrl', function($scope, $timeout, $location, apiService) {

$scope.hello = "hello 123";

apiService.getgroup().then(function(data){
	$scope.group = data;
});

$scope.displayusers = function(idgroup){
	apiService.getusers(idgroup);
	$location.path('/users');
};

})
.controller('usersctrl', function($scope, $timeout, apiService) {


apiService.getusers().then(function(data){
	$scope.users = data;
});

});

users.html

<div ng-controller="usersctrl">
    <div ng-repeat="user in users">
      <div class="well text-center">
         <h2>{{ user.name }}</h2>
         <h5>{{ user.index }}</h5>
             <button class="btn btn-success" ng-click="edit(user.index)">EDIT</button>
             <button class="btn btn-danger" ng-click="delete(user.index)">DELETE</button>
      </div>
    </div>
  </div>

感谢您的帮助！

【问题讨论】：

请更准确地描述您的问题，当您导航到/users 时会发生什么？它在哪里重定向，浏览器控制台中是否有任何错误？您在哪个浏览器上检查了代码？
我正在使用 chrome 和 Ubuntu，我的问题是我无法通过 ng-view 显示 index.html 中的 users.html ！！
打开浏览器控制台 (F12) 并重做。您是否注意到控制台中有任何错误？如果是，请将它们粘贴到您的问题中。如果不是，网址是否更改为/users/？
ok，唯一需要注意的是：XMLHttpRequest 无法加载 file:///home/folder-test/Documents/application/users.html。跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。

标签： javascript angularjs routing

【解决方案1】：

参考问题作者提供的cmets，问题是访问users.html文件时出现错误提示：

XMLHttpRequest cannot load file:///home/folder-test/Documents/application/users.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https

此问题已在其他 SO 问题中得到解决，例如 this，更具体地是针对 AngularJS here。

【讨论】：

这不是我的问题，我说的是路由和 ng-view ！显示用户模板！
您是否将users.html 放置在index.html 的确切位置（很可能是public 文件夹）？
再次查看错误我假设您只是在本地打开index.html。这样您将无法访问index.html 文件中未定义的任何资源（例如其他本地 html 文件）。查看 here 或 here 了解如何在简单的 Web 服务器上部署 angularjs。