I am having issues injecting Angulartics into my application. When I include Angulartics, I get the following error:
Unknown provider: $routeParamsProvider <- $routeParams <- $route
I am following this guide.
This is my code snippet for injecting the dependencies in app.js:
angular.module('parrotApp',
['parrotApp.filters', 'parrotApp.services', 'parrotApp.url', 'parrotApp.directives',
...
'lvl.directives.dragdrop', 'ui.bootstrap',
'ui.compat', 'spinner.directive', 'ngSanitize', 'ngAnimate', 'angularFileUpload',
'angular-hallo', 'ui.grid', 'ui.grid.pagination', 'ui.grid.autoResize',
'ui.grid.selection', 'angulartics', 'angulartics.google.analytics'])
.config([
'$routeProvider', '$stateProvider', 'QUERY_PARAMS', '$httpProvider',
/**
* Define the routings
* #param $routeProvider
* #param $stateProvider
*/
function($routeProvider, $stateProvider, QUERY_PARAMS, $httpProvider) {
...
})
]);
This is my code snippet for including the dependencies in home.jsp:
<!-- Google Analytics -->
<script src="/app/lib/analytics/analytics.js"></script>
<!-- Angulartics -->
<script src="/app/lib/analytics/angulartics.js"></script>
<script src="/app/lib/analytics/angulartics-ga.js"></script>
I double checked the paths to ensure they are correct. I have included angularjs, and the other angular dependencies seem to work fine. Any help is greatly appreciated!
Related
The code inside my angularjs config block is not getting executed. I have already checked the similar questions on stackoverflow and nothing helped me. I have already checked the 2 possible errors.
1)Missing ng-app in html.
2)Overriding of module.
I am not sure what's going wrong. I can see that the breakpoint is going to this line but it doesn't go inside this block. I also don't see any error on the console. It just silently ignores it. Even if I change $locationProvider to $locationProvider1 , it doesn't give any error.
myLittleApp .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
index.html
<html class="no-js" ng-app="littleapp">
</html>
app.js
'use strict';
var angular = require('angular');
require('angular-ui-router');
require('angular-ui-bootstrap');
var myLittleApp = angular.module('littleapp', [
'ui.router',
'ui.bootstrap',
require('./modules/firm').name
]);
myLittleApp .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
console.log('test');
}]);
As per the code you provided, Your code seems to have a space between your application variable name and the config function. I removed it. Try it again. I also moved the firmModule outside the app module. One more thing, try following John Papas Style Guide.
Also can you share the .modules/firm code to see how you are exporting the module?
var angular = require('angular');
require('angular-ui-router');
require('angular-ui-bootstrap');
var firmModule = require('./modules/firm').name;
var myLittleApp = angular.module('littleapp', [
'ui.router',
'ui.bootstrap',
firmModule
]);
myLittleApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
console.log('test');
}]);
I was able to resolve this issue on my own. The issue was with ng-app in html file. It should be an attribute of body tag instead of html tag.
wrong
<html class="no-js" ng-app="littleapp">
<body>
</body>
</html>
Correct
<html class="no-js" >
<body ng-app="littleapp">
</body>
</html>
I am trying to use an angular provider so I can dynamically load sub-modules within the $routeProvider of my angular application. However, I am getting one of 2 errors:
Error: [$injector:modulerr] Failed to instantiate module MainApp due to:
[$injector:unpr] Unknown provider: MyRouteProvider
Error: [$injector:nomod] Module 'MainApp' 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.
Here's what I have:
main.js
require.config({
baseUrl : '',
version : '1.0',
});
require([
'app',
'my-route-mod/my-route-mod.module',
'my-route-mod/my-route-mod.provider',
'main-app/main-app.config',
'main-app/main-app.run',
/* other initial modules */
],function(){
angular.bootstrap(document,['MainApp']);
});
app.js
(function(){
'use strict';
/* global angular, $ */
angular.module('MainApp',[
'MyRouteMod', /* This module does not want to load */
'ngRoute',
'ngCookies'
]);
})();
my-route-mod/my-route-mod.module.js
(function(){
'use strict';
/* global angular */
angular.module('MyRouteMod',[]);
})();
my-route-mod/my-route-mod.provider.js
(function(){
'use strict';
/* global angular */
angular.module('MyRouteMod')
.provider('MyRouteModProvider',Provider);
Provider.$inject = [];
function Provider() {
var provider = this;
provider.$get = function () {
return { route : someFunction };
}
function someFunction(){...}
}
})();
main-app/main-app.config.js
(function(){
/* global angular */
'use strict';
angular.module('MainApp').config(Config);
Config.$inject = [
'MyRouteModProvider',
'$routeProvider',
'$locationProvider',
'$controllerProvider',
'$compileProvider',
'$filterProvider',
'$provide'
];
function Config(
MyRouteModProvider,
$routeProvider,
$locationProvider,
$controllerProvider,
$compileProvider,
$filterProvider,
$provide
) {
/* ... do some config stuff ... */
}
})();
index.html
<!DOCTYPE>
<html>
<head><title>My App</title></head>
<body>
<!-- Some other stuff -->
<div ng-view></div>
<!-- Some other stuff -->
<script src="vendor-stuff"></script>
<script src="vendor/require.js" data-main="main">/script>
</body>
</html>
I took requirejs out of the equation and was getting the same issue with the provider not loading.
I either get that MainApp is not available, or that MyRouteMod is not available, or that MyRouteModProvider is not available.
Suggestions please.
Angular naming conventions. For providers, the string 'Provider' gets added to your constructor name. So, if you have:
angular.module('MyMod').provider('MickeyMouse',Provider);
Then angular will look for 'MickeyMouseProvider'. So, if you do
angular.module('MyMod').provider('MickeyMouseProvider',Provider);
then angular will look for 'MickeyMouseProviderProvider'
Hope this saves you a bit of time.
I'm trying to add a carousel(http://angular-ui.github.io/bootstrap/#/carousel) to my Bootstrap 3 website. But, All images are showing at once with the error.
When i create a sample project with carousel(http://angular-ui.github.io/bootstrap/#/carousel) code it is working fine.
My module looks like below
var app = angular.module('myapp', ['ngRoute', 'angularFileUpload', 'LocalStorageModule', 'angular-loading-bar']);
And, for carousel requires below.
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
So when i add above 2 into my project
var app = angular.module('myapp', ['ngRoute', 'ngAnimate', 'ui.bootstrap', 'angularFileUpload', 'LocalStorageModule', 'angular-loading-bar']);
i am getting below error.
https://docs.angularjs.org/error/$injector/modulerr?p0=myApp&p1=Error:%20%5B$injector:modulerr%5D%20http:%2F%2Ferrors.angularjs.org%2F1.2.16%2F$injector%2Fmodulerr%3Fp0%3DngAnimate%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.16%252F%2524injector%252Fnomod%253Fp0%253DngAnimate%250A%2520%2520%2520%2520at%2520Error%2520(native)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A6%253A450%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A20%253A260%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A21%253A262%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A33%253A1%250A%2520%2520%2520%2520at%2520Array.forEach%2520(native)%250A%2520%2520%2520%2520at%2520q%2520(http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A7%253A280)%250A%2520%2520%2520%2520at%2520e%2520(http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A32%253A445)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A33%253A18%250A%2520%2520%2520%2520at%2520Array.forEach%2520(native)%0A%20%20%20%20at%20Error%20(native)%0A%20%20%20%20at%20http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:6:450%0A%20%20%20%20at%20http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:33:332%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20q%20(http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:7:280)%0A%20%20%20%20at%20e%20(http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:32:445)%0A%20%20%20%20at%20http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:33:18%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20q%20(http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:7:280)%0A%20%20%20%20at%20e%20(http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:32:445
EDIT: After referring below
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
I am getting below error.
Line: 4442
Error: [$injector:cdep] Circular dependency found: $http <- $templateRequest <- $$animateQueue <- $animate <- cfpLoadingBar <- $http <- authService
http://errors.angularjs.org/1.4.7/$injector/cdep?p0=%24http%20%3C-%20%24templateRequest%20%3C-%20%24%24animateQueue%20%3C-%20%24animate%20%3C-%20cfpLoadingBar%20%3C-%20%24http%20%3C-%20authService
According to the stacktrace, angular didn't found the module ngAnimate. You probably forgot to link angular-animate script from your index.html page.
index.html
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
In our application we have app.js and the high level content is below.
var app = angular.module('testApp', [ 'ngResource', 'ngRoute', ui.bootstrap', 'infinite-scroll']).config(function($locationProvider) {
$locationProvider.html5Mode(false);
});
var appEmail = angular.module('testAppEmail', ['mnpi', 'ngTagsInput', 'ui.tinymce']);
This app.js is been included in all the html files.
I would like to include treeGrid in one of the html, say treeTest.html, hence, added tree-grid-directive.js in the treeTest.html.
We have a separate js (treeTest.js) for this html file.
treeTest.html,
<html ng-app='testApp'>
<script src='js/jquery/jquery-1.11.1.min.js'></script>
<script src='js/jquery/jquery-ui-1.10.4.min.js'></script>
<link rel="stylesheet" href="css/jquery-ui.min.css" />
<script src="js/angularjs/angular.min.js"></script>
<script src="js/angularjs/angular-resource.min.js"></script>
<script src="js/angularjs/angular-route.min.js"></script>
<script type="text/javascript" src="js/angularjs/tree-grid-directive.js"></script>
<script src="js/test/controllers/treeTest.js"></script>
<body ng-controller="treeTestCtrl">
<div ng-if="loadingIsDone">
<tree-grid tree-data="tree_data"
tree-control="my_tree"
col-defs="col_defs"
expand-on="expanding_property"
on-select="my_tree_handler(branch)"
expand-level="1"
icon-leaf= "">
</tree-grid>
</div>
In treeTest.js,
angular.module('testApp').controller(
//app.controller(
'treeTestCtrl',
function($scope, $location, $http, $modal, $log, $window,
referenceDataService, windowService, dealDataService) {
// loading data for the tree and set the JSON array for the tree
}
Now, treeGrid works fine if i include the treeGrid directive in app.js as below.
var app = angular.module('testApp', [ 'ngResource', 'ngRoute', 'ui.bootstrap', 'infinite-scroll','treeGird']).config(function($locationProvider) {
$locationProvider.html5Mode(false);
});
But the problem is, since it is added to app.js, it is expected to include the tree-grid-directive.js in all the pages.
Is there any way, I can include the treeGrid directive without adding in app.js so that I dont have to include the tree-grid-directive.js in all the pages.
Thanks,
Baskar.S
Maybe you can let the array of dependencies be constructed dynamically, e.g.:
// additional dependencies here, this is the "dynamic part"
var dynamicDeps = ['treeGird'];
// common code
var deps = ['ngResource', 'ngRoute', 'ui.bootstrap', 'infinite-scroll'];
angular.forEach(dynamicDeps, function(dep) {
deps.push(dep);
});
var app = angular.module('testApp', deps).config(function($locationProvider) {
$locationProvider.html5Mode(false);
});
var appEmail = angular.module(...);
...
I'm having troubles using the ui-router plugin of AngularJS:
angular.module('myApp', []).
config(['$routeProvider', '$stateProvider', function($routeProvider, $stateProvider) {
$stateProvider
.state('mandats', {
url: '/domiciliations/mandats',
templateUrl: 'domiciliations/views/mandats.html',
controller: 'mandatsCtrl'
});
}])
I then get this error at startup:
Unknown provider: $stateProvider
I've included the javascripts in this order:
<script src="/Scripts/libs/angular/angular.js"></script>
<script src="/Scripts/libs/angular/angular-resource.js"></script>
<script src="/Scripts/libs/angular/angular-ui-states.js"></script>
What could be the issue ?
[EDIT]
I've got rid of the error message by adding 'ui.compat' as a dependency of myApp. I saw that in the sample code of ui-router but nowhere in the documentation. What is this about ?
Nevertheless, it still does not work. I've added ui-view to a div in the application index file. But the page remains blank.
The following piece of code should do the job. At least in my case, so let me know if it works or not.
angular.module('myApp', ['ui.compat']).
config(['$routeProvider', '$stateProvider', function($routeProvider, $stateProvider) {
$stateProvider
.state('mandats', {
url: '/domiciliations/mandats',
templateUrl: 'domiciliations/views/mandats.html',
controller: 'mandatsCtrl'
});
}])
Now about your issue with the page being empty. For sure the URL you have in the browser is not matched with any defined in your state. Try this '#/domiciliations/mandats' in your browser and see if the view gets rendered appropriately. Not that you absolute url should be something similar with http://[HOST_NAME]/home.html#/domiciliations/mandats.
You just need to include ui-router module as dependency.
like following
angular
.module('myApp', ["ui.router"])
.config(['$routeProvider', '$stateProvider', function($routeProvider, $stateProvider) {
...
}]);
Including the angular-ui v0.0.2 will fix the problem.