javascript - Angular.js 路由似乎不起作用-6ren

javascript - Angular.js 路由似乎不起作用

转载作者：行者123 更新时间：2023-12-03 08:04:44

25

4

我正在自学一些 AngularJS 并取得了一些进展。以下项目的路由似乎不起作用，但我不知道我做错了什么。我使用 WebStorm。

我做了一个练习(添加名称部分)，现在我试图显示索引页面上的 View 中的内容，但这似乎不起作用。索引.html:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular/angular.js"></script>
    <script src="angular/angular-route.min.js"></script>
    <script src="app.js"></script>
</head>
<body>
<div ng-controller="myController as ctrl">
    <h1>Lijst met namen</h1>
    <input type="text" placeholder="voornaam..." ng-model="ctrl.voornaam">
    <input type="text" placeholder="achternaam..." ng-model="ctrl.name">
    <input type="button" value="Persoon toevoegen" ng-click="ctrl.addNaam()">
    <ul>
        <li ng-repeat="person in ctrl.personen">
            {{person.name}} {{person.voornaam}}
        </li>
    </ul>



</div>
<div role="navigation">
    <nav>
        <a href="#/home">Home</a>
        <a href="#/about">About us</a>
        <a href="#/contact">Contact us</a>
    </nav>
</div>
<div ng-view></div>




<script src="controller.js"></script>
<script src="aboutController.js"></script>
<script src="contactController.js"></script>
<script src="homeController.js"></script>


</body>
</html>

应用程序.js:

angular.module('myApp',['ngRoute']).config(moduleConfig);

//Inject dependencies
moduleConfig.$inject = ['$routeProvider'];

//routes configureren
function moduleConfig($routeProvider) {
    $routeProvider.when('/', {
            templateUrl: 'views/home.html',
            controller: 'homeController',
            controllerAs: 'homeCtrl'
        })
            .when('/home', {
            templateUrl: 'views/home.html',
            controller: 'homeController',
                controllerAs: 'homeCtrl'
        })
        .when('/about', {
            templateUrl: 'views/about.html',
            controller: 'aboutController',
            controllerAs: 'aboutCtrl'
        })
        .when('/contact', {
            templateUrl: 'views/contact.html',
            controller: 'contactController',
            controllerAs: 'contactCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
} })();

Controller .js:

angular.module('myApp', []).controller('myController', myController);
function myController(){
     var vm = this;

     vm.personen = [
         {name: 'Schrooten', voornaam: 'Mathias'}
     ];

     vm.addNaam = function(){
          var newName = {
              voornaam: this.voornaam,
              name: this.name
          };
          this.personen.push(newName);
          window.alert('Persoon toegevoegd!')
     }
 }

关于 Controller :

angular.module('myApp').controller('aboutController', aboutController);
function aboutController(){
  this.msg = 'Hello';
}

其他 2 个 Controller 看起来几乎相同(contactController.js 和 homeController.js)

浏览次数:about.html:

<div>
    <p>About us: ....</p>

    <input type="text">
</div>

其他 2 个 View 也是如此。

最佳答案

这行 angular.module('myApp', []) 初始化一个模块。所以基本上你必须初始化一次。那么你可以像这样使用它 angular.module('myApp')

所以你的代码中是这样的:

angular.module('myApp', []).controller('myController', myController);

必须变得像下面的行，因为您已经定义了 myApp 模块:

angular.module('myApp').controller('myController', myController);

关于javascript - Angular.js 路由似乎不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34434915/

25

4

0

文章推荐： javascript - 删除之前淡出列表中的项目

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

首页

博学

6Ren·AI

商城

javascript - Angular.js 路由似乎不起作用