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的路线和模板加载

回答

相关问题