Question

我是AngularJs的新手，我刚开始学习路由和部分模板。我正在编写一个小应用程序，当您单击特定的超链接（例如Home，about或contact）时，该应用程序尝试进行路由并将部分模板插入到布局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 。
您没有注入范围，而是在路由配置中使用它。我怀疑它甚至存在于路由配置中。

还有一些错别字。

正确的路线配置是：

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中的部分模板未加载

1 个答案: