Question

我正在尝试使用来自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为空。知道出了什么问题吗？

Answer 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了解工作插件。

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

1 个答案: