AngularJS 路由和模板加载

Question

我正在尝试使用 angularjs 创建一个单页应用程序，我对此还很陌生。我根据许多教程拼凑了这段代码，但它不起作用，我也不太清楚为什么。我看不到任何错误。目的是在初始加载时加载 home.html 文件。然后根据路由，加载不同的模板。

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="angular.js@1.4.0-beta.4" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
    <script data-require="angular-route@1.4.0-beta.4" 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

Answer 1

您的代码中有几个错误。请看下面的变化

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) 无需手动 bootstrap 应用程序，ng-app 自动执行此操作。

4) 如果您在模板中提及，则无需在路由器级别提及控制器（反之亦然）

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

AngularJS 路由和模板加载

AngularJS routes and template loading

angularjs

angularjs-directive

angular-ui-router