I am getting an error when I added 'ngFileUpload' in my module.
I have used
var app = angular.module('myApp', ['ngFileUpload']);
And in route page:
angular.module('myApp')
.config(function ($stateProvider) {
$stateProvider
.state('dashboard', {
url: '/dashboard',
templateUrl: 'app/dashboard/dashboard.html',
controller: 'DashboardCtrl'
})
});
Error is :
Error: [$injector:modulerr] Failed to instantiate module umxApp due to:
[$injector:unpr] Unknown provider: $stateProvider
http://errors.angularjs.org/1.4.1/$injector/unpr?p0=%24stateProvider
minErr/<#http://localhost:9000/bower_components/angular/angular.js:68:12
createInjector/providerCache.$injector<#http://localhost:9000/bower_components/angular/angular.js:4255:19
getService#http://localhost:9000/bower_components/angular/angular.js:4402:39
invoke#http://localhost:9000/bower_components/angular/angular.js:4434:1
runInvokeQueue#http://localhost:9000/bower_components/angular/angular.js:4349:11
loadModules/<#http://localhost:9000/bower_components/angular/angular.js:4358:11
forEach#http://localhost:9000/bower_components/angular/angular.js:336:11
loadModules#http://localhost:9000/bower_components/angular/angular.js:4339:5
createInjector#http://localhost:9000/bower_components/angular/angular.js:4265:11
bootstrap/doBootstrap#http://localhost:9000/bower_components/angular/angular.js:1621:20
bootstrap#http://localhost:9000/bower_components/angular/angular.js:1642:1
angularInit#http://localhost:9000/bower_components/angular/angular.js:1536:5
#http://localhost:9000/bower_components/angular/angular.js:28289:5
jQuery.Callbacks/fire#http://localhost:9000/bower_components/jquery/dist/jquery.js:3099:10
jQuery.Callbacks/self.fireWith#http://localhost:9000/bower_components/jquery/dist/jquery.js:3211:7
.ready#http://localhost:9000/bower_components/jquery/dist/jquery.js:3417:1
completed#http://localhost:9000/bower_components/jquery/dist/jquery.js:3433:2
http://errors.angularjs.org/1.4.1/$injector/modulerr?p0=umxApp&p1=%5B%24injector%3Aunpr%5D%20Unknown%20provider%3A%20%24stateProvider%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.4.1%2F%24injector%2Funpr%3Fp0%3D%2524stateProvider%0AminErr%2F%3C%40http%3A%2F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A68%3A12%0AcreateInjector%2FproviderCache.%24injector%3C%40http%3A%2F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A4255%3A19%0AgetService%40http%3A%2F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A4402%3A39%0Ainvoke%40http%3A%2F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A4434%3A1%0ArunInvokeQueue%40http%3A%2F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A4349%3A11%0AloadModules%2F%3C%40http%3A%2F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A4358%3A11%0AforEach%40http%3A%2F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A336%3A11%0AloadModules%40http%3A%2F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A4339%3A5%0AcreateInjector%40http%3A%2F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A4265%3A11%0Abootstrap%2FdoBootstrap%40http%3A%2F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A1621%3A20%0Abootstrap%40http%3A%2F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A1642%3A1%0AangularInit%40http%3A%2F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A1536%3A5%0A%40http%3A%2F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A28289%3A5%0AjQuery.Callbacks%2Ffire%40http%3A%2F%2Flocalhost%3A9000%2Fbower_components%2Fjquery%2Fdist%2Fjquery.js%3A3099%3A10%0AjQuery.Callbacks%2Fself.fireWith%40http%3A%2F%2Flocalhost%3A9000%2Fbower_components%2Fjquery%2Fdist%2Fjquery.js%3A3211%3A7%0A.ready%40http%3A%2F%2Flocalhost%3A9000%2Fbower_components%2Fjquery%2Fdist%2Fjquery.js%3A3417%3A1%0Acompleted%40http%3A%2F%2Flocalhost%3A9000%2Fbower_components%2Fjquery%2Fdist%2Fjquery.js%3A3433%3A2%0A
return new ErrorConstructor(message);
I am unable to upload image with angularjs.
Can anyone answer me what is my problem?
Can any one help me how to upload image with angularjs and back-end nodejs in step by step.
I find many but not getting proper answer.
you are not injecting ui-router as a dependency in your app do this .
var app = angular.module('myApp', ['ngFileUpload','ui.router']);
Related
Hi I am using a webapi SPA application with angular UI. I am loading a html page using the templateurl like below
$uibModal.open({
templateUrl: '/PURNATEST/App/Reports/ABC/ReportEditModel.html',
controller: 'ABCDController',
scope: $scope
}).result.then(function ($scope) {
clearSearch();
}, function () {
var stest = "";
});
I am getting the below error :
angular.js:13550 Error: [$compile:tpload] Failed to load template: /PURNATEST/App/Reports/ABC/ReportEditModel.html (HTTP status: 404 Not Found)
In BundleConfig I am registering the both bootstrap and bootstrap-tpl
"~/Scripts/angular-ui/ui-bootstrap.js",// used
"~/Scripts/angular-ui/ui-bootstrap-tpls.js", //used
And my module looks like this
var PCMApp = angular.module('PCMApp', [
'ngRoute', //app route (url path) support
'ngSanitize', //fixes HTML issues in data binding
'ui.bootstrap',
'ngDialog',
'common'
]);
Can any one let me know how to proceed to resolve this issue.?
This has been resolved, i was using a provider hosted app for sharepoint and the filepaths are different while debugging(dev env) and test environment ( after deployment ). The issue was with the relative paths .
Thanks for the replies.
-PURNA
I started my first angular application, and am running into an issue where my "home" module isn't working because of a dependency issue. I don't see any dependency missing that I would need. I am using $stateProvider, and $urlProvider, but I am injecting that into the configuration for the home module, so I'm not sure where the problem would lie ?
Config.$inject = ["$stateProvider", "$urlRouterProvider"];
angular.module('home', []).config(Config)
function Config($stateProvider, $urlRouterProvider){
$stateProvider
.state('home', {
url: '/login',
templateUrl: './views/login.html'
})
}
angular.module('home').controller('loginCtrl', function($scope){
$scope.helloWorld = function(){
console.log("This works!")
}
})
The consoled error:
[$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=home&p1=Error%3A%20…
Since "$stateProvider" and "$urlRouterProvider" providers are not part of the core AngularJS module, you need to inject modules, that have this provides into your home module definition. As far as I know, $stateProvider is from ui router module, so
angular.module('home', ['ui.router']).
...
Keep in mind that you also need to include this Javascript in your HTML file. It is in the angular-ui-router file
<script src="js/angular-ui-router.min.js"></script>
Here is my code:
var app = angular.module('todoApp', ['ui.router', 'ngResource', 'ui.bootstrap']);
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: "/",
templateUrl: '/templates/index.html',
})
.state('signup', {
url: "/signup",
templateUrl: '',
})
}
]);
module.exports = app;
When i'm running in in browser, it show me an error:
ReferenceError: module is not defined
What i'm doing wrong ? How to properly define module ?
The console error message a few lines below the module is not defined gives a hint where the problem is:
Module 'ui.router' is not available! You either misspelled the module name or forgot to load it.
Check if you have included the file containing ui.router into your page (i.e. HTML template) so that Angular can load it.
Add the references to ui-router and bootstrap to make it work.
here is the working app
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 I was on version beta.6 and was working just fine...decided to go to the new version and immediately got some errors. Started to work my way back and my apps work fine on beta.7 and then something happened between beta.7 and beta.8, which is not very clear but it is constantly throwing this error:
[$injector:modulerr] Failed to instantiate module ng due to:
Error: [$injector:unpr] Unknown provider: $filterProvider
Here is a sample of my angular app.
'use strict';
var Countries = angular.module('Countries',['ngRoute'])
.config([
'$routeProvider', function($routeProvider) {
$routeProvider
.when('/Countries', { controller: TabsCtrl, templateUrl: '/Areas/MIS/Templates/Countries/tabs.html' })
.otherwise({ redirectTo: '/Countries' });
}
]);
It's because you're trying to extend module 'ng'. Documented here: https://github.com/angular/angular.js/commit/c0b4e2db9cbc8bc3164cedc4646145d3ab72536e
Covered by this error report: https://github.com/angular/angular.js/issues/7709 and this one: https://github.com/angular/angular.js/issues/9692