Angular JS контроллер не работает после модуляции приложения - PullRequest
Новая
       7

Angular JS контроллер не работает после модуляции приложения

0 голосов
/ 01 сентября 2018

Я новичок в angularjs и следовал учебнику здесь от w3schools, чтобы создать мое первое простое приложение Angularjs, и оно работало нормально. Пройдя официальный урок angularjs, я решил модулировать свое приложение, но теперь оно не работает. В настоящее время я получаю сообщение об ошибке

"Контроллер с именем 'redController' не зарегистрирован."

Я хочу отобразить сообщение в компоненте «красный», используя его контроллер. Я пытался изменить многие части кода только для того, чтобы получить новые ошибки, и, похоже, я испортил модульность: |

Я использую v1.6.9

Вот моя структура каталогов 

app/
    scripts/
        angular.min.js
        angular-route.js
    blue/
        blue.template.html
    red/
        red.template.html
        red.module.js
        red.component.js
    app.config.js
    app.module.js
    index.html

и исходные файлы:

app.config.js 

angular
.module("myApp", [ 'red','ngRoute' ])
.config(function($routeProvider) {
$routeProvider
.when("/red", {
    templateUrl : "red/red.template.html",
    controller: "redController"
})
.when("/blue", {
    templateUrl : "blue/blue.template.html"
});
});

app.module.js 

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

index.html 

<!DOCTYPE html>
<html>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.js"></script>



<script src="app.module.js"></script>
<script src="app.config.js"></script>


<script src="red/red.module.js"></script>
<script src="red/red.component.js"></script>

<body ng-app="myApp">
  <a href="#!red">Red</a>
  <a href="#!blue">Blue</a>
  <div ng-view></div>
  <p>Click on the links to navigate "</p>
</body>

</html>

red.template.html 

<h1>red</h1>
<p>{{msg}}</p>hell

red.module.js 

angular.module('red', [ 'ngRoute' ]);

red.component.js 

angular.module('red').component('red',{

        templateUrl: 'red/red.template.html',
        controller: function redController() {
            this.msg = "this is red";
            console.log("Hi");
        }
});

Ответы [ 2 ]

0 голосов
/ 01 сентября 2018

Прежде всего, как @Sajeetharan вы определяете модуль myApp дважды. Внутри вашего app.config.js, а также в app.module.js. Если вы используете angular.module с 2 параметрами angular.module('app', []), вы устанавливаете модуль, если вы используете angular.module('app'), он будет работать как геттер. Итак, в вашем app.config.js вы должны использовать геттер для настройки вашего приложения.

Как только вы это сделаете, вы можете настроить свой маршрут примерно так: 

angular.module('myApp').config(function($routeProvider){
    $routeProvider.when('/red', { template: '<red></red>'});
})

Я бы использовал этот подход, поскольку вы определили компонент в другом модуле.

Если вы все еще хотите использовать реализованный подход для установки templateUrl и controller в $routeProvider, вам придется изменить объявление компонента red на что-то вроде этого: 

angular.module('red')
.component('red', { templateUrl: 'red/red.template.html'})
.controller('redController', function(){
    this.msg = 'This is red.';
});

Я проверил этот второй подход, так как для меня первый имеет больше смысла.

0 голосов
/ 01 сентября 2018

Вы снова и снова сбрасываете модуль в каждом файле .js, объявляете только в одном файле .js и используете его в остальных полях.

измените red.module.js на 

angular.module('red', []);

ваш app.config.js должен быть как, 

angular
.module("myApp")
.config(function($routeProvider) {
$routeProvider
.when("/red", {
    templateUrl : "red/red.template.html",
    controller: "redController"
})
.when("/blue", {
    templateUrl : "blue/blue.template.html"
});
});

и измените порядок следующим образом, 

<script src="red/red.module.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="red/red.component.js"></script>

Измените red.component.js следующим образом 

angular.module('red')
.component('red',{
templateUrl: 
'red/red.template.html',
})
.controller("redController",function($scope)
{
$scope.msg ="This is red";
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...