[英]Error: $injector:modulerr Module in angular when loading an image
I'm trying to create an carousal from the scratch using Angular.我正在尝试使用 Angular 从头开始创建一个 carousal。 So my html code relevant to the issue is as follows.
所以我与问题相关的html代码如下。
<div id = "section1" class = "" ng-app = "sliderApp">
<div class = "sec1_slider" ng-controller = "app">
<div class = "slider_image">
<img ng-src="{{ imageUrlProfile }}" class = "sm_icon">
And I have imported the relevant APIs.我已经导入了相关的 API。
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"></script>
My Angular Code is as follows.我的角度代码如下。
var application = angular.module('sliderApp', ['ngRoute']);
application.controller('app', function($rootScope, $scope) {
$rootScope.imageUrlProfile = 'slider-img1.png';
});
In the landing page, the image i defined in angular code 'slider-img1.png' is not loading and throws the following error in browser console.在登录页面中,我在角度代码“slider-img1.png”中定义的图像未加载并在浏览器控制台中引发以下错误。
angular.js:4073 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.5/ $injector/modulerr?p0=sliderApp&p1=Refere…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.5%2Fangular.min.js%3A16%3A463) angular.js:4073 未捕获的错误:[$injector:modulerr] http://errors.angularjs.org/1.3.5/ $injector/modulerr?p0=sliderApp&p1=Refere...ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1 .3.5%2Fangular.min.js%3A16%3A463)
Click here to see the link to the error. 单击此处查看错误链接。
what should I do to load the image ?我应该怎么做才能加载图像?
The issue is that in your config
block, you are specifying variables for controllers.问题是在您的
config
块中,您正在为控制器指定变量。 But the variables haven't been declared or assigned values:但变量尚未声明或赋值:
Take a look at the Plnkr: http://plnkr.co/edit/2kfnAMja5BWgKTWU9FHt?p=preview看看 Plnkr: http ://plnkr.co/edit/2kfnAMja5BWgKTWU9FHt?p=preview
var application = angular.module('sliderApp', ['ngRoute']);
application.controller('app', function($rootScope, $scope) {
$rootScope.imageUrlProfile = 'http://www.amaraholisticwellbeing.com/wp-content/uploads/2015/01/Fall-beautiful-nature-22666764-900-562.jpg';
});
application.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/option1', {templateUrl: 'tab1.html'/**, controller: ProfileCtrl**/}).
when('/option2', {templateUrl: 'tab2.html'/**, controller: WorkCtrl**/}).
when('/option3', {templateUrl: 'tab3.html' /**,controller: EduCtrl**/}).
when('/', {templateUrl: 'openingTab.html'}).
otherwise({redirectTo: '/'});
}]);
You can see where I have commented out the controllers.你可以看到我在哪里注释掉了控制器。 Those variables don't exist in the script given with your fiddle.
这些变量在您的小提琴给出的脚本中不存在。 I chose to use Plnkr because JSFiddle has issues when trying to send normal http requests (https is fine) for the images.
我选择使用Plnkr是因为 JSFiddle 在尝试为图像发送正常的 http 请求(https 很好)时出现问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.