AngularJs 中的部分模板未加载答案

【问题标题】：Partial templates in AngularJs not loadingAngularJs 中的部分模板未加载
【发布时间】：2016-06-14 07:07:58
【问题描述】：

我是 AngularJs 的新手，刚开始学习路由和部分模板。我正在编写一个小应用程序，当您单击主页、关于或联系人等特定超链接时，它试图进行路由并将部分模板插入到布局 HTML 页面中。

但是，我很难理解为什么我的模板没有加载到布局视图中。我研究了 Stack Overflow 和其他资源，但似乎没有任何效果。我的文件结构是这样的：

index.html file
Templates Folder:
  +home.html
  +about.html

+contact.html
Scripts folder:
  +script.js
  +angular-route.min

以下是我的代码： index.html：

<!--index.html-->
<!DOCTYPE html>

<html>

<head>
<title>Routing App Example</title>

<script src = 
"https://code.angularjs.org/1.5.6/angular.js">`
</script>`

<script src = "https://code.angularjs.org/1.5.6/angular-route.js">`</script>
<script type="text/javascript" src = "Scripts/script.js"></script>
</head>

<body ng-app = "RoutingApp" ng-controller = "MainController">

<header>
    <div>
        <ul>
            <li><a href = "#/home">Home</a></li>
            <li><a href = "#/about">About</a></li>
            <li><a href = "#/contact">Contact</a></li>
        </ul>
    </div>
</header>
    <div>
        index ng-root
        <ng-view></ng-view>
    </div>
</div>
</body>
</html>

script.js：

var RoutingApp = angular.module('RoutingApp', ['ngRoute']);

RoutingApp.config(['$routeProvider', '$locationProvider', '$scope',   function($routeProvider, $locationProvider){

$routeProvider
// route for the index page

// route for the addOrder page

.when('/home', {
    templateUrl: 'Templates/home.html',
    controller: 'HomeController'
})
.when('/about', {
    templateUrl: 'Templates/about.html',
    controller: 'AboutController'
})
// route for the showOrders page
.when('/contact', {
    templateUrl: 'Templates/contact.html',
    controller: 'ContactController'
})
.otherwise({
    redirectTo: '/home',
});

}]);

RoutingApp.controller('MainController', function($scope){
$scope.message = "Welcome from the MainController";
});

RoutingApp.controller('HomeController', function($scope){
    $scope.message = "Welcome from the HomeController";$scope
});

RoutingApp.controller('AboutController', function($scope){
    $scope.message = "Welcome from the AboutController";
});

RoutingApp.controller('ContactController', function($scope){
    $scope.message = "Welcome from the ContactController";
});

home.html

<h1>{{message}}</h1>

about.html

<h1>{{message}}</h1>

contact.html

<h1>{{message}}</h1>

我遇到的问题是部分模板没有加载到布局视图页面中。我不知道我做错了什么。

【问题讨论】：

您的部分模板文件是否与 index.html 位于同一文件夹中，或者您提到的它们位于 模板文件夹中
没有部分模板位于名为 Templates 的单独文件夹中。
您可以检查控制台是否有错误
我检查了 Chrome 控制台错误。这就是我得到的：
SCRIPT5022: [$injector:modulerr] errors.angularjs.org/1.5.6/$injector/modulerr

标签： javascript angularjs angular-routing

【解决方案1】：

您收到该错误是因为

在您的路线配置中，locationProvider 应该是 $locationProvider。
您不是在注入 scope，而是在路由配置中使用它。我怀疑它甚至存在于路由配置中。

还有一些错别字。

正确的路线配置是：

RoutingApp.config( [ '$routeProvider', '$locationProvider', function( $routeProvider, $locationProvider ){


    $routeProvider
      .when('/home', {
            templateUrl: 'template/home.html',
            controller: 'HomeController'
        })
        .when('/about', {
            templateUrl: 'template/about.html',
            controller: 'AboutController'
        })
        .when('/contact', {
            templateUrl: 'template/contact.html',
            controller: 'ContactController'
        })
        .otherwise({
            redirectTo: '/home',
         });

    } ] );

这是你代码的修改版本：
https://plnkr.co/edit/CtMucCAfuxb8JHO5Buci?p=preview

【讨论】：

感谢您的帮助。我确实做了你建议的所有代码更改。当我运行该应用程序时，它不会在控制台上给我任何错误。但是，数据表达式不具有约束力。所以我得到的是“{{message}} 在我点击的每个链接上。
@MoLaiouny 是 plunker 示例不适合您吗？请用您的新代码更新您的问题