Angular 新手路由

Question

我刚刚开始学习 angular 并创建第一个应用程序。请帮我路由。

文件夹结构

水疗中心/ index.html 控制器/ controllers.js 图片/ javascript/ app.js 资源/ angular-route.js angular.js 意见/ cars.html home.html login.html profile.html

不显示来自“/views”的页面。这是我的代码。

index.html

<!DOCTYPE html>
<html lang="en" data-ng-app="app">
  <head>
    <meta charset="UTF-8">
    <title>5 Angular</title>
    <script src="resources/angular.js"></script>
    <script src="controllers/controller.js"></script>
    <script src="javascript/app.js"></script>
    <script src="resources/angular-route.js"></script>
  </head>
  <body ng-controller="mainCtrl">
    <nav>
      <ul class="navbar">
        <li>
          <a href = "#home">Home</a>
        </li>
        <li>
          <a href = "#Login">Login</a>
        </li>
        <li>
          <a href = "#profile">Profile</a>
        </li>
        <li>
          <a href = "#cars">Cars</a>
        </li>
      </ul>
    </nav>
    <ng-view></ng-view>
  </body>
</html>

cars.html

<h1>Cars Page</h1>

home.html

<h1>Home Page</h1>

login.html

<h1>Login Page</h1>

profile.html

<h1>Profile Page</h1>

app.js

angular.module('app', ['ngRoute'])
.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl: 'views/home.html'
})
.when('login', {
templateUrl: 'views/login.html'
})
.when('cars', {
templateUrl: 'views/cars.html'
})
.when('profile', {
templateUrl: 'views/profile.html'
})
otherwise('/');
});

控制器

angular.module('app', ['ngRoute'])
.controller("mainCtrl",function($scope){

})

Answer 1

一旦您在 app.js 中创建了应用程序模块，例如 angular.module('app', ['ngRoute']) 您不应该再次在 controller.js 中重新创建应用程序模块，这将刷新所有初始注册的组件，就像您在此处为路由器设置所做的 .config 块一样。

应该是

angular.module('app')

而不是

angular.module('app', ['ngRoute'])

此外 login 锚点应该是 #/login 而不是 #Login 因为 $routerProvider 在 login 上有条件。另请注意，href 中的哈希值后应有一个斜杠。

<a href = "#/login">Login</a>

Angular 新手路由

Angular routing for newbie

routing

angularjs

single-page-application

angular-routing