AngularJS路由，错误link

Question

我正在尝试学习 AngularJS 路由，但我遇到了一个小问题。

我正在我的计算机上处理一个简单的 HTML 文件（这意味着 Url 看起来像 file:///C:/Users ...）

我不知道要在 / 模板中的 link 中放入什么才能使其正常工作。我尝试了 home、/home、#home、#/home ... 但似乎没有任何效果。

你能帮帮我吗？

文件如下：（route1.html 只包含一个输入）

HTML 文件

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!doctype html>
<html ng-app="myApp">
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  <script src="js/main2.js"></script>
 </head>
 <body>
  <div ng-view>
  </div>
 </body>
</html>

JavaScript 文件

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

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

 $routeProvider
 
 .when('/', {
  controller: 'HomeController', 
  template: '<h1>Hey</h1><a href="#/home">Go to home</a>'
 }).otherwise({redirectTo: '/'})
 
 .when('/home', {
  controller: 'HomeController', 
  templateUrl: 'route1.html'
 })
}]);

app.controller('HomeController', function($scope) {
 $scope.name = 'John';
});

Answer 1

AngularJS 路由隐式使用 Ajax 到达新的 URL 并为您提供相应的视图。所以如果你想测试你的路由，你将需要一个服务器来提供这个页面（可以很容易地设置一个轻型 apache 或 node.js 静态服务器）。

在 this thread 中有更多关于它的讨论。

Answer 2

uI 通过添加最新的 angular.js V1.4.5 和 angular.route.js 相同版本解决了您的问题。并且还对 main2.js 进行了如下更改

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

好好休息，谢谢。

AngularJS路由，错误link

AngularJS routing, wrong link

html

angularjs

angularjs-routing