Angularjs - $uibModal provider error - javascript

I'm trying to inject $uibModal into my project, however when the controller loads, I get the following error:
Error: [$injector:unpr] Unknown provider: $uibModalProvider <- $uibModal <- abilityListController
I'm using NuGet for my package management.
Angularjs: 1.4.8
Bootstrap: 3.3.6
Angular-Ui-Bootstrap: 0.14.3
Here's the relevant code:
Index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="scripts/angular.js"></script>
<script src="scripts/angular-ui/ui-bootstrap.js"></script>
<script src="app/app.js"></script>
<script src="app/homeController.js"></script>
<script src="app/abilityList/abilityListController.js"></script>
</head>
<body>
<div ng-app="tecApp">
<div ng-controller="homeController as vm">
</div>
<div ng-controller="abilityListController as vm" ng-if="true">
<div ng-include="'app/abilityList/abilityList.html'"></div>
</div>
</div>
</div>
</body>
</html>
app.js:
angular.module("tecApp", []);
AbilityListController.js:
angular
.module('tecApp')
.controller('abilityListController', AbilityListController);
AbilityListController.$inject = ['$uibModal'];
function AbilityListController($uibModal) {
var vm = {};
return vm;
}
I think I'm injecting incorrectly, but it might have to do with how i've included my source files.
I get no console errors aside from the one mentioned above.
I prefer this syntax for my angular code, so I'm hoping for a fix to my code rather than using ('controllername', ['$stuff', 'moreStuff']).
Thanks in advance for any help.

You should inject dependent module before you use it. Your code should be like this:
angular
.module('tecApp',['ui.bootstrap'])

I lost 3 hours today to figure out that "angular-bootstrap": "0.12.2" should now be "angular-ui-bootstrap": "1.1.2" in your package json.
I couldn't understand why version 1.1.2 was not found in angular-bootstrap ...
It now works like a charm !
Hope it helps ... :)

Inject ui.bootstrap module into your application module:
angular.module("tecApp", ["ui.bootstrap"])
Also you can use $modal (and maybe its even better) service from ui.bootstrap module instead of $uibModal

It worked for me. I had angularJS version 1.2.16. The compatible version of ui-bootstrap is 0.12.0. Need to google the compatible version always before using.

I try and solve my issue.
Install latest version of angular-bootstrap
npm install angular-bootstrap or bower install angular-bootstrap

Related

Issue with angular-route.min.js | Error Chrome Console [$injector:modulerr]

!!Total beginner here!!
I have run into an error - chrome console gives me an error regarding:
[$injector:modulerr]
The problem is that I have not installed angular-route.min.js which is what you're supposed to do in all angular versions after 1.2. My trouble began when I installed angular-route.min.js, put it in the same file as angular and my HTML files, referenced it in the code with <script src="angular-route.min.js"></script> but nothing happened.
I also put angular.module('app.js', ['ngRoute']); into my js file.
There are no typos in my code, I checked for those. On top of all that the console gives me an error saying angular-route.min.js was not found.
All help welcome, I have spent a long time googling but nothing came of it.
(function () {
'use strict';
angular.module('MSgApp', []);
controller:('MsgController', MsgController);
angular.module('app.js', ['ngRoute']);
MsgController.$inject = ['$scope'];
function MsgController($scope) {
$scope.name = "Chris";
$scope.stateOfBeing = "hungry";
$scope.sayMessage = function () {
return "chris likes to eat cookies";
};
$scope.feedChris = function () {
$scope.stateOfBeing = "fed";
};
}
})();
<!DOCTYPE html>
<html ng-app='DIApp'>
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="app.js"></script>
<title>custom attributes</title>
</head>
<body>
<div ng-app="app.js"></div>
<h1>expressions and interpolation</h1>
<div ng-controller='MsgController'>
{{name}} has a message for you: <br>
{{sayMessage()}}
<div>
<button ng-click="feedChris()">Feed chris</button>
<br>
<img ng-src="D:/stuff/coursera angular/chris_{{stateOfBeing}}.png">
</div>
</div>
</body>
</html>
Errors after unminified both angular and angular-route
As per StackOverflow --> Angular JS Uncaught Error: [$injector:modulerr]:
EDIT: This is what ultimately solved the issue and what Chris B did to make it work :
I have come across another code in the Coursera course and this one seems to be working after putting the three links from the answer by #ulmer-morozov into the head tag instead of referencing files on my pc. I guess that's it,
From Answer of #ulmer-morozov:
In development environments I recommend you to use not minified distributives. And all errors become more informative! Instead of angular.min.js, use angular.js.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js">
From Accepted Answer #Lauri Elias:
Try adding this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
From Answer of #Khanh TO:
Try adding:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js">
and:
angular.module('MyApp', ['ngRoute','ngResource']);
function TwitterCtrl($scope,$resource){
}
You should call angular.module only once with all dependencies because with your current code, you're creating a new MyApp module overwriting the previous one.
From angular documentation:
Beware that using angular.module('myModule', []) will create the
module myModule and overwrite any existing module named myModule. Use
angular.module('myModule') to retrieve an existing module.

