Отдельный угловой контроллер JS Результат по ошибке

Question

Отдельный угловой контроллер JS Результат по ошибке

0

Я знаю, что это было задано в прошлом в следующих вопросах: Как создать отдельные файлы контроллера AngularJS? Отдельные контроллеры AngularJS для отдельных файлов

Но, тем не менее, я не могу исправить эту проблему.

У меня есть файл со следующим содержимым:

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
{!! HTML::script('libraries/admin/plugins/jQuery/jQuery-2.1.4.min.js') !!}
{!! HTML::script('libraries/JS/jquery-ui-1.11.1/jquery-ui.min.js') !!}

<!-- Bootstrap 3.3.5 -->
{!! HTML::script('libraries/admin/bootstrap/js/bootstrap.min.js') !!}
{!! HTML::script('libraries/JS/parsley/parsley.2.0.7.min.js') !!}
{!! HTML::script('libraries/JS/sweetalert2-master/dist/sweetalert2.min.js') !!}
{!! HTML::script('libraries/JS/angularjs/angular-1.4.8.min.js') !!}
{!! HTML::script('libraries/JS/angularjs/angular-1.4.8-route.min.js') !!}
{!! HTML::script('libraries/MyAngular/app.js') !!
  </head>
  <body>
<div class="content-wrapper"  ng-controller="mainController" ng-view>    
</div><!-- ./wrapper -->
</body>
</html>

Приложение app.js содержит следующий код:

var app = angular.module('app',['ngRoute'])
    .config(function($interpolateProvider){
        $interpolateProvider.startSymbol('<%');
        $interpolateProvider.endSymbol('%>');
    });

app.config(function($routeProvider){
    $routeProvider

        .when('/',{
            templateUrl: '/admin/pages/Dashboard',
            controler :'mainController'
        })
        .when("/index",{
            templateUrl: '/admin/pages/Dashboard',
            controler :'mainController'
        })
        .when("/activateLink",{
            templateUrl:'/admin/pages/verifyAccount',
            controller:'mainController'
        });

});

app.controller('mainController',['$scope','$templateCache','$route','$location',function($scope, $templateCache,$route,$location) {
        // create a message to display in our view
        //$scope.message = 'OK';
        //$templateCache.removeAll();
        $scope.clear = function(){
            //console.log("clicked");
            //console.log($route.current.originalPath);
            $( "#ActiveWarning" ).show();
            $templateCache.removeAll();
            $route.reload();
            $location.path( $route.current);
        }

}]);

Страница /admin/pages/verifyAccount содержит следующий скрипт:

<div ng-controller="verifyAccountController"><% message %></div>
<script>
angular.module('app').controller('verifyAccountController', function($scope) {
    $scope.message="Test!!!!";
});
</script>

Проблема в том, что я получаю следующую ошибку:

Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=verifyacc&p1=not%20a%20function%2C%20got%20undefined
G/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:6:416
qb@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:22:131
Qa@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:22:218
Xe/this.$get</<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:80:210
w@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:60:177
D@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:61:30
g@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:55:105
g@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:55:1
g@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:55:1
K/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:54:249
ngViewFillContentFactory/<.link@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:985:7
ea@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:73:293
D@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:62:190
g@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:55:105
K/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:54:249
R/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:56:79
k@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:60:377
update@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:935:25
lf/this.$get</r.prototype.$broadcast@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:136:157
commitRoute/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:619:15
f/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:119:129
lf/this.$get</r.prototype.$eval@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:133:309
lf/this.$get</r.prototype.$digest@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:130:404
lf/this.$get</r.prototype.$apply@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:134:76
g@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:87:442
T@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:92:50
Uf/</w.onload@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:93:78

<div class="content-wrapper ng-scope" ng-controller="mainController" ng-view="">

Однако, если я добавлю контроллер "verifyAccountController" в app.js вместо страницы "/admin/pages/verifyAccount", он отлично работает.

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

Например, коды, которые я пробовал:

/*
 angular.module('app').controller('verifyAccountController',['$scope',function($scope) {
      $scope.message = "TEST!!";
    }]);

*/
/*
angular.module('app',['ngRoute'])
.controller('verifyAccountController',verifyAccountController);

verifyAccountController.$inject = ['$scope'];

function verifyAccountController($scope){
  $scope.message="Test!!!!";
}
*/

/*
var app = angular.module('app', []);
app.controller('verifyAccountController', function($scope) {
    $scope.message="Test!!!!";
});

angular.module('app', []).controller('verifyAccountController', function($scope) {
    $scope.message="Test!!!!";
});
*/

Как я могу решить эту проблему? Благодарю.

ОБНОВИТЬ

Отладка с несжатыми угловыми:

Error: [ng:areq] Argument 'verifyAccountController' is not a function, got undefined
http://errors.angularjs.org/1.4.9/ng/areq?p0=verifyAccountController&p1=not%20a%20function%2C%20got%20undefined
minErr/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:68:12
assertArg@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:1816:1
assertArgFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:1826:1
$ControllerProvider/this.$get</<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:9356:9
setupControllers@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:8426:36
nodeLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:8468:32
compositeLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7929:13
compositeLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7932:13
compositeLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7932:13
publicLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7809:30
ngViewFillContentFactory/<.link@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:985:7
invokeLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:9039:9
nodeLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:8533:1
compositeLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7929:13
publicLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7809:30
createBoundTranscludeFn/boundTranscludeFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7947:1
controllersBoundTransclude@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:8560:18
update@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:935:25
$RootScopeProvider/this.$get</Scope.prototype.$broadcast@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:16573:15
commitRoute/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:619:15
processQueue@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:14991:28
scheduleProcessQueue/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:15007:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:16251:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:16069:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:16359:13
done@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:10791:36
completeRequest@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:10989:7
requestLoaded@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:10930:1

<div class="content-wrapper ng-scope" ng-controller="mainController" ng-view="">

Kheshav Sewnundun 25 янв. 2016, в 12:49

Источник

0

Устранение неполадок в минимизированных файлах Angular JS - это кошмар. Если я не готов развернуть код, я не использую angular.min.js.
cst1992 25 янв. 2016, в 11:51
0

Кстати, ошибка, которую вы получаете: «<что-то> не является функцией; получил неопределенный»
cst1992 25 янв. 2016, в 11:56
0

Я не вижу, чтобы вы включили файл "/ admin / pages / verifyAccount" в вашу страницу index.html или default.html. Вставьте этот файл в вашу страницу index.html или default.html. это будет работать!
rishikesh tadaka 25 янв. 2016, в 11:57
0

/admin/pages/verifyAccount - это маршрут маршрута. Laravel обрабатывает этот маршрут и отображает маршрут HTML и angularJs, помещенный в <div class="content-wrapper" ng-controller="mainController" ng-view>
Kheshav Sewnundun 25 янв. 2016, в 11:59
0

У вас также есть опечатки в вашем коде app.js. Два, что я могу заметить, это один 'l' в ваших контроллерах app.config .
cst1992 25 янв. 2016, в 12:04

Показать ещё 3 комментария

Теги:

javascript

html

angularjs

2 ответа

1

Поскольку у вас уже есть оригинальный app.js, он работает. Но не тогда, когда контроллер в своем собственном файле. Вы также должны включить новый файл в теги <script></script>.

Кроме того, файл на url /admin/pages/verifyAccount не должен содержать сценарий; это шаблон и должен содержать только HTML-код. Используйте файл *.js для дополнительных контроллеров и включите их в основной файл HTML.

cst1992 25 янв. 2016, в 09:59

0

Разделение шаблона и контроллера решило проблему спасибо :)
Kheshav Sewnundun 25 янв. 2016, в 12:35
0

