I am having some trouble injecting kinvey into my angular application. I have been getting the following error with the code below: Uncaught Error: [$injector:unpr]
var app = angular.module('FantasySeasons', ['snap', 'ngRoute', 'ngResource', 'ngTouch',
'angular-carousel', 'FSControllers', 'FSPartials', 'kinvey']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl : 'partials/home.html',
controller : 'HomeCtrl'
}).otherwise({
redirectTo : '/'
});
}]);
app.run(function($kinvey){
var promise = $kinvey.init({
appKey: 'your app key',
appSecret: 'your app secret'
});
});
As the creator of the Kinvey Angular library, I don’t see anything wrong with declaring the Kinvey dependency.
Since the error message is not specific to any module, I can only guess at this point. One thing to note is the ngRoute module is no longer part of the AngularJS core (since 1.2.0). To use it, you need to include it separately, see docs. Make sure this is the case. Otherwise, you run into that error.
Related
I've done quick client-side routing with angular 1.4.4. In every tutorial I saw approach where you assign module to variable (usually: app) and perform different tasks on it, like below:
var app = angular.module('skeleton', [ngResource, ngRoute]);
app.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$routeProvider
.when('/', {
templateUrl: '/partials/main',
controller: 'MainController'
});
});
app.controller('MainController', function ($scope) {
$scope.test = 'Hi Angular';
});
In tutorial which I'm doing now I see completely different approach:
angular.module('skeleton', ['ngResource', 'ngRoute']);
angular.module('skeleton').config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$routeProvider
.when('/', { templateUrl: '/partials/main', controller: 'mainCtrl'});
});
angular.module('skeleton').controller('mainCtrl', function($scope){
$scope.test = "Hello Angular";
});
I assumed it's just preference, so i went with 'app' version as I find it more readable.
Unfortunately it causes angular to throw
ReferenceError: ngResource is not defined
Anyone know what is cause of this behaviour?
Which approach do you prefer?
You need to to inject dependency properly, pass ngResource and ngRoute within quotes, otherwise they are treated as variable hence you must be getting the error.
var app = angular.module('skeleton', ['ngResource', 'ngRoute']);
Firstly , The issue is not with assigning the module declaration to a variable 'app' and then using it. Both approaches work but it is better to declare without assigning it to a variable which avoids variable collisions which could lead to module overriding.
The issue in your code is the syntax. Please correct it as shown below :
var app = angular.module('skeleton', ['ngResource', 'ngRoute']);
dependency Annotation can also be done by assigning the array of dependencies to the '$inject' property or directly as the function properties .
Please refer to this angular guide for reference :
https://docs.angularjs.org/guide/di
Some I'm new to routing and single page web apps, but I've been trying to learn Angular correctly. There's some trouble I'm experiencing with it however and a few weird questions. I followed a guide on structuring your directory and mine looks something like this:
app/
components/
profile/
profile.html
ProfileModel.js
ProfileController.js
ProfileFactory.js
app.module.js
app.routes.js
My main module is located in app.module.js and is dependency injected with ngRoute and profile.app (the module for profile view from ProfileModel.js). It is declared like this:
angular
.module('app', ['ngRoute', 'profile.app'])
.controller('MainController', MainController);
function MainController() {
this.message = 'This is the home page';
}
Then in my app.routes.js file, I have declared all the routes the applications needs (so far only one, which is profile):
angular
.module('app')
.config(routeConfig);
routeConfig.$inject = ['$locationProvider', '$routeProvider'];
function routeConfig ($locationProvider, $routeProvider) {
$routeProvider
.when('/user/:user_id', {
templateUrl: '/app/components/profile/profile.html',
controller: 'ProfileController',
controllerAs: 'profile'
}
)
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
This is my ProfileController.js:
angular
.module('app.profile')
.controller('ProfileController', ProfileController);
ProfileController.$inject = ['ProfileFactory', '$routeParams'];
function ProfileController(ProfileFactory, $routeParams) {
var vm = this;
vm.user_id = $routeParams.user;
console.log($routeParams.user_id);
vm = ProfileFactory.userProfile(vm.user_id); //Gets the profile of the user and sets to to vm
}
So I have two main questions. $routeParams.user_id is logged as nothing despite I have defined the route in app.routes.js. This is weird because I have an ng-view directive in my index.html (the HTML file that includes every single .js file). Which means that I should have immediate access to the routing parameters once the controller and its dependencies are instantiated. However, when I go to http://example.com/user/1, I get nothing logged (undefined).
My second question is I included ngRoute as a dependency in profile.app and my main module (in which profile.app is a dependency). However, I later removed ngRoute from profile.app as a dependency, yet I left the injection of $routeParams inside my ProfileController and AngularJS didn't complain at all. This seems weird because the dependency is no longer explicitly present inside profile.app. So how come I can still seemingly inject $routeParams despite not having ngRoute in my profile.app module? Is it because it is getting ngRoute from the main module?
I believe the problem is that you are setting controllerAs to 'profile' but then in the controller you write var vm = this;
These two need to be the same so you could write controllerAs: 'vm', or var profile = this;
I am getting the unknown provider error and I am not sure why. My angular controller is not finding the service that I have created. My Service is defined as:
var app = angular.module('losApp');
app.service('ClientService', ['$scope','$http','$q',function($scope,$http,$q){
var client = {};//empty oject that will store multiple function
return client; //return the client object
}]);
Also, my controller is defined as:
var app = angular.module('losApp');
app.controller('DashboardController', ['$scope', '$modal','ClientService',function($scope, $modal,ClientService){}
In my index.html, the scripts tags are declare as follows:
<script src="js/app.js"></script>
<script src="js/services/ClientService.js"></script>
<script src="js/controllers/DashboardController.js"></script>
In app.js, I am using ui-router module to handle routing for the application.
var app = angular.module('losApp', ['ngMessages', 'ui.bootstrap', 'angularFileUpload', 'ui.router', 'summernote', 'angucomplete-alt', 'ngCookies']);
app.config(function($stateProvider,$urlRouterProvider,$locationProvider, $interpolateProvider){
$urlRouterProvider.otherwise('/'); //redirects to this page is
$stateProvider.state('/',{
url:'/',
views : {
// the main template will be placed here (relatively named)
'':{
templateUrl: '/js/pages/dashboard.html',
controller: 'DashboardController'
}
}
});
});
In browser console log and clicked on the angular error message. Additionally, I followed what angularjs docs suggested, but still no success.
What I am doing wrong and thanks in advance.
I found out why I was getting unknown provider.It was because I had injected the $scope object into the factory, which is not allowed.
What's wrong with this AngularJS configuration code?
(function () {
var ip = 'x.x.x.x';
var app = angular.module('cmal', ['controllers', 'directives', 'services', 'ngRoute'])
.constant("baseUrl", "http://" + ip + ":303/angular")
.config( function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/', { templateUrl: "index.html"});
$routeProvider.when('/users', { templateUrl: "users.html"});
$routeProvider.otherwise({template: "Sorry, the page you are trying to reach doesn't exist."});
});
})();
EDIT: it's not the slash error. This still doesn't work for me and all i get in the console is "Uncaught object"
EDIT 2: Well i didn't realize you needed to import another js script for routing. But so now that I have done that, I get no error, but none of the routes work.
You are probably not including the separate angular-route script.
Take a look at this answer for more details.
This isn't really an answer, but an alternative solution...I used a separate routing framework.
UI-Router (a link to the egghead tutorial)
I'm new to Angular so i'm still getting my head around how it works. I've stumbled into a problem however (quite early on...) and the below code is giving me "Uncaught Object" in the console and breaks Angular. The .config section is the culprit, if I remove it, the page loads fine. I'm not entirely sure how the error is being caused because to me, everything looks fine?
var app = angular.module('app', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/dashboard', {
templateUrl: '/app/views/admin.html',
controller: 'DashboardController'
})
.otherwise('/', {
redirectTo: '/'
})
$locationProvider.html5mode(true);
}])
.controller('DashboardController', ['$scope', function ($scope, Security) {
$scope.security = Security;
}])
I had the same error; if you activate Chrome to pause on exceptions, you'll be able to have more detailed error information
.otherwise takes only one parameter - an object which contains information on what needs to be done for routes that are not defined.
In your case, you seem to be passing a route to it in addition to an object.
Replace:
.otherwise('/', {
redirectTo: '/'
})
with
.otherwise({
redirectTo: '/dashboard'
});
Note that you need to redirect to a path that exists. '/' is a path that does not exist. '/dashboard' is a path that does, hence you redirect to it. Or, define a handler for '/' path
I'm posting my own solution, as several factors seem to be behind this issue and nobody has talked about this so far.
That is, try to write your code outside of $.ready();
<script>
$(function(){
// This leaves "Uncaught object" error in Chrome!
// var app = angular.module('testApp', ['ngRoute']);
});
// So get it out of $.ready()!!
var app = angular.module('testApp', ['ngRoute']);
</script>
In this instance it looks like the error has been caused by this:
$locationProvider.html5mode(true); <-- mode should be capital 'M'.
Be sure your angular.js is loaded before angular-route.js in your HTML file.
like:
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-route.js"></script>
I just ran into this, in my case it was due to using UI-Router and having a duplicated state name.