Question

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

我做了一个练习（添加名称部分），现在我正在尝试显示索引页面上的视图内的内容，但这似乎不起作用.. Index.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>

App.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!')
     }
 }

aboutController：

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

其他两个控制器看起来几乎相同（contactController.js和homeController.js）

的观点： about.html：

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

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

其他2个观点相同。

Answer 1

此行angular.module('myApp', [])初始化模块。所以基本上你必须初始化一次。然后你可以像angular.module('myApp')

一样使用它

所以这在你的代码中：

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

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

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

Answer 2

尝试：

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

然后你应该能够摆脱。$注入你的电话。

Answer 3

首先从您的代码中我看到这条线看起来是错误的，当您注册“我的控制器”时控制器。你在App.js中使用angular.module('myApp', []) hovewer有＆＃39; myApp＆＃39;模块创建。在＆＃39; Cotnroller.js＆＃39;使用angular.module('myApp').controller(...)无括号。在Controller.js中输入你覆盖＆＃39; myApp＆＃39;模块。

Answer 4

angular.module('myApp')是代码库中的冗余代码。在这里创建角度模块是不正确的事情。创建一次，将其存储在一个变量中，让我们说“应用程序”。并在其他地方使用它。

如下所示：

app.js中的

：

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

在route.js中：

app.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl : 'login.html'
        })
        .when('/home', {
            templateUrl : 'main.html',
            controller: 'myController'
        })
        .otherwise({
            redirectTo: '/'
        });
});

在Controller.js中：

app.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!')
     }
 }

您可以参考我的一个github存储库来理解为单个页面应用程序here使用模板路由的基本角度框架。

Angular.js路由似乎不起作用

4 个答案: