Angular.js 网页路由不适用于 SPA（使用 ng-view 和 routeProvider）答案

【问题标题】：Angular.js web page routing not working for SPA (using ng-view and routeProvider)Angular.js 网页路由不适用于 SPA（使用 ng-view 和 routeProvider）
【发布时间】：2016-06-27 18:01:57
【问题描述】：

我正在尝试使用来自 Angularjs 库的 $routeProvider 和 ng-view 在我的 index.html 中插入一个视图。谁能帮忙弄清楚为什么它没有被插入？

这是我的 index.html、我的视图和我的 app.js 文件：

index.html:

<!doctype html>
<html lang='en' ng-app="myApp">
<head>


   <script src="app/lib/angular.min.js"></script>
   <script src="app/lib/angular-route.min.js"></script>
   <script src="app/lib/app.js"></script>

   <link rel="stylesheet" href="styles.css">
</head>
<body>

<main ng-view>
</main>

</body>
</html>

app.js：

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

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

$routeProvider

  .when('/login', {
    templateUrl: 'views/login.html'
  })

  .otherwise({
    redirectTo: '/login'
  });

}]);

我的 login.html（在我的项目的 views 文件夹中）：

<h1>Welcome to the login page!</h1>

当我尝试在 atom 中预览此页面时，index.html 为空。知道出了什么问题吗？

【问题讨论】：

对不起...主要是什么？

标签： html angularjs angular-ui-router ng-view route-provider

【解决方案1】：

希望您在某个服务器上运行您的应用程序。因为相同的代码对我来说工作正常。

app.js 文件

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

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

  $routeProvider
    .when('/login', {
      template: '<h1>Welcome to the login page!</h1>'
    })
    .otherwise({
      redirectTo: '/login'
    });

}]);

点击here 工作的plunker。

【讨论】：

是的，它看起来像 atom 中的预览有问题，谢谢！