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）模板网址不以斜杠（/）

开头

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

AngularJS路由和模板加载

1 个答案: