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.
Related
I am having a few issues getting my head around why this is not working:
template
<div>
<ul>
<li ng-repeat="x in get">
{{ x.name }}
</li>
</ul>
</div>
controller
angular.module('app')
.controller('SubstancesCtrl', function ($scope) {
$scope.get = [{name: "LOL"}];
});
routes
angular.module('app')
.config(function ($routeProvider) {
$routeProvider
.when('/', { controller: 'PostsCtrl', templateUrl: '/templates/posts.html' })
.when('/register', { controller: 'RegisterCtrl', templateUrl: '/templates/register.html' })
.when('/login', { controller: 'LoginCtrl', templateUrl: '/templates/login.html' })
.when('/substances', { controller: 'SubstancesCtrl', templateUrl: '/templates/substances.html'})
});
index.html
<!DOCTYPE html>
<html ng-app='app'>
<head>
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='/app.css'>
</head>
<body ng-controller='ApplicationCtrl'>
<nav class='navbar navbar-default'>
<div class='container'>
<ul class='nav navbar-nav'>
<li><a href='/#/'>Posts</a></li>
<li><a href='/#/register'>Register</a></li>
<li><a href='/#/login'>Login</a></li>
<li>Substances</li>
</ul>
<p ng-if='currentUser' class='navbar-text navbar-right'>
Signed in as {{currentUser.username}}
</p>
</div>
</nav>
<div class='container' ng-view></div>
<script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular-route.js'></script>
<script src='/app.js'></script>
</body>
</html>
I can see that the template is being replaced by the ng-view directive however the get variable is not being treated in the manner i thought it would: i thought i would get one list item node with the value of LOL
You angular module has not been created, You should declare your module in app.js. As you are using angular routing you need to include its module in your app module.
angular.module('app',['ngRoute'])
Also you need to update your Angular to stable versions 1.4.4 is stable one, because you are using 1.3.0-rc.4 in which rc stands for release candidate which is pre-release version, which may have bug in most of the cases. Thats why I told you to go for stable version of AngularJS. You could also use close stable version which is 1.3.14
Additionally your template has <li ng-repeat="x in get()"> but get function is not defined in the scope, resultant would be nothing would be render on the UI.
angular.module('app')
.controller('SubstancesCtrl', function ($scope) {
$scope.lol = "LOL";
$scope.get = function(){
//write a code here which will return list
//so that ng-repeat will loop through the list
//& will show that data on HTML
//something like below
return {"name": "LOL"}; //in real case there must be something different object to return.
}
});
Alexis King was quite correct in that there were 3 very embarrassing issues with the code, it should have looked like this ( -_- )
template
<div>
<ul>
<li ng-repeat="x in get">
{{ x.name }}
</li>
</ul>
</div>
controller
angular.module('app')
.controller('SubstancesCtrl', function ($scope) {
$scope.get = [{name: "LOL"}];
});
routes were exactly the same.
The biggest issue however was in my gulp script which failed to pick up changes in these new files, I have rewrote the build script to ensure all files from the directories containing these files now are watched and all changes are reflected in the browser.
My excuse: need more coffee.
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 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
I am using ng-click to call a function with arguments I get from the $scope. Unfortunately either are the arguments not processed from angular or I get this error:
Error: [$parse:syntax] Syntax Error: Token ':' not a primary expression at column 1 of the expression [:notification] starting at [:notification].
HTML snippet that results in error:
<div ng-click="goToNotif({{notification.id}})"></div>
HTML snippet not being processed from angular:
<div ng-click="goToNotif(notification.id)"></div>
IMPORTANT: notification is parsed from a repeat
<div(ng-repeat="notification in notifications")></div>
Here is the code for index.html, define "notifications" seperately -
<div ng-app="MyApp">
<div ng-controller="MainCtrl">
<div(ng-repeat="notification in notifications")>
<div ng-click="go(notification.id)"></div>
</div>
</div>
</div>
In main.js -
var app = angular.module('MyApp', []);
app.controller('MainCtrl', function($scope) {
$scope.go = function() {
//write code here.
}
});
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