如何将模块正确加载到angularJS中
How to load modules in to angularJS correctnly
我的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) {
});
因为你可以在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并生成控制器和范围
- 如何通过jQueryUI AJAX加载AngularJS内容
- 动态加载AngularJS应用程序
- 刷新/重新加载angularjs自定义指令
- 异步加载AngularJS应用程序
- 使用NgInclude加载AngularJS组合指令模板
- 加载angularjs计时器加15分钟
- 使用jQuery加载AngularJS
- 无法在coffeescript中加载angularjs模块
- 从ASP MVC异步加载Angularjs(AJAX)并执行它们
- 如何在加载 AngularJS 元素后调用 JavaScript 函数
- Phantom 不会初始化/加载 Angularjs 控制器方法
- 加载 AngularJS 文件的正确顺序是什么
- 控制器的动态加载+angularjs中的工厂
- “间歇”;jqLite不支持通过选择器查找元素"当使用RequireJS加载AngularJS时
- 如何加载angularjs脚本文件
- 如何重命名或选择性加载angularJS
- 从html动态加载angularjs控制器
- 可以't加载AngularJS 2路由器
- 如何在不重新绘制绑定视图的情况下重新加载angularjs范围数据