AngularJs 中的部分模板未加载

Question

我是 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>

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

Answer 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

AngularJs 中的部分模板未加载

Partial templates in AngularJs not loading

javascript

angularjs

angular-routing