如何正確地將模塊加載到angularJS中

Question

我的angularjs應用程序具有以下布局，但無法解決如何向代碼中添加新模塊/第三方模塊的問題。 我正在使用路由來加載內容。

我想加載ng-imgcrop來裁剪一些圖像。 例子看起來很簡單，但我一定有點傻。

這是我的布局的工作方式。 最重要的html是：（我已經刪除了所有無用的東西）

<!DOCTYPE html>
<html lang="en" ng-app="phonecatApp" ng-controller="ApplicationController">
    <head>
        <script src="scripts/jquery.min.js"      type="text/javascript"></script>
        <script src="bower_components/angular/angular.js"></script>
        <script src="bower_components/angular-route/angular-route.js"></script>
        <script type='text/javascript' src="js/ng-img-crop.js"></script>
        <!-- AngularJS -->
        <script src="js/app.js"></script>
        <script src="js/controllers.js"></script>
        <!-- Controllers -->
        <script type="text/javascript" src="controllers/application.js"></script>
        <script type="text/javascript" src="controllers/index.js"></script>
        <script type="text/javascript" src="controllers/picture.js"></script>
    </head>
    <body>
            <div ng-view></div>
    </body>
</html>

頁面由controllers.js加載

angular.module('phonecatApp', ['ngRoute']).config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
             when('/picture/', {
                templateUrl: 'views/picture.html',
                controller: 'PictureController'
            }).
            otherwise({
                templateUrl: 'views/login.html',
                controller: 'LoginController'
            });
    }]);

我嘗試為我的picture.js圖片控制器復制示例：

 angular.module('phonecatApp', ['ngImgCrop']).controller('PictureController', function($scope, $http, $location) {
    $scope.thisController = 'PictureController';
    $scope.myImage='';
    $scope.myCroppedImage='';

    var handleFileSelect=function(evt) {
      var file=evt.currentTarget.files[0];
      var reader = new FileReader();
      reader.onload = function (evt) {
        $scope.$apply(function($scope){
          $scope.myImage=evt.target.result;
        });
      };
      reader.readAsDataURL(file);
    };
    angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
});

但是我得到以下錯誤：

 Error: [ng:areq] Argument 'ApplicationController' is not a function, got undefined
http://errors.angularjs.org/1.3.0/ng/areq?p0=ApplicationController&p1=not%20a%20function%2C%20got%20undefined
    at http://sssss/bower_components/angular/angular.js:80:12
    at assertArg (http://sssss/bower_components/angular/angular.js:1610:11)
    at assertArgFn (http://sssss/bower_components/angular/angular.js:1620:3)
    at http://sssss/bower_components/angular/angular.js:8319:9
    at http://sssss/bower_components/angular/angular.js:7496:34
    at forEach (http://sssss_components/angular/angular.js:343:20)
    at nodeLinkFn (http://sssss/bower_components/angular/angular.js:7483:11)
    at compositeLinkFn (http://sssss/bower_components/angular/angular.js:6991:13)
    at publicLinkFn (http://sssss/bower_components/angular/angular.js:6870:30)
    at http://sssss/bower_components/angular/angular.js:1489:27

如果我將以下行添加到ApplicationController而不是圖片，則不會出現任何錯誤，但不會加載任何路由。

angular.module('phonecatApp', ['ngImgCrop']).controller('ApplicationController', function($scope, $location) {

});

Answer 1

由於您可以在app.js中編寫多個控制器。 根據此演示修改您的代碼

var myApp = angular.module('phonecatApp', ['ngRoute', 'ngImgCrop']).config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
    when('/picture/', {
      templateUrl: 'views/picture.html',
      controller: 'PictureController'
    }).
    otherwise({
      templateUrl: 'views/login.html',
      controller: 'LoginController'
    });
  }
]);



var pictureController = function($scope) {

  $scope.myImage = '';
  $scope.myCroppedImage = '';

  var handleFileSelect = function(evt) {
    var file = evt.currentTarget.files[0];
    var reader = new FileReader();
    reader.onload = function(evt) {
      $scope.$apply(function($scope) {
        $scope.myImage = evt.target.result;
      });
    };
    reader.readAsDataURL(file);
  };
  angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect);
}

myApp.controller('pictureController ', pictureController );

如何正確地將模塊加載到angularJS中

問題描述

1 個解決方案

解決方案1
0 2014-11-03 17:04:01

如何正確地將模塊加載到angularJS中

問題描述

1 個解決方案

解決方案1 0 2014-11-03 17:04:01

解決方案1
0 2014-11-03 17:04:01