AngularJS通過路徑加載不同視圖

我想顯示兩個頁面，但使用基本佈局。我把它稍微有以下工作：AngularJS通過路徑加載不同視圖

的index.html

<html data-ng-app="myApp"> 
<head> 
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
</head> 
<body> 
    <div data-ng-view class="container"></div> 

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 
    <script src="public/app.js"></script> 
</body> 
</html>

main.html中

<div> 
    <h2> Hello! This is Main page </h2> 
</div>

list.html

<div> 
    <h2> This is List page </h2> 
</div>

app.js

var myApp = angular.module('myApp', []); 

// Routing Setup 
function myAppRouteConfig($routeProvider) { 
    $routeProvider. 
    when('/', { 
     templateUrl: 'index.html' 
    }). 
    when('/list', { 
     controller: ListController, 
     templateUrl: 'list.html' 
    }). 
    otherwise({ 
     redirectTo: '/' 
    }); 
} 

myApp.config(myAppRouteConfig);

當我訪問index.html，然後list.html這個有點工作，但兩個問題：

當我加載的index.html，精細引導加載。但是，當我訪問list.html時，引導程序不會加載。事實上，在螢火蟲中查看html源代碼，所有index.html的代碼都未加載。容器丟失，腳本和css鏈接丟失。
如何加載實際的索引頁？我有我的main.html，我想在用戶訪問根頁面時加載，但index.html是包含通過所有其他視圖（即像頁眉和頁腳等）持久存在的代碼的基本佈局。如果我修改我的app.js並設置templateUrl: 'main.html'，它似乎仍然加載index.html。 AngularJS隱式地尋找index.html作爲基礎模板？

編輯：

文件結構：

-- server.js 
-- public/ 
     |-- index.html 
     |-- list.html 
     |-- main.html 
     |-- js 
      |-- app.js

來源

2014-10-12 user21398

經過挖掘，我發現我的AngularJS路由需要ngRoute，這是它自己的模塊。包括它後，它開始顯示正確的頁面。

來源

2014-10-12 19:46:42 user21398

路線更改爲：

$routeProvider. 
    when('/', { 
     templateUrl: 'main.html' 
    }). 
    when('/list', { 
     controller: ListController, 
     templateUrl: 'list.html' 
    }). 
    //if you need to use login page, add 1 more route 
    when('/login', { 
     templateUrl: 'login.html' 
    }) 
    otherwise({ 
     redirectTo: '/' 
    });

，並把你的index.html在根目錄（或任何子目錄）的Web應用程序，將其配置爲默認文檔噸。

是AngularJS隱式尋找index.html作爲基礎模板？

這裏沒有任何與angular有關的東西，這是從web服務器加載html頁面的正常行爲。

這裏是它如何工作的：

當用戶在根URL訪問您的應用程序（如x：http://example.com）或任何子目錄（http://example.com/public），index.html與正常的Web應用程序一樣加載到瀏覽器中，然後您的app.js正常運行。當路線被註冊並且應用程序被引導時，角度檢查路線並且加載main.html以被插入容器，其中ng-view被聲明。

來源

2014-10-12 03:40:07

我試過了，但它不起作用。訪問根目錄時，我得到一個空白頁面。另外，爲什麼不爲login.html引導加載？當我訪問登錄頁面時，來自'index.html'的所有代碼都消失了。它可能是我的文件目錄結構？ – user21398 2014-10-12 04:11:51

@ user21398：您的整個應用程序只能有1個'index.html'。如果您需要登錄頁面，請修改路由配置以添加更多路由。我會用一個例子更新我的答案。 – 2014-10-12 04:13:36

AngularJS通過路徑加載不同視圖

回答

相關問題