AngularJS - Ошибка при переходе с 1.2.9 на 1.4.9

Question

AngularJS - Ошибка при переходе с 1.2.9 на 1.4.9

0

Я новичок в AngularJs, и когда я пытаюсь использовать версию 1.4.9 из Angular вместо 1.2.9 (я использовал без проблем), я получаю ошибку. Я читал о необходимости объявить новую функцию таким образом:

    angular.module('scotchApp', []).controller('prenotazioneController', [function ($scope) {
    //$scope.message = 'Pagina Delle info!!!';//
}]);

вместо:

function getTask($scope, $http, Base64) {
//do something
};

Но у меня всегда была эта ошибка:

Ошибка: ng: areq Плохой аргумент --- Аргумент 'mainController' не является функцией, получил неопределенный

Я думаю, что ошибка относится к этому коду, но я уже изменил способ объявления этой функции.

В JS:

    // create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);

// configure our routes
scotchApp.config(function ($routeProvider) {
    $routeProvider

    // route for the home page
        .when('/', {
        templateUrl: 'view/home.html',
        controller: 'mainController'
    })

    // route for the about page
    .when('/prenotazione', {
        templateUrl: 'view/prenotazione.html',
        controller: 'prenotazioneController'
    })

    .when('/login', {
        templateUrl: 'view/login.html',
        controller: 'loginController'
    });
});

// create the controller and inject Angular $scope
angular
    .module('scotchApp', [])
    .controller('mainController', [function ($scope) {
        // create a message to display in our view
         $scope.message = 'Vai alla Prenotazione';
    }]);

angular.module('scotchApp', []).controller('prenotazioneController', [function ($scope) {
    /*   $scope.message = 'Pagina Delle info!!!';*/
}]);

angular.module('scotchApp', []).controller('loginController', [function ($scope) {
    $scope.message = '*Necessario per eseguire una prenotazione';
}]);

В HTML:

<html ng-app="scotchApp">

<head>
    <!-- SCROLLS -->
    <link href='https://fonts.googleapis.com/css?family=PT+Sans:400italic,400,700,700italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
    <link href="style.css" rel="stylesheet" type="text/css">
<!-- SPELLS -->

<script src="//code.angularjs.org/1.4.9/angular.min.js"></script>
<script src="//code.angularjs.org/1.4.9/angular-route.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="test.js"></script></head>

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                </button>

                <a class="navbar-brand">
                    <img class="hidden-xs" src="image/logo.png" alt="">
                    <img class="visible-xs" src="image/logo.png" alt="">
                </a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#/"><i class="fa fa-home"></i>Home</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div id="main">

        <!-- angular templating -->
        <!-- this is where content will be injected -->
        <div ng-view></div>

    </div>
</div>

Luke 25 янв. 2016, в 13:41

Источник

Теги:

javascript

html

angularjs

1 ответ

Ещё вопросы

TheLazyChap · Accepted Answer · 2016-01-25T10-23-00.000Z

Вы неправильно ссылаетесь на модуль app:

Ваш код:

angular.module('scotchApp', [])
    .controller(...)

Используя angular.module('scotchApp', []) с помощью скобок [], вы по существу переписываете свой модуль приложения каждый раз.

Измените его так:

angular
   .module('scotchApp')
   .controller(...)

Вам нужно только создать модуль приложения один раз, а затем ссылаться на него.

Создание модуля:

angular.module("app", []); // creates a module.

Ссылка на модуль:

angular.module("app");    // reference a module.

Ниже приведен простой пример:

(function () {

    var app = angular.module("app", []);

    app.controller("MainController", MainController);

    MainController.$inject = ["$http"];

    function MainController($http) {

    }

})();

Вот пример Plnkr, использующий ваш стиль кода. Надеюсь, это поможет и прояснит некоторые вещи.

Спасибо за ответ. Я пытался удалить [] из angular.module('scotchApp', []) но та же ошибка появляется ... Я также пытался использовать это: (function () { angular .module("scotchApp") .controller("mainController", mainController); mainController.$inject = ["$scope"]; function mainController($scope) { $scope.message = 'Vai alla Prenotazione'; }; }); но не повезло.
@ Люк, у тебя есть где-нибудь код, который мы можем посмотреть, или это частный код?
@ Люк, я пошел вперед и сделал пример для тебя. Надеюсь, это поможет.
Я думаю, что вы можете увидеть здесь. Спасибо! jsfiddle.net/ub0onkxf/1
Спасибо тебе за твой пункр! Да, это помогает намного лучше понять! Они многое изменили! Но если я вместо этого (например): scotchApp .controller("MainController", ["$scope", function($scope) { $scope.message = "Vai alla Prenotazione" ; }]); иметь это: .controller('InstanziateProcess', [function ($scope, $http, $window, Base64) {...} это будет: scotchApp .controller("InstanziateProcess", ["$scope", "$http", ""$window", "Base64", function($scope, $http, $window, Base64) {...}]); ;? Еще раз спасибо
@ Luke Да, вы правы, вы должны сообщить Angular service dependencies вы хотите внедрить, поэтому необходимо включить $scope и $http т. Д. Мой пример, показанный в ответе, использует руководство по стилю Джона Папы, поскольку оно довольно хорошо известно и уважаемо. Вот ссылка на него, угловая команда поддерживает его на этом. github.com/johnpapa/angular-styleguide
Еще раз спасибо! Я открыл новый Вопрос для другой проблемы, созданной после изменения кода, здесь: stackoverflow.com/questions/35011384/… . если вы можете посмотреть, это будет оценено.
@ Люк люди уже к этому, взгляните на их совет.