Angularjs unknown provider in $templateRequestProvider - javascript

I am including other html files as template in index.html. For this i am using ng-view directive. But i am getting an error:
Unknown provider: $templateRequestProvider <- $templateRequest <- $route <- ngViewDirective
The code I am using is:
'use strict';
var surveyApp = angular.module('surveyApp',['ngRoute']);
surveyApp.factory('surveyFactory',function (){
return {}
});
Here are the Controllers :
surveyApp.controller('profileController', function($scope,surveyFactory) {
// create a message to display in our view
$scope.message = 'This is the profile page';
});
surveyApp.controller('surveysController', function($scope,surveyFactory) {
// create a message to display in our view
$scope.message = 'This is the surveys page';
});
The Config:
surveyApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/profile.html',
controller : 'profileController'
})
.when('/surveys', {
templateUrl : 'pages/surveys.html',
controller : 'surveysController'
});
$locationProvider.html5Mode(true);
});
This is the HTML:
<body ng-app="surveyApp">
<div id="main">
<div ng-view></div>
</div>
</body>
Where am I missing?

Done. In most of the cases it would be the versions of angular-route and angularjs were conflicting. After then, it mostly crashed the page due to continuous loop requests in
.when('/', {
templateUrl : 'pages/profile.html',
controller : 'profileController'
})
Every time it saw a '/', it redirected to the same page all over again and hence forming an infinite redirect loop. This should be used in the last so that the first ones are checked, and if something remains, then it sees the '/' route.

Had the same problem, the issue for me was also a dependancy but not angular-route. The dependancy that caused the error for me was angular-bootstrap.
The current angular version in our project is 1.28 and angular-route is also 1.28. This error was triggered on updating angular-bootstrap from 0.12.1 to 0.13.

The only issue with your code is the missing closing curly brace after surveyFactory definition.
Change the code for app and factory definition to below to fix the issue:
var surveyApp = angular.module('surveyApp',['ngRoute']);
surveyApp.factory('surveyFactory',function (){
return {}
});

Related

ngRoute not working when page reload

I am using ngRoute to my application. problem is when i reload that page, there is an error.
error said
Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.
var app = angular.module('myApp',['ngTable','jcs-autoValidate','ngRoute']);
// configure our routes
app.config(function($routeProvider,$locationProvider) {
$routeProvider
.when('/container-details', {
templateUrl : 'container-details-test.jsp',
controller : 'myCtrl'
})
$locationProvider.html5Mode(true);
});
You'll need to configure your server based off the guidelines on this page:
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

NgRoute not working

For some reason im not sure about my ngRoute here is not working properly. Please help me thankyou. Here is my cloud9 file where you can see live preiview and edit code. And here is my script.js:
var app = angular.module('ChattApp', ["firebase", "ngRoute"])
app.config(["$routeProvider", function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'HtmlFiles/login.html',
controller : 'LoginController.js'
})
.otherwise({
redirectTo: '/'
})
//Talk In Chat/Group Chat. I have to go to school now..
}]
)
app.factory("Auth", ["$firebaseAuth",
function($firebaseAuth) {
var ref = new Firebase("https://uniquecoders.firebaseio.com/");
return $firebaseAuth(ref);
}
]);
Remove app definition in all controller files.. as app is already defined in another script.. the cause is that the variable is being redefined for each loaded controller file..
please check http://www.w3schools.com/js/js_scope.asp for variable scope lifetimes
Controller inside the object for the ".when" method takes controller name which is registered via angular not a 'js' file containing the controller's code.
When you register the controller you use the method Controller(name, constructor). Then name you place as the first argument is the "name" of the controller that you are registering with angular.
controller : 'LoginController.js'
Should be:
controller : 'LoginController'
References: Route Docs, Controller Docs
Search for "Route" on this page and then look at the controller object properties.

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.

Angular UI-router, controller is undefined

I am kind of new to the AngularJS framework and I am trying to migrate my test project using the standard router to use the UI-router, but I get the following error:
Error: [ng:areq] Argument 'mainCtrl' is not a function, got undefined
What I have done so far is:
Controller:
// mainCtrl.js
angular.module("sm-web")
.controller('mainCtrl',['$scope',
function($scope) {
...
}]);
Router:
angular.module('sm-web', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function( $stateProvider, $urlRouterProvider ) {
$urlRouterProvider.otherwise('root');
$stateProvider
.state('root', {
url: '',
templateUrl: path + 'ng/sm/view/main.html',
controller: 'mainCtrl'
});
}]);
Index:
<body ng-controller="mainCtrl">
<main-menu></main-menu>
<div class="container">
<div ui-view></div>
</div>
</body>
This works when I use the standard router, but not with the UI-router. Does anyone have any idea of what I am doing wrong?
It seems you have an issue w/the order you declare things. For you to declare the module "sm-web" you need to do this:
angular.module('sm-web', ['ui.router']);
Note that the presence of that 2nd array argument is what tells Angular that you're declaring the module (eg. creating a new module). When you leave that 2nd argument out, you're retrieving the module you previously declared.
So with that in mind, look at how it all is coming together in your code:
To declare the controller, you retrieve the module "sm-web" (by leaving off the 2nd array arg).
When configuring the router states, you declare a new module "sm-web". But note that immediately after you declare this new module, you try to register a state with the controller named "mainCtrl" -- but that doesn't exist yet.
You need to create the module somewhere before doing all of the above. After creating the module, then register the controller on the module. Finally, with the controller defined, then you can register the state that uses the controller.
There's too many ways to solve this ordering problem, so I'm not going to suggest anything further. It depends on what files the code lives in and the order you load those files in index.html.
In order to avoid your problem change your code by the following code:
// mainCtrl.js
angular.module("sm-web")
.controller('mainCtrl',['$scope',
function($scope) {
...
}]);

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
}]);
})();

Categories