I am new to angular and bootstrap, I have my login.html with LoginController.
I try to create a modal popup window, So in order to do it i need to add $modal to the controller, the current controller looks like:
angular.module('loginController', ['loginService'])
.controller('LoginCtrl', ['$scope', 'LoginService', function($scope, LoginService) {
But when i do:
angular.module('loginController', ['loginService','ui.bootstrap'])
.controller('LoginCtrl', ['$scope', '$modal','LoginService', function($scope, $modal,LoginService) {
I Received an error, and i am getting the following error:
Error: [$injector:modulerr] Failed to instantiate module loginController due to:
Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap due to:
Error: [$injector:nomod] Module 'ui.bootstrap' 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 guess i need to add bootstrap-ui somewhere, maybe to:
angular.module('myApp', [
'ngRoute',
'bootstrap-ui', -> **when i add it, i still get the exception**.
What am i doing wrong ?
You need to reference one of ui-bootstrap-*.js files in your html.
Related
I'm attempting to inject a factory called recipesApp.recipeData into my MainController, as soon as I added it, the app broke and I have been receiving the following error:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module recipesApp due to:
Error: [$injector:modulerr] Failed to instantiate module recipesApp.recipeData due to:
Error: [$injector:nomod] Module 'recipesApp.recipeData' 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.
My main app module is written as follows:
var app = angular.module('recipesApp', ['ngRoute', 'recipesApp.recipeData']);
My controller:
app.controller('MainController', ['$scope', '$http', '$location', '$rootScope', 'recipeData',
function($scope,$http,$location,$rootScope,recipeData) {...}]);
My recipe factory:
angular
.module('recipesApp.recipeData', [])
.factory('recipeData', function($http) {
return {
getAllRecipes: function(){
$http.get('/allrecipes');
}
};
});
I have tried changing the file structure, the file naming convention. I have tried simply linking it onto the controller itself in the same file, I've changed the order in which it is being injected, and I've triple checked the spelling. Any suggestions would be very helpful!
You're trying to add $http as a module dependency, $http is a service, not a module. Remove it from your recipesApp.recipeData module dependencies
angular
.module('recipesApp.recipeData', [])
.factory('recipeData', function($http) {
return {
getAllRecipes: function(){
$http.get('/allrecipes');
}
};
});
Also make sure all the .js files are present in your index.html
in my ionic app I want to use cordova-plugin-video-editor plugin but I don't know how to inject it on my controller.
I added the plugin on the terminal like this:
ionic plugin add https://github.com/jbavari/cordova-plugin-video-editor.git
And it is injected with the controller like this (last one):
.controller('VideoCtrl', ['$scope', '$ionicPlatform', '$ionicModal', '$cordovaDialogs', '$cordovaCapture', '$cordovaFileTransfer', '$sce', 'VideoService', '$q', '$http', '$ionicScrollDelegate', '$timeout', '$location', 'VideoEditor', function ($scope, $ionicPlatform, $ionicModal, $cordovaDialogs, $cordovaCapture, $cordovaFileTransfer, $sce, VideoService, $q, $http, $ionicScrollDelegate, $timeout, $location, VideoEditor) {
I get this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to:
Error: [$injector:modulerr] Failed to instantiate module VideoEditor due to:
Error: [$injector:nomod] Module 'VideoEditor' 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 am confused, I am using more plugins but all are official and I didn't have problems as I only had to do:
angular.module('starter.controllers', ['ngCordova'])
And in the html
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
Inside plugin folder there is a js file that has:
var exec = require('cordova/exec'),
pluginName = 'VideoEditor';
function VideoEditor() {
}
VideoEditor.prototype.transcodeVideo = function(success, error, options) {
exec(success, error, pluginName, 'transcodeVideo', [options]);
};
VideoEditor.prototype.createThumbnail = function(success, error, options) {
exec(success, error, pluginName, 'createThumbnail', [options]);
};
module.exports = new VideoEditor();
When I install the plugin should not this js content had gone somewhere in my www folder so then I can imported from html?
Remove the VideoEditor module in your controller configuration. because this VideoEditor have not any relation with angular.
Also you need refer the github document. They use it just like a jquery plugins. not a angular plugins. Does make sense? let me know, if not.
How do I implement it in Angular controller?
You can use it just like a javascript library.
I am new to angularjs ,i inject d3 in main.js as follow:
function (angular) {
'use strict';
angular.module('main', ['ngFileUpload', 'ngCookies', 'ui.router', 'd3'])
.constant('_', window._);
})(window.angular);
but i get an error:
Uncaught Error: [$injector:modulerr]
Failed to instantiate module main due to:
Error: [$injector:modulerr] Failed to instantiate module d3 due to:
Error: [$injector:nomod] Module 'd3' 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 you are using normal d3 library you dont inject angular dependencies.
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
You can use d3.js angular directives or d3 "wrappers" angular directives, i recommend you:
nvd3
c3-angular-directive
I am trying to get access to the current route since I added a title on it.
So the route looks something like
state('reports', {
title: 'Reports',
url: '/reports',
templateUrl: 'modules/feeditems/views/reports.client.view.html'
}).
I want to get access to the title. so I can put it on my page Header. So in the Header controller I thought I could just get it off my
angular.module('core').controller('HeaderController', ['$rootScope', '$route', '$scope', 'Authentication', 'Menus',
function($rootScope, $route, $scope, Authentication, Menus) {
$scope.authentication = Authentication;
$scope.isCollapsed = false;
$scope.menu = Menus.getMenu('topbar');
$scope.$route = $route;
console.log ('typeof($route) = ' + typeof($route));
console.log ('typeof($route.current) = ' + typeof($route.current));
and I get the following error
Error: [$injector:unpr] Unknown provider: $routeProvider <- $route
so I add ngRoute
ApplicationConfiguration.registerModule('core', ['ngRoute']);
then I get the following error
Uncaught Error: [$injector:modulerr] Failed to instantiate module r2h
due to: Error: [$injector:modulerr] Failed to instantiate module core
due to: Error: [$injector:modulerr] Failed to instantiate module
ngRoute due to: Error: [$injector:nomod] Module 'ngRoute' 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.
How am I supposed to include this properly? the meanjs way?
I think you are confused, MeanJS standard configuration uses Angular UI Router
For Angular UI Router
You need to angular-ui-router.js then include ui.router inside your app dependency
After that in configuration do register your state using $stateProvider
Syntax
app.config(function($stateProvider){
$stateProvider.state('reports', {
url: '/reports',
templateUrl: 'modules/feeditems/views/reports.client.view.html'
})
})
For adding title dynamically you could refer this SO Answer
Kindly refer to https://stackoverflow.com/a/28252931/4380266
. This has the solution to your problem.
Check the sequence you loaded your angular files.
The sequence must be :
angular.js
angular-route.js
finally your angular scripts
So this issue only seems to happen when I move a factory to an external file, and I'm really confused as to why. Extracting directives, controllers, and filters to external files does not break my app. I'll show what I'm doing below.
I create my app.js, name the module, inject my various dependencies, continue with my config, and create my factory.
---- app.js -----
angular
.module('myApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',])
.config(function ($routeProvider, $locationProvider, $httpProvider) { ... })
.factory('myFactory', function($http){ ... });
// also works with .factory('myFactory', ['$http', function($http) { ... }]);
I have no issue accessing my factory in my controller this way.
---- controller.js ------
angular.module('myApp')
.controller('myController', function(myFactory){
myFactory.method() // works just fine
});
Alternatively :
---- controller.js ------
angular.module('myApp')
.controller('myController', [ 'myFactory', function(myFactory){
myFactory.method() // also works just fine
}]);
Not sure which syntax is "right" but I try both always and they both work just fine.
...Now, if i remove .factory from app.js and move it to myFactory.js (which is linked in index.html) is where the problem happens.
----- myFactory.js -----
angular.module('myApp')
.factory('myFactory', function($http) { ... }); // also attempted with [ ] syntax
The app now fails to load after refresh, and I receive a pnpr error.
I've attempted:
Removing $http from the factory, and also leaving the factory empty to ensure I wasn't returning bad code from within the factory.
Changing myFactory.js's angular.module to read
angular.module('myFactory', []);
angular.module('myFactory').factory('api', [ '$http', function($http){ ... });
then in app.js injecting 'myFactory' as a dependency... I get some different error all together:
Uncaught Error: [$injector:modulerr] Failed to instantiate module crema.app due to: Error: [$injector:modulerr] Failed to instantiate module myFactory due to: Error: [$injector:nomod] Module 'myFactory' 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. errors.angularjs.org/1.3.15/$injector/nomod?p0=myFactory
Loading myFactory.js 1st, 2nd, 9th, last... in index.html, thinking maybe the load order might matter? It did not.
And various other minor syntactical changes. Nothing seems to really help, or change my error.
Not really sure what else to try. Like I said, the factory functions as intended when inside of app.js, and all my controllers, directives, etc. work just fine in external files... just not this factory. Any help would be appreciated.
The problem is that AngularJS does not allow you to register factories after its bootstrap. In order to make it work, you should do the following in your config function:
var app = angular.module('app', [...]);
app.config(function($provide) {
app.factory = function(name, factory) {
$provide.factory(name, factory);
};
});