I am using ng-img-crop in angular. After installing it by "bower install --save ngImgCrop" and injecting the dependency when I run it by grunt command, I got an error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module mean due to:
Error: [$injector:modulerr] Failed to instantiate module ngImgCrop due to:
Error: [$injector:nomod] Module 'ngImgCrop' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I followed through the steps mentioned at https://www.npmjs.com/package/ng-img-crop
the code is as follows:
home.client.view.html:
<script src="public\lib\ngImgCrop\source\js\ng-img-crop.js"></script>
<link rel="stylesheet" type="text/css" href="public\lib\ngImgCrop\source\scss\ng-img-crop.css">
<style>
.cropArea {
background: #E4E4E4;
overflow: hidden;
width:500px;
height:350px;
}
</style>
<body ng-app="core" ng-controller="Ctrl">
<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
<img-crop image="myImage" result-image="myCroppedImage"></img-crop>
</div>
<div>Cropped Image:</div>
<div><img src="myCroppedImage" /></div>
</body>
home.client.controller.js
angular.module('core', ['ngImgCrop'])
.controller('Ctrl', 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);
});
Please help me in this.
Thanks
I think you should be using the the js file in the compile folder rather than the source folder
ie public/lib/ngImgCrop/compile/unminified/ng-img-crop.js
Related
I am trying to run an angularJS example in jsfiddle (ofcourse learning purpose) getting below errors in console.
When I add this cdn for angular compatibility:
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js
I seen below error.
VM141 angular.min.js:6 Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=myApp&p1=Error%3A%2…oudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.6%2Fangular.min.js%3A21%3A19)
When I remove the external source, seen below error:
VM93:45 Uncaught ReferenceError: angular is not defined
Concern:
Do I need to add external source for angular example? If yes then what will be the correct way to add external resource. (like, search a cdn for that api and add).
Here's the code snippet:
html:
<div ng-app="myApp" ng-controller="myCtrl">
Your name: <input type="text" ng-model="name" ng-click="displayName();">
Hello {{$scope.name}}
</div>
js:
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope){
$scope.displayName = function(){
alert("In right place");
$scope.name = "Name";
}
});
Here's the fiddle: https://jsfiddle.net/supdas87/my1juu4e/2/
I've added angular-1.0.1.js file to external resources (you just have to copy and paste the URL), and changed {{$scope.name}} by {{name}} on your HTML file. You do not have to write $scope when you use {{ }}, it is implicit.
Here is a working Fiddle based on the code you provided.
PS: I've added Angular 1.0.1, but of course you can use the version of Angular you want. You can see allreleases here.
HTML
<div ng-app="myApp" ng-controller="myCtrl">
Your name: <input type="text" ng-model="name" ng-click="displayName();">
Hello {{name}}
</div>
JavaScript
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.displayName = function(){
alert("In right place");
$scope.name = "Name";
}
});
My grunt ngdocs task below.
`
ngdocs: {
options: {
dest: 'site/docs',
html5Mode: false,
startPage: '/api',
scripts: [
'bower_components/angular/angular.js'
'bower_components/angular-animate/angular-animate.js',
'bower_components/angular-material/angular-material.js'
]
},
api: {
src: ['app/**/*.js','!app/**/*-spec.js','app/index.ngdoc'],
title: 'Docs'
}
}
`
My ngdoc example block copied from angular documentation. I just added 'ngMaterial' as a dependency.
`
<example module="sample">
<file name="index.html">
<div ng-controller="ExampleController">
<form novalidate>
<h3>User 1</h3>
Name: <input type="text" ng-model="user1.name">
Age: <input type="number" ng-model="user1.age">
<h3>User 2</h3>
Name: <input type="text" ng-model="user2.name">
Age: <input type="number" ng-model="user2.age">
<div>
<br/>
<input type="button" value="Compare" ng-click="compare()">
</div>
User 1: <pre>{{user1 | json}}</pre>
User 2: <pre>{{user2 | json}}</pre>
Equal: <pre>{{result}}</pre>
</form>
</div>
</file>
<file name="script.js">
angular.module('sample', ['ngMaterial']).controller('ExampleController', ['$scope', function($scope) {
$scope.user1 = {};
$scope.user2 = {};
$scope.result;
$scope.compare = function() {
$scope.result = angular.equals($scope.user1, $scope.user2);
};
}]);
</file>
</example>
`
Below is the error that I get.
`
angular.js:12330 Error: [$injector:modulerr] Failed to instantiate module sample due to:
Error: [$injector:modulerr] Failed to instantiate module ngMaterial due to:
Error: [$injector:modulerr] Failed to instantiate module material.components.fabSpeedDial due to:
TypeError: Cannot read property 'apply' of undefined
`
If i remove 'ngMaterial' as depenedency, this example block works absolutely fine.
I am using Angular 1.4.3 and Angular-material 1.0.5. Please help.
I am trying to make a simple project where i want to populate the section with ng-view directive and i keep getting the following error:
I also included in index.html the angular files:
1-angular min js
2-angular-route min js
3-angular-resource min js
Error: $injector:modulerr Module Error Failed to instantiate module
booksInventoryApp due to: Error: [$injector:modulerr]
How can i fix this?
My code is:
index.html
<!DOCTYPE html>
<html ng-app="booksInventoryApp">
<body>
<section ng-view></section>
<script src="js/index.js"></script>
</body>
</html>
index.js
var app = angular.module('booksInventoryApp', ['booksInventoryApp.bsm','booksInventoryApp.allBooks']);
//route provider
app.config(['$routeProvider', function($routeProvider){
$routeProvider
// route for the index page
.when('/', {
templateUrl : '../allBooks.html',
controller : 'booksCtrl'
})
// route for the best selling month page
.when('/bsm/:id', {
templateUrl : 'bsm.html',
controller : 'bsmCtrl'
})
// route for the root
.otherwise({
redirectTo : '/'
});
}]);
bsm.js
var app = angular.module('booksInventoryApp.bsm', []);
app.controller('bsmCtrl', function($scope) {
$scope.book = "Bla Bla";
});
bsm.html
<section class="container">
{{book}}
</section>
allBooks.js
var app = angular.module('booksInventoryApp.allBooks', []);
// controllers
app.controller('booksCtrl', function($scope, $http) {
$http.get("https://whispering-woodland-9020.herokuapp.com/getAllBooks")
.success(function(data) {
$scope.data = data;
});
});
allBooks.html
<section class="row">
<section class="col-sm-6 col-md-2" ng-repeat="book in data.books">
<section class="thumbnail">
<img ng-src="{{book.url}}">
<section class="caption">
<h3>{{book.name}}</h3>
<p>Author: {{book.author}}</p>
<p>ID: <span class="badge">{{book.id}}</span></p>
<p>Available: <span class="badge">{{book.amount}}</span></p>
<p>Price: <span class="badge">${{book.price}}</span></p>
<p><a ng-src="#/bsm/{{book.id}}"><button class="btn btn-info">Best selling month</button></a></p>
</section>
</section>
</section>
</section>
You need to add ngRoute module in your app and also the script reference of the angular-route.min.js write after the angular.js, Also you need to add bsm.js and allBooks.js in your html after above two mentioned file has loaded.
Code
var app = angular.module('booksInventoryApp', [
'booksInventoryApp.bsm',
'booksInventoryApp.allBooks',
'ngRoute'
]);
Note
Both the version of angular.js & angular.route.js should be the
same otherwise it will show some wierd issue. Preferred version is 1.3.15
In your index.html page you not included bsm.js and allBooks.js files which contains the required dependencies of your app.
Since you have specified the dependency of 'booksInventoryApp.bsm','booksInventoryApp.allBooks' in your app angular is not able to find those modules and hence you are getting that error.
Also you need to include angular route script reference and ngRoute in your dependencies because you are using angular routing in your app.
var app = angular.module('booksInventoryApp', ['ngRoute', 'booksInventoryApp.bsm', 'booksInventoryApp.allBooks']);
I'm quite new to AngularJS, I'm struggling with following problem for a while now:
I want to use the resolve functionality of the routeProvider to load some data via a service.
But always end up with this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module footballmvc due to:
Error: [$injector:modulerr] Failed to instantiate module teams due to:
Error: [$injector:unpr] Unknown provider: Teams
This is my code:
index.html
...
<script src="app/app.js"></script>
<script src="app/config.js"></script>
<script src="app/services/divisionService.js"></script>
<script src="app/services/teamService.js"></script>
<script src="app/teams/teamControllers.js"></script>
<script src="app/divisions/divisionControllers.js"></script>
...
...
<body ng-app="footballmvc">
<div class="container-fluid">
<div class="row" id="header">
<h1>{{title}}</h1>
</div>
<div class="row">
<div id="menu" class="col-lg-2">
<ul class="list-unstyled">
<li><h3>Divisions</h3></li>
<li><h3>Teams</h3></li>
</ul>
</div>
<div id="content" class="col-lg-10" ng-view>
<!-- Content goes here! -->
</div>
</div>
</div>
</body>
...
app.js
var app = angular.module('footballmvc', ['config','ngRoute','teams','divisions'])
...
teamControllers.js
angular.module('teams', [])
.config(function($routeProvider, Teams, Divisions) {
$routeProvider
.when('/teams', {
controller:'TeamListCtrl',
templateUrl:'app/teams/list.tpl.html',
resolve: {
teams : function(Teams) {
return Teams.query();
}
}
})
...
teamService.js
angular.module('teams', [])
.factory('Teams', function($resource, config){
return $resource(config.MONGO_URL + 'teams/:id', {apiKey: config.MONGO_API_KEY, id:'#_id.$oid'});
});
***UPDATE: SOLUTION***
Finally found the solution. Clue is to pass the dependency to the service only to the resolve function and not to the config function:
config(function ($routeProvider) {
$routeProvider
.when('/teams', {
controller: 'TeamListCtrl',
templateUrl: 'app/teams/list.tpl.html',
resolve: {
teams: function (Teams) {
return Teams.query();
}
}
})
You could try to load the dependent scripts first. Namely, 'config','ngRoute','teams','divisions' before you try to instantiate app module.
Also, you are defining twice the teams module.
angular.module('teams', [])
Should only occur once in your code. When you want to reference that module later on, use
angular.module('teams')
.config(...)
This usually occurs when you have a missing script include on your index.html file or a mis match between you file name and the controller/service/module name. Go back and double check your file names, file paths, and the actual angular names.
That is angular telling you that it can't find the footballmvc module. The script is likely not included on the page, or there is some syntactical error somewhere preventing the module from being loaded/injected. Make sure your script paths are correct and there are no syntax errors before the footballmvc module is instanced in the DOM.
I am learning routing with angular java script ,
this is my index.html
<html lang="en" ng-app="eventsApp">
.....
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>Create Event</li>
</ul>
</div>
</div>
<ng-view></ng-view>
</div>
This is my app.js,
var eventsApp = angular.module('eventsApp', ['eventsApp', 'ngRoute'])
eventsApp.config(function($routeProvider) {
$routeProvider.when('/newEvent',
{
templateUrl:'templates/NewEvent.html',
controller: 'EditEventController'
}).....
When i click on the button it do nothing and also doesn't load new event .
and get this error
"Error: [$injector:modulerr] Failed to instantiate module eventsApp due to:"
here is the controller
'use strict';
eventsApp.controller('EditEventController',
function EditEventController($scope, eventData) {
$scope.event = {};
$scope.saveEvent = function (event, form) {
if(form.$valid) {
eventData.save(event);
}
};
$scope.cancelEdit = function () {
window.location = "/EventDetails.html";
};
}
);
One of the things I'm noticing looks wrong is that you're passing in eventsApp as a dependency of itself.
var eventsApp = angular.module('eventsApp', ['eventsApp', 'ngRoute'])
Should be:
var eventsApp = angular.module('eventsApp', ['ngRoute'])
Secondly, you may want to check that you've included ngRoute into the page:
See installation instructions here: http://docs.angularjs.org/api/ngRoute
Check out a working example on Plunkr:
http://plnkr.co/edit/VZgTnBvi0Q8qtcpOUTx0