Рад, что смог помочь.
cst1992 25 янв. 2016, в 12:37

Ещё вопросы

Устранение неполадок в минимизированных файлах Angular JS - это кошмар. Если я не готов развернуть код, я не использую angular.min.js.
Кстати, ошибка, которую вы получаете: «<что-то> не является функцией; получил неопределенный»
Я не вижу, чтобы вы включили файл "/ admin / pages / verifyAccount" в вашу страницу index.html или default.html. Вставьте этот файл в вашу страницу index.html или default.html. это будет работать!
/admin/pages/verifyAccount - это маршрут маршрута. Laravel обрабатывает этот маршрут и отображает маршрут HTML и angularJs, помещенный в <div class="content-wrapper" ng-controller="mainController" ng-view>
У вас также есть опечатки в вашем коде app.js. Два, что я могу заметить, это один 'l' в ваших контроллерах app.config .
Разделение шаблона и контроллера решило проблему спасибо :)

G. Ghez · Accepted Answer · 2016-01-25T09-40-00.000Z

Чтобы получить угловой модуль, чтобы использовать его для регистрации контроллера, вы должны использовать angular.module('app') используемый для извлечения ранее зарегистрированного модуля, а не angular.module('app', [...]) который используется для создания модуля.
Ассоциация контроллеров, которую вы создали, не очень понятна. Вы должны выбрать либо глобальный контроллер с использованием ng-controller="..." синтаксиса в вашем основном файле HTML, либо путем связывания контроллера и представления в конфигурации $routeProvider.
Избегайте смешивания описания описания (HTML) и контроллера (JS) в одном файле. Создайте отдельный файл для контроллера или добавьте его в app.js с помощью app.controller('someController',[...]) или angular.module('app').controller('someController', [...])

Разделение шаблона и контроллера решают проблему спасибо :)