Error: [$injector:nomod] when attempting to add 3rd party module to mean app.

I'm trying to add this: https://github.com/kuhnza/angular-google-places-autocomplete module to my mean app. I used bower to install, which included the following example.
<!DOCTYPE html>
<html ng-app="example">
<head lang="en">
<!-- Required dependencies -->
<script src="https://maps.googleapis.com/maps/api/js?&libraries=places"></script>
<script src="/lib/angular/angular.js"></script>
<!-- Google Places Autocomplete directive -->
<script src="/lib/angular-google-places-autocomplete/src/autocomplete.js"></script>
<script>
angular.module('example', ['google.places'])
// Setup a basic controller with a scope variable 'place'
.controller('MainCtrl', function ($scope) {
$scope.place = null;
});
</script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Basic Usage</h1>
<form class="form">
<input class="form-control" g-places-autocomplete ng-model="place"/>
</form>
<h5>Result:</h5>
<pre>{{place | json}}</pre>
</div>
</div>
</div>
</body>
</html>
When I run my app on localhost and type the url corresponding to the location of the example, everything works fine. But instead, if I copy and paste this code into view.html and follow a link to this file, the code is nonfunctional. Now, if I add 'google.places' to the var applicationModuleVendorDependencies array in config.js, I get the following error.
Uncaught Error: [$injector:modulerr] Failed to instantiate module borowr due to:
Error: [$injector:modulerr] Failed to instantiate module google.places due to:
Error: [$injector:nomod] Module 'google.places' 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.
What is the proper way to add 3rd party modules to a mean app?
Looks like you're on the right track, did you inject the dependency into the controller for that view?
I had the same problem when adding a 3rd party module to my mean app. Check this link: https://stackoverflow.com/a/36032008/6044269
That is how added ngDialog to my mean app, should be the same for you, except for the CSS files.
As far as i know this is the only way i manage to add 3rd party modules.

Angular Filter and NgAnimate conflict

I am using angular-filter and angular-animate together, because I need do a group by in ngRepeat, but when I try to run, I am getting a error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.5/$injector/modulerr?p0=SsrsToolApp&p1=Erro…udflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.5%2Fangular.min.js%3A37%3A180).
Testing I detected a possible conflict, because when remove ['ngAnimate'], it is working fine.
This is the code example with error:
<!doctype html>
<html ng-app="SsrsToolApp">
<head>
</head>
<body>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
ready
<script>
var ssrsApp = angular.module('SsrsToolApp', ['ngAnimate'], ['angular.filter']);
</script>
...
</body>
</html>
I need those modules in my app. What do you think? How can I do to solve this problem?
To inject multiple modules in AngularJS specify them as array elements:
var ssrsApp = angular.module('SsrsToolApp', ['ngAnimate', 'angular.filter']);
The third argument to angular.module is a configuration function. The error you are getting is complaining that you're injecting a string ('angular.filter') rather than a function.

Angular js module won't load

I get always the following error in angular js when I add ng-app="adminApp" to the body. The error is thrown during auto bootstrap.
Uncaught Error: [$injector:modulerr] Failed to instantiate module adminApp due to:
Error: [$injector:nomod] Module 'adminApp' 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.
If I change it to only ng-app the error won't show up but i can't use ngRoute as it needs the app to be given a name. I read lots of solutions for this problem last 2 days but i found none of them working for me.
I removed everything and still won't work. I left only the ng-app and 3 elements.
index.html:
window.mainmodule = angular.module('adminApp', ['ngRoute','ngMaterial']);
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1" />
</head>
<body ng-app="adminApp">
<div id="loadingscreen">
<div style="left:0;top:0;width:0px;height:20px;background-color:#0000FF;" id="loadingbar"></div>
<div class="center">Loading...</div>
</div>
<script type="text/javascript" src="utils/angular.js"></script>
<script type="text/javascript" src="utils/angular-route.js"></script>
<script type="text/javascript" src="utils/angular-animate.js"></script>
<script type="text/javascript" src="utils/angular-aria.js"></script>
<script type="text/javascript" src="utils/angular-material.js"></script>
<script type="text/javascript" src="utils/require.js" data-main="modules/main"></script>
</body>
</html>
EDIT: I use angular v1.5.0-rc.0.
Codepen: http://codepen.io/anon/pen/pgwZLq
original link
If you are using require.js, you need to programmatically bootstrap your angular application.
//kickoff the app
require(["app", "routes" ], function(){
angular.module('adminApp', ['ngRoute','ngMaterial']);
angular.bootstrap(document, ["adminApp"]);
});
When angular.js is loaded, it traverses the DOM and looks for "ng-app" to start the bootstrapping process. At that point of time your require.js dependency files hasn't been loaded on the page yet. So when angular tries to start the application and looks at your "adminApp", it doesn't exists yet. So, by deferring the bootstrapping, you'll have a chance the load your js files before angular goes out and bootstraps your app.
Remove ng-app tag from html. It will be added during bootstraping.

Angular-gettext translation service doesn't appear to be working.

I'm having a really hard time understanding what I'm doing wrong and I'm hoping someone can help. I need to build a small app just to practice with angular-gettext. I followed the tutorial here: http://lostechies.com/gabrielschenker/2014/02/11/angularjspart-12-multi-language-support/
My project, however, will not translate. I don't get any errors in the console. I have all of the necessary dependencies and everything appears to be working correctly (grunt, bower, etc.), so it must be in the actual code. Probably a curly brace or something.
Here's my app.js file:
var app = angular.module('app', ['gettext']);
app.controller("TestCtrl", function($scope){
app.run(function(gettextCatalog){
gettextCatalog.currentLanguage = 'de';
gettextCatalog.debug = true;
});
});
Index.html:
<!DOCTYPE html>
<html>
<head>
<title>Translation Sample</title>
<link rel="stylesheet" type="text/css"
href="bower_components/bootstrap/dist/css/bootstrap.css"/>
</head>
<body ng-app="app">
<div ng-controller="TestCtrl">
<p translate>Welcome to my app</p>
<p translate>We want to test globalization and localization</p>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-gettext/dist/angular-gettext.js"></script>
<script src="app.js"></script>
<script src="translations.js"></script>
</body>
</html>
Gruntfile.js:
module.exports = function(grunt){
grunt.loadNpmTasks('grunt-angular-gettext');
grunt.initConfig({
nggettext_extract:{
pot: {
files: {
'po/template.pot': ['**/*.html']
}
}
},
nggettext_compile:{
all: {
files: {
'translations.js': ['po/*.po']
}
}
}
})
};
Translations.js:
angular.module('gettext').run(['gettextCatalog', function (gettextCatalog) {
gettextCatalog.setStrings('de', {
"We want to test globalization and localization":"Wir wollen testen, Globalisierung und Lokalisierung",
"Welcome to my app":"Willkommen auf meiner App"
});
}]);
I know this is long. Thanks for reading and thanks in advance for any suggestions.
This might be an angular-gettext bug: your strings are loaded after you set the language. With recent changes in angular.js, this might break.
I'll push a fix for that.
Update: angular-gettext 1.1.2 was released with a fix for this (try it out). Note that in recent versions the use of currentLanguage has been deprecated. You should use gettextCatalog.setCurrentLanguage('de') instead.
https://angular-gettext.rocketeer.be/dev-guide/api/angular-gettext/

Categories

Resources