Routes not working in AngularJS - javascript

I'm new to Angular and can't get my routing to work in my application. I have nested modules which leads me to think that the problem is in the injections but I was hoping someone could save me from my day of frustration.
The module definitions are as follows:
application.js
'use strict';
var mainApplicationModuleName = 'vre';
var mainApplicationModule = angular.module(mainApplicationModuleName, ['ngResource', 'ngRoute', 'main']);
mainApplicationModule.config(['$locationProvider',
function($locationProvider){
$locationProvider.hashPrefix('!');
}
]);
if(window.location.hash === '#_=_'){
window.location.hash = '#!';
}
angular.element(document).ready(function(){
angular.bootstrap(document, [mainApplicationModuleName]);
});
main module
angular.module('main', ['administrator']);
administrator profile
'use strict';
angular.module('administrator', ['accountManagement']);
account management module
'use strict';
angular.module('accountManagement', ['ngRoute']);
The routing is then as follows:
angular.module('accountManagement').config(['$routeProvider', function($routeProvider){
alert("hello");
$routeProvider
.when('/accounts/:accountId', {
templateUrl: 'administrator/account_management/views/view_account.client.view.html'
});
}]);
I'm getting the alert pop up but when I go to the url, all i'm getting is:
Cannot GET /accounts/55889e12c02081fc20de1bdd
Any help is much appreciated,
Ash

I think the url must be http://localhost/#/accounts/55889e12c02081fc20de1bdd
Don't forget the #

Related

angular module injection error in when running my app

I just started with Angular and I'm little bit confused with this error.
I don't know exactly what I've done wrong, but my console is showing this error:
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=app&p1=Error%3A%20%…(http%3A%2F%2Flocalhost%3A8080%2Flib%2Fangular%2Fangular.min.js%3A21%3A179)(…)
my html:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<link rel="stylesheet" href="css/app.min.css">
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="lib/angular-resource/angular-resource.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body>
test
</body>
</html>
and my app.js:
(function() {
'use strict';
angular.module('app', [
'ngRoute',
'ngResource',
'mainController'
])
.config(['$routeProvider', function() {
routeProvider.when("/", {templateUrl: 'www/index.html', controller: 'mainController'})
}])
.controller('mainController', function($scope){
alert();
})
})();
what is wrong ?
The mainController is not a module but a controller inside your app module. So injecting mainController does not make sense here. Remove the mainController injection from your modules dependencies array.
The other dependencies, ngRoute and ngResources are modules which your module is depending upon - for eg, $routeProvider is from the ngRoute module, so in order to get routeProvider, you need to inject the ngRoute module as dependency.
You don't have to inject controller as a dependency to the module
Change,
angular.module('app', ['ngRoute','ngResource','mainController'])
To
angular.module('app', ['ngRoute','ngResource'])
DEMO
First and foremost, do not inject the controller as a dependency. Remember: you are registering it after you create the module, and adding it to that model. Thus, it would make no sense to inject it at the time of creating the module. It doesn't exist yet. Makes sense?
Then some stuff to make life easier for you: separate out your app config stuff from your controller registrations. Have an app.js for example doing the code below. Notice I separated the steps, and I also create a config function that I then call in the app.config. This is just a bit more readable in the JavaScript mess we have to deal with.
(function() {
'use strict';
var app = angular.module('app', ['ngResource']);
var config = function(routeProvider){
routeProvider.when("/", {templateUrl: 'www/index.html', controller: 'mainController'});
};
app.config(['$routerProvider'], config);
})
})();
Then have a mainController.js containing the controller code and the registration of it. It'll be more future-proof for when you start adding more controllers and services and so on. Also, don't use $scope, use 'this' instead, you can use that from version 1.5 I think. Only place when you need to use $scope because 'this' doesn't work there is in angular charts, just a heads up ;)
(function ()
{
'use strict';
var mainController = function ($scope,)
{
var vm = this;
vm.variable = "value";
};
angular.module('app').controller('mainController', ['', mainController]);
})();
Btw don't mind the strange indentation of the code snippets, the editor on this page is messing with me a bit ;)

Dependency injection error in angular

I am getting Uncaught Error: [$injector:modulerr] in a very strange manner.
If I inject dependency in this manner it throws the above error.
'use strict';
var app = angular.module('myRoutes', ['ngRoute']);
app.config(['$routeProvider'], function ($routeProvider) {
});
But if I flip the above snippet in the below way, the error is gone.
'use strict';
var app = angular.module('myRoutes', ['ngRoute']);
app.config(function ($routeProvider) {
//no error
});
I am using Angular v 1.3.1
Scripts including order.
angular.js
angular-routes.js
myroutes.js
myCtrl.js
Considering the minification in production environment, I can't go with the second way.
You have not closed config inline array annotation function correctly
app.config(['$routeProvider'], function ($routeProvider) {
should be
// VVVVVVVVVV removed `]`
app.config(['$routeProvider', function ($routeProvider) {
}]); //<-- close it here
You didn't close it right.
'use strict';
var app = angular.module('myRoutes', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
}]);
The recommended way of doing this is using the array notation.
Read more here: https://docs.angularjs.org/guide/di

Injecting Angular modules: Unknown provider

I followed a tutorial on how to organize and Angular project. I have a ng directory that contains all my controllers, services and my routes.js. This is then bundled all together into an app.js by my gulp config.
My module.js is like this:
var app = angular.module('app', [
'ngRoute',
'ui.bootstrap'
]);
Here's a bit of my routes.js:
angular.module('app')
.config(function ($routeProvider) {
.when('/login', { controller: 'LoginCtrl', templateUrl: 'login.html'})
});
Here's what my working LoginCtrl looks like:
angular.module('app')
.controller('LoginCtrl', function($scope, UserSvc) {
$scope.login = function(username, password) {
...
}
})
The tutorial didn't make use of any Angular modules and I wanted to try one out. I added ui.bootstrap to my page from a CDN and try to change the LoginCtrl to:
angular.module('app')
.controller('LoginCtrl', function($scope, $uibModal, UserSvc) {
...
})
But this throws me the following error:
"Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $uibModal
What is causing this error? In every tutorial I find this seems to be how they load a module, the only difference I see is that the tutorial don't seem to be using a router.
PS: Note that if I use an empty module list [] I get the exact same error. If I use a non-existing module ['helloworld'] I get an errorModule 'helloworld' is not available'. So I'm concluding that my `ui.bootstrap' module is indeed available.
EDIT: Plunker fiddle here: http://plnkr.co/edit/FWHQ5ZDAByOWsL9YeMUH?p=preview
angular route is another module you should not only include but also use like this
in the app module creation
means DI of route
angular.module('app', ['ngRoute']);
Please go through the angular route doc
Remove ['ui.bootstrap'] form controller. You should add dependencies only one time but you add it twice so the second dependency list override the first one.
angular.module('app')
.controller('LoginCtrl', function($scope, UserSvc) {
... })
your routes snippet looks wrong, you should be hanging the when call off $routeProvider and maybe declare $routeProvider as an injected val if it's not being picked up e.g.
angular.module('app')
.config(["$routeProvider", function ($routeProvider) {
$routeProvider.when('/login', { controller: 'LoginCtrl', templateUrl: 'login.html'})
}]);
I have checked your link. I think there is a serious issue with angular and ui bootstrap version.In ui-boostrap dashboard, it is written that 0.12.0 is the last version that supports AngularJS 1.2.x. I have tried with all combinations but it doesn't work with your angular version.
I suggest you to change angular version to latest and ui-bootstrap version to latest so it will work.
Please check out this working Plukr
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.js'></script> //change this to latest also.
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.0.3/ui-bootstrap.min.js'></script>
<script src='./app.js'></script>
If you want to go with your angular version only. I'd request you to do some R&D. Try with different versions of ui-bootstrap. still if it doesn't work you can make PR.

MVC4 & AngularJS error when using ngAnimate as a dependency

I'm new to Angular and dependency injection. I'm receiving the following error on page load. I'm attempting to create a form wizard like this example in .Net/MVC4. Any help is greatly appreciated.
Uncaught Error: [$injector:unpr] Unknown provider: $$qProvider <- $$q <- $animate <- $compile
Scripts loading in view head:
<script src="#Url.Content("/Scripts/bower_components/angular/angular.js")"></script>
<script src="#Url.Content("/Scripts/bower_components/angular-ui-router/release/angular-ui-router.js")"></script>
<script src="#Url.Content("/Scripts/bower_components/angular-animate/angular-animate.js")"></script>
<script src="#Url.Content("/Scripts/modules/long-form-app-module/LongFormApp.js")"></script>
<script src="#Url.Content("/Scripts/modules/long-form-app-module/LongFormController.js")"></script>
HTML Markup
<div class="application">
<!-- Inject partial view from router -->
<section ui-view></section>
</div>
LongFormApp.js Script
(function () {
'use strict';
// Create our app and inject ngAnimate and ui-router
angular.module('GllApp', ['longFormController'])
.config(function ($stateProvider, $urlRouterProvider) {
// Catch all route
// By default send user to question one
$urlRouterProvider.otherwise('/home');
$stateProvider
// Route to show start of form
.state('home', {
url: '/home',
templateUrl: 'LongForm.html',
controller: 'LongFormController'
})
// Route to show start of form
.state('home.q01', {
url: '/home/q01',
templateUrl: 'LongFormQuestion01.html'
});
});
})();
LongFormController.js Script
(function () {
'use strict';
angular.module('longFormController', ['ngAnimate', 'ui.router'])
.controller('LongFormController', ['$scope', function ($scope) {
// do stuff
}]);
})();
I just fixed this exact problem with my project. The root cause was I was depending on "angular-animate": "~1.3.0", so bower was using Angular v1.3 even though the rest of the project was depending on Angular 1.2.
Just use
"angular-animate": "~1.2.0"
instead of
"angular-animate": "~1.3.0"
in your bower.json file. After a bower install everything should work!
You are creating the module twice, the second one you are loading replaces the first one. I'm not sure what order you want your dependencies in, but you probably just want one app:
var myGllApp = angular.module('GllApp', ['ngAnimate', 'ui.router']);
And load your controller script later and add it to your exising module by not passing the dependency list to angular.module:
angular.module('GllApp')
.controller('LongFormController', ['$scope', function ($scope) {
I've refactored the code you posted and added comments. Try this and see if you receive another error?
This is assuming you are loading: First Snippet > Second Snippet
(function () {
//use this inside of the SC function or else use strict will be used globally
//and cause unexpected results
'use strict';
// Create our app and inject ngAnimate and ui-router
// You don't need to create this variable if it is for scoping reasons,
// since you have already created a defined scope within the Self-Calling function
angular.module('GllApp', ['ngAnimate', 'ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
// Catch all route
// By default send user to question one
$urlRouterProvider.otherwise('/home');
$stateProvider
// Route to show start of form
.state('home', {
url: '/home',
templateUrl: 'form.html',
controller: 'LongFormController'
})
// Route to show start of form
.state('home.q01', {
url: '/home/q01',
templateUrl: 'form-q01.html'
});
});
})();
(function () {
'use strict';
angular.module('GllApp', ['ngAnimate']) //since you are not using stateProvider here you do not need to inject ui.router
.controller('LongFormController', ['$scope', function ($scope) {
// do stuff
}]);
})();

Failed to instantiate module [$injector:unpr] Unknown provider: $routeProvider

I received this error upon upgrading from AngularJS 1.0.7 to 1.2.0rc1.
The ngRoute module is no longer part of the core angular.js file. If you are continuing to use $routeProvider then you will now need to include angular-route.js in your HTML:
<script src="angular.js">
<script src="angular-route.js">
API Reference
You also have to add ngRoute as a dependency for your application:
var app = angular.module('MyApp', ['ngRoute', ...]);
If instead you are planning on using angular-ui-router or the like then just remove the $routeProvider dependency from your module .config() and substitute it with the relevant provider of choice (e.g. $stateProvider). You would then use the ui.router dependency:
var app = angular.module('MyApp', ['ui.router', ...]);
adding to scotty's answer:
Option 1:
Either include this in your JS file:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
Option 2:
or just use the URL to download 'angular-route.min.js' to your local.
and then (whatever option you choose) add this 'ngRoute' as dependency.
explained:
var app = angular.module('myapp', ['ngRoute']);
Cheers!!!
In my case it was because the file was minified with wrong scope. Use Array!
app.controller('StoreController', ['$http', function($http) {
...
}]);
Coffee syntax:
app.controller 'StoreController', Array '$http', ($http) ->
...

Categories