Маршрутизация Angular.js не работает

Я учу себя некоторым AngularJS и добился определенного прогресса. Маршрутизация по следующему проекту, похоже, не работает, но я не знаю, что я делаю неправильно. Я использую WebStorm.Маршрутизация Angular.js не работает

Я сделал упражнение (добавление названия частей) и теперь я пытаюсь показать, что внутри представлений на странице индекса, но это не похоже на работу .. 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'; 
}

2 другие контроллеры выглядят почти одинаковые (contactController.js и homeController.js)

просмотров: about.html:

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

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

Same 2 других взглядов.

источник

2015-12-23 Mathias Schrooten

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 к un выставляют базовую угловую структуру, которая использует шаблонную маршрутизацию для одностраничного приложения here.

источник

2015-12-23 12:09:00

Спасибо, сейчас работает! –

Welcome Mathias Schrooten :) –

проблема @SatyajitPatnaik, однако, не является избыточным, инициализирует модуль дважды – koox00

Попробуйте сделать следующее:

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

И тогда вы должны быть в состоянии избавиться от $ впрыснуть вы звоните..

источник

2015-12-23 11:50:23 JackFrost

Еще Безразлично» t work .. :( –

Что на самом деле происходит не так? Оно просто не загружает представление, которое вы хотите? – JackFrost

@MathiasSchrooten также можете перейти на консоль и посмотреть, не зарегистрированы ли какие-либо ошибки? – JackFrost

С вашего кода, как первый, я вижу, что эта строка выглядит неправильно, когда вы регистрируете контроллер myController. Там вы используете angular.module('myApp', []) hovewer в App.js, там создан модуль «myApp». В «Cotnroller.js» используйте angular.module('myApp').controller(...) без скобок. Currenlty в Controller.js вы перезаписываете модуль myApp.

источник

2015-12-23 11:53:24 thadam

Эта строка angular.module('myApp', []) инициализирует модуль. Так что в основном вы должны инициализировать один раз. , то вы можете использовать его как этот angular.module('myApp')

так это в вас код:

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

должен стать как линия ниже, потому что у вас уже есть myApp модуль определен:

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

источник

2015-12-23 12:11:25 koox00

Маршрутизация Angular.js не работает

ответ

Смежные вопросы