Angular.js网页路由不适用于SPA(使用NG-View和RouteProvider)

我试图使用Angularjs库中的$ ruteprovider和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（在我的项目的视图文件夹中）：

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

当我尝试在Atom中预览此页面时，index.html为空。知道怎么了？

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

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'
    });
}]);

单击此处进行工作plunker。

相关内容

最新更新

热门标签：