AngularJS的路線和模板加載

我想創建一個單一頁面的應用程序與我很新的angularjs。我已經根據一些教程將這些代碼拼湊在一起，但它不起作用，我不太清楚爲什麼。我沒有收到我能看到的任何錯誤。目的是讓home.html文件在初始加載時加載。然後根據路線，加載不同的模板。AngularJS的路線和模板加載

的script.js

angular.module("myApp", ['ngRoute']).config(['$routeProvider', function($routeProvider){ 
    $routeProvider.when("/view", { 
     templateUrl: "/view.html", 
     controller: "ViewCtrl" 
    }) 
    .otherwise({ 
     templateUrl: "/home.html", 
     controller: "HomeCtrl" 
    }); 
}]); 

angular.module("myApp").controller("ViewCtrl", ['$scope', function($scope){ 
    $scope.message = "In the view"; 
}]); 

angular.module("myApp").controller("HomeCtrl", ['$scope', function($scope){ 
    $scope.message = "At home"; 
}]); 

angular.element(document).ready(function(){ 
    angular.bootstrap(document, ['myApp']); 
})

的index.html

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script> 
    <script data-require="[email protected]" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular-route.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <div id="content" ng-app="myApp"></div> 
    </body> 

</html>

home.html做爲

<div ng-controller="HomeCtrl"> 
    {{message}} 
</div>

view.html

<div ng-controller="ViewCtrl"> 
    {{message}} 
</div>

http://plnkr.co/edit/eLZQueX3OyPCXo2tQGWS

來源

2015-02-10 geoff swartz

代碼中的錯誤。請看下面的改變

1）添加ng-view指令加載部分內容

<div id="content" ng-app="myApp"></div> 

should be 

<div id="content" ng-app="myApp" ng-view></div>

2）模板URL不以斜線（/）

templateUrl: "/view.html", 
templateUrl: "/home.html", 

Should be 

templateUrl: "view.html", 
templateUrl: "home.html",

3）無需自舉啓動應用程序手動，ng-app自動執行此操作。

4）沒有必要提及在路由器級控制器，如果你在模板（反之亦然）

工作演示中提到：http://plnkr.co/edit/n19eCFwRc9WQUt6SskPU?p=preview

來源

2015-02-10 17:32:33 Asik

而且不應該有在視圖中的任何NG-控制器，因爲路由器已經實例化控制器並將其關聯到視圖。而且不需要手動引導應用程序，因爲這就是ng-app的功能。 – 2015-02-10 17:36:28

@JB Nizzet，根據你的有效評論更新答案。謝謝！ – Asik 2015-02-10 17:41:54

太好了，謝謝！ – 2015-02-10 18:11:02

AngularJS的路線和模板加載

回答

相關問題