I have some code and at this point, I'm just trying to follow the 'Getting started' section of the UI Router page to get something going on my current application.
(function () {
var app = angular.module('configurator.boot', ['configurator.errorhandler', 'configurator.routes', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
console.log($stateProvider);
});
app.run(function () { });
})();
I get this error when loading my page:
Failed to instantiate module configurator.boot due to:
Error: [$injector:unpr] http://errors.angularjs.org/1.2.28/$injector/unpr?p0=a
at Error (native)
at http://wkslt-139998:96/configurator/scripts/lib/angular.min.js:6:450
at http://wkslt-139998:96/configurator/scripts/lib/angular.min.js:36:202
at c (http://wkslt-139998:96/configurator/scripts/lib/angular.min.js:34:305)
at Object.d [as invoke] (http://wkslt-139998:96/configurator/scripts/lib/angular.min.js:35:6)
at http://wkslt-139998:96/configurator/scripts/lib/angular.min.js:33:394
at r (http://wkslt-139998:96/configurator/scripts/lib/angular.min.js:7:290)
at e (http://wkslt-139998:96/configurator/scripts/lib/angular.min.js:33:207)
at ec (http://wkslt-139998:96/configurator/scripts/lib/angular.min.js:36:309)
at c (http://wkslt-139998:96/configurator/scripts/lib/angular.min.js:18:170
If I just log 'hello', that works, so that leads me to think that I need to add some other dependency to the module function, but I don't know what.
Thank you for any help you can give me, I've been grinding my wheels for a day with just getting started.
It was the minification process. Changing it to:
(function () {
var app = angular.module('configurator.boot', ['configurator.errorhandler', 'configurator.routes', 'ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
console.log($stateProvider);
}]);
app.run(function () { });
})();
fixed it up.
Related
I'm making this very preliminary attempt of using node/npm/browserify to build my angular app. The ./app/controllers, ./app/directives, ./app/services basically have index.js files which in turn require() the js files! Below is the root js file i.e. public/index.js.
require('./app/controllers/');
require('./app/directives/');
require('./app/services/');
var app = angular.module('myApp', ['ngRoute'])
app.config(function($routeProvider) {
$routeProvider
.when("/movie/:movieId", {
template: require('./views/movie.html'),
controller: 'MovieCtrl as movie'
})
.when("/movie/:movieId/scene/:sceneId", {
template: require('./views/scene.html'),
controller: 'SceneCtrl as scene'
});
});
module.exports = app;
Now after running below command i do get a bundle.js however,
browserify public/index.js -o release/bundle.js
However, the below line in bundle.js throws the error "Uncaught ReferenceError: app is not defined"
app.controller('MainCtrl', function ($route, $routeParams, $location, MyFactory) {
Now, i was assuming because var app is specified in index.js it should be accessible in MainCtrl.js. Could someone suggest how i could make this work?
----- Adding some more info ------
app/controllers/index.js contains below code:-
require('./MainCtrl.js')
require('./MovieCtrl.js')
require('./SceneCtrl.js')
And MainCtrl.js contains below code:-
app.controller('MainCtrl', function ($route, $routeParams, $location, MyFactory) {
//...
})
I don't know where the line in your code is... it isn't clear from the question, but anyway:
Now, i was assuming because var app is specified in index.js it should be accessible in MainCtrl.js.
That assumption is false. You will need to pass in a reference to whatever you need when you instantiate whatever you included.
For example..
var mainCtrl = new MainCtrl(app);
Ok, so i kind of understood what was going on. var app is local and cannot be accessible anywhere else. Once i set app to the global scope (which is obviously a horrible thing!) and required files after declaring app, it worked. This is mostly not the correct way of doing it, but as i mentioned this was a very preliminary attempt.
app = angular.module('myApp', ['ngRoute'])
app.config(function($routeProvider) {
$routeProvider
.when("/movie/:movieId", {
template: require('./views/movie.html'),
controller: 'MovieCtrl as movie'
})
.when("/movie/:movieId/scene/:sceneId", {
template: require('./views/scene.html'),
controller: 'SceneCtrl as scene'
});
});
require('./app/controllers/');
require('./app/directives/');
require('./app/services/');
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']);
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
Yet another post about angularjs, minify and ngRoute...
However, I really have no idea why the minified code is failing while the normal version isn't:
I've isolated the issue to this file (appRoutes.js) containing the appRoutes module.
Not Minified:
angular.module('appRoutes', ['ngRoute'])
.config(
['$routeProvider', '$locationProvider', '$httpProvider', '$logProvider',
function($routeProvider, $locationProvider, $httpProvider, $logProvider) {
$routeProvider.when('/', { ... });
$httpProvider.response... );
$locationProvider.html5Mode(true);
$logProvider.debugEnabled(true);
}])
.run(['$rootScope', '$http', function($rootScope, $http){ ... })]);
Minified
angular.module("appRoutes",["ngRoute"])
.config(
["$routeProvider","$locationProvider","$httpProvider","$logProvider",
function(a,d,e,f){
a.when("/",{
etc...
And I'm being given this error:
Unknown provider: aProvider <- a <- $http
Sorry, but I can't figure what the h*ll's wrong with that... ?
The only systematic issue is that the minified version "a" of $routeProvider is the source of the issue... it's just sometimes called b or c...
It works NOT minified, but doesn't work minified...
I tried without the inline annotation.
I tried to use Gulp Closure Compiler and the compiler.jar directly by command line.
I tried to change the order in which the modules are called.
I've got a file called app.js; it's the main angularjs file that calls all dependencies, and appRoutes is in it...
Thaks for your help!
I have a problem with angular-config to inject constant "ACCESS_LEVELS"?
Because when I like the code below, gets the message: Uncaught Error: [ng:areq] http://errors.angularjs.org/1.2.14/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20string
that is: Argument 'fn' is not a function, got string
if I delete the "ACCESS_LEVELS" with inject I do not have access route.
var app = angular.module("app", ["ngRoute", "ngAnimate"])
.constant('ACCESS_LEVELS', {
guest: 1,
user: 2,
admin: 3
});
app.config(["$routeProvider", "$locationProvider", "ACCESS_LEVELS", function($routeProvider, $locationProvider, ACCESS_LEVELS) {
$routeProvider
.when("/", {
template: "",
label: "Home",
access_level: ACCESS_LEVELS.user
})
.
.
.
}]);
maybe I made a simple mistake but I can not see it.
if anyone knows how to solve this problem please help.
regards
Make sure you are including angular-route.js and angular-animate.js file.
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-animate.min.js"></script>
DEMO