I am trying to implement Angularytics but I am getting below error:
[$injector:unpr] Unknown provider: $routeProvider
My index.html includes below scripts:
<script src="components/angular/angular.js"></script>
.....
<script src="components/angularytics/src/angularytics.js"></script>
And my app.js(route) has below code:
var app=angular.module('demoApp', ['ui.bootstrap','ngResource','angularytics'])
.config(function (AngularyticsProvider,$routeProvider, $httpProvider) {
AngularyticsProvider.setEventHandlers(['Console', 'Google']);
..............................
.................................
});
app.run(['Angularytics','$rootScope','$location','$routeParams', function(Angularytics,$rootScope,$location,$routeParams) {
Angularytics.init();
.....................
......................
}]);
Please help me in what I am doing wrong.
Make sure you add angular-route.js and add ngRoute to the DI libs.
<script type="text/javascript" src="components/angular/angular-route.js"></script>
var app= angular.module('demoApp', ['ui.bootstrap','ngResource', 'ngRoute', 'angularytics'])
Related
I'm traying to use Angular ui Notifications. When I tray to install it browser tells me "Error: "[$injector:unpr]". The problem is that for me the dependencies are ok. The code:
var app = angular.module('app', ['ngRoute', 'ngTable', 'ui-notification']);
app.controller('clientesController', ['$scope', 'NgTableParams', 'ui-notification', 'clientesService',
function ($scope, NgTableParams, Notification, clientesService) {
EDIT:
The way I'm pulling in my js files:
<!--Angular Files-->
<script src="app/lib/angular.min.js"></script>
<script src="app/lib/angular-route.min.js"></script>
<script src="app/lib/ng-table.js"></script>
<script src="app/lib/angular-ui-notification.min.js"></script>
<!-- App files-->
<script src="app/app.js"></script>
<script src="app/controllers/clientes/clientesController.js"></script>
<script src="app/services/clientes/clientesService.js"></script>
Thanks for your help!
https://github.com/alexcrack/angular-ui-notification#service
Module name: "ui-notification"
Service: "Notification"
Configuration provider: "NotificationProvider"
Change then name of the injected service to the correct name:
app.controller('clientesController', ['$scope', 'NgTableParams', 'Notification'...
trying to learn angluar route constructs but I fail on implementing ngRoute
The Definition of my app
var app= angular.module('app', ['ngMaterial', 'ngRoute']);
The configuration
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/'});
}]);
My directive to use the router
app.directive("applicationDirective", function($router) {
return {
restrict : "E",
templateUrl: 'app/templates/application.html',
controller: 'applicationController'
};
});
And my implemention in HTML
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-messages.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.js"></script>
<script src="app/app.js"></script>
Seems to be OK; but Fails... With:
angular.js:14525 Error: [$injector:unpr] Unknown provider: $routerProvider <- $router <- applicationDirectiveDirective
http://errors.angularjs.org/1.6.4/$injector/unpr?p0=%24routerProvider%20%3C-%20%24router%20%3C-%20applicationDirectiveDirective
at angular.js:66
at angular.js:4789
at Object.getService [as get] (angular.js:4944)
at angular.js:4794
at getService (angular.js:4944)
at injectionArgs (angular.js:4969)
at Object.invoke (angular.js:4995)
at angular.js:8110
at forEach (angular.js:403)
at Object.<anonymous> (angular.js:8108)
Has anybody got a hint how to solve it.
regards
n00n
You need to set routing in your config function. This directive is not needed and it doesn't work like this.
Check this out:
https://www.w3schools.com/angular/angular_routing.asp
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>
I am trying to create a simple Angular app and I have recently added a router in route.js. For some reason the association isn't being made between mainCtrl and someview.html The reason I know this is because the view isn't being injected in <div ng-view></div> Anyone have any idea why?
My folder structure is the following
root
------/app
----------routes.js
----------/views
-----------------someview.html
------/public
---------mainCtrl.js
---------index.html
server.js
mainCtrl.js
angular.module('LiveAPP',[])
.controller('MainCtrl', function($scope) {
$scope.Artists = [
{name:"Blink 182",age:14},
{name:"Led Zeppelin",age:12},
{name:"Lil Wayne",age:11}
];
$scope.number = 100;
});
someview.html
<div>{{number}}</div>
route.js
angular.module('LiveAPP', ['ngRoute'])
.config(function($routeProvider, $httpProvider) {
$routeProvider
.when('/', {
templateUrl : '/views/someview.html',
controller : 'MainCtrl'
})
});
index.html
<!doctype html>
<html ng-app='LiveAPP'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">
</script>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
<script src="mainCtrl.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
server.js
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.listen(3000);
console.log("Listening at 3000")
angular.module('LiveAPP',[])
.controller('MainCtrl', function($scope) {
Here, you define a module LiveAPP, that doesn't depend on any other module, and add a controller to this module.
angular.module('LiveAPP', ['ngRoute'])
.config(function($routeProvider, $httpProvider) {
And here, you redefine, once again, a module with the same name, depending on ngRoute. But since you're redefining it, you effectively overwrite the previously defined module and all its components.
A module must be defined once, and only once.
I don't know much about express, but I also don't understand why all your files are not under public, since that is apparently the directory that the web server serves.
I was curious if anybody was familiar with separating routes from the main app config function. My route list is getting quite large and I wanted to move them into a separate file and load them into the main config. I have seen this done before but I cannot remember or find where I saw it. Any help would be appreciated.
You can (and should !) use AngularJS modules to separate your application into modules.
Then, each module can define its own routes (with its own .config).
Then, in your main module (usually "app"), you just need to require them as dependencies and you're set to go.
angular.module('blog', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
...
}];
angular.module('app', ['blog', 'user']);
Then you can have each module in its own file.
You can put your config function in a separate file easily:
App-config.js
angular.module('app').config(function(...){...});
Just make sure you include the module definition before you include App-config.js.
App-module.js
angular.module('app',[...]).controller(...).etc
It's easy to set up config file separately. There are few other ways to set this up, and I played around with those structure for config; this seems to work for me the best. Enjoy!
---> myApp.html
<html lang="en" ng-app="myApp">
<head>
<script src="lib/angular.min.js" type="text/javascript"></script>
<script src="lib/angular-route.min.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/controller.js" type="text/javascript"></script>
...
</head>
<body ng-controller="MainCtrl">
<!-- /* Using ng-view with routeProvider to render page templates */ -->
<div data-ng-view></div>
</body>
</html>
----> app.js
'use strict';
angular.module('myApp', [
'ngRoute',
'ngAnimate',
'myApp.controllers'
]).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/page1', {
templateUrl : 'partials/page1.html',
controller : 'page1Controller'
});
$routeProvider.when('/page2', {
templateUrl : 'partials/page2.html',
controller : 'page2Controller'
});
$routeProvider.when('/images', {
templateUrl : 'partials/page3.html',
controller : 'page3Controller'
});
$routeProvider.otherwise({redirectTo: '/page1'});
}]);
--->controller.js
angular.module('myApp.controllers', ['myModules'])
.controller('mainCtrl', function($scope) {
...
})
.controller('page1', function($scope) {
...
})
.controller('page2', function($scope) {
...
})
.controller('page3', function($scope) {
...
});