Question

我刚开始学习角度＆amp;创建第一个应用程序。请路由帮助我。

文件夹结构

水疗/ 的index.html 控制器/ controllers.js 图片/ 的JavaScript / app.js 资源/ 角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>

新手的角度路由

1 个答案: