新手角度路由

我剛開始學習角度&創建第一個應用。請幫助我請路由。新手角度路由

的文件夾結構

水療/ 的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){ 

})

來源

2015-10-01 wrath1888

一旦你創建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>

來源

2015-10-01 10:25:30

Pankaj，我已根據您的答案更改了代碼。我看到例如「index.html＃login」在我的地址欄末尾。但是，我怎樣才能將我的觀點的內容提供給index.html？ – wrath1888

@АнтонШомин，注意答案被更新時，嘗試＃/登錄 – sniels

Home

Profile

Cars

仍然做n ot得到意見的內容 – wrath1888

新手角度路由

回答

相關問題