javascript - AngularJs 中的部分模板未加载-6ren

javascript - AngularJs 中的部分模板未加载

转载作者：行者123 更新时间：2023-11-30 00:07:55

25

4

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

但是，我很难理解为什么我的模板没有加载到布局 View 中。我研究了 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>

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

最佳答案

你得到那个错误是因为

在您的路由配置中，locationProvider 应该是 $locationProvider。
您没有注入(inject)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

关于javascript - AngularJs 中的部分模板未加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37777401/

25

4

0

文章推荐： android - 关闭应用程序时停止 AsyncTask

文章推荐： javascript - 区分方法和属性

文章推荐： java - 如何将 native 查询结果映射到 java 类

文章推荐： javascript - Google map 街景 View 信息 wIndows 在 map 上打开

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

javascript - AngularJs 中的部分模板未加载