AngularJS - 简单的部分未加载答案

【问题标题】：AngularJS - simple partial not loadingAngularJS - 简单的部分未加载
【发布时间】：2014-10-30 00:30:40
【问题描述】：

我无法使用 angular 1.3 加载我的部分内容。我已经看到了一些常见的错误，比如没有加载 angular-route.js，或者在我的应用模块中指定了“ngRoute”。我在控制台中看不到任何错误。我查看了所有“未加载部分”的帖子，它们似乎不适用于这里。知道这里发生了什么吗？谢谢！

index.html

<html ng-app="App">
<head></head>
<body ng-controller="MainController">

<div ng-view=""></div>

<script src="scripts/angular/angular.js"></script>
<script src="scripts/angular/angular-route.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<body>
</html>

app.js

(function() {
var app = angular.module('App', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider
        .when('/', 
            {
                controller: 'MainController',
                templateURL: './partials/test.html'
            })
        .otherwise({ redirectTo: '/' });
    });

}());

controllers.js

(function() {
    var MainController = function ($scope) {
        $scope.model = {
            message: 'Aaarrrgh!'
        };
    };
    MainController.$inject = ['$scope'];
    angular.module('App').controller('MainController',  MainController);    
}());

test.html（我的部分）

<h1>{{model.message}}</h1>

在我应该看到我的内容的地方，我看到了一个 html 评论：

<!-- ngView: -->

【问题讨论】：

在控制台的网络选项卡中检查实际的 ajax 请求......看看它能给你什么线索
将ng-controller 与ng-view 一起使用似乎是错误的。只需从 <body> 标签中删除 ng-controller 属性
需要明确的是，在 ng-view 的父级上使用 ng-controller 并没有错。当您需要一个独立于活动视图的应用程序级控制器时，这是一个非常常见的实现。不过在这个例子中，$routeProvider 已经配置为将MainController 注入到视图中，所以<body> 标签上的ng-controller="MainController" 似乎是多余的。

标签： javascript angularjs

【解决方案1】：

将templateURL 重命名为templateUrl

【讨论】：

啊！就是这样！谢谢！