Question

我是AngularJs的新手，当我尝试使用Angular的1.4.9而不是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's $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>

Answer 1

您正在错误地引用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 Example。希望这有助于澄清一些事情。

AngularJS - 从1.2.9迁移到1.4.9时出错

1 个答案: