Angular $routeparams empty using $stateprovider - javascript

I am trying to have a link in my page such as:
<a ng-href="#/Page/{{x.ID}}">{{x.ID}}</a>
Which succesfully gets to the angular controller but however the $routeparams are null when I am expecting to get the {{ x.ID }} back:
pageController.js
angular.module("myApp.Pages").controller("pageController", ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
console.log($routeParams);
}]);
And am referencing the state in my $stateprovider such as (in appRouting.js):
$stateprovider.state('Page', {
url: '/Page/:userId',
templateUrl: 'App/Pages/page.html',
controller: 'pageController'
})
my app.js
angular.module("myApp", [
// User defined modules
'myApp.Pages', // Pages
'myApp.Core', // Core
// Angular modules
'ui.router', // state routing
'ngRoute', // angular routing
'LocalStorageModule', //local browser storage
'angularRangeSlider',
'ngFileUpload'
])
Any ideas?

$stateParams instead of $routeParams

Related

AngularJS DI with different modules

I am having some issues trying to use the Angular dependency injection with different modules. At the moment, I have the following. In my index.html, the files are loaded in the following order (end of <body> tag):
network.js
authentication.js
login.js
app.js
network.js
angular.module('services.network', [])
.factory('Network', ['$http', '$state', function ($http, $state) { ... }]);
authentication.js
angular.module('services.authentication', ['services.network'])
.factory('Authentication', ['$state', 'Network', function ($state, Network) { ... }]);
login.js
angular.module('controllers.login', [])
.controller('LoginCtrl', ['$scope', function ($scope) { ... }]);
app.js
var app = angular.module('parkmobi', [
'ngRoute',
'services.network',
'services.authentication',
'controllers.login'
]);
app.run(['$rootScope', function ($rootScope) {
$rootScope.$on('$viewContentLoaded', function () {
$(document).foundation('reflow');
});
}])
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
});
}]);
Up until this point, everything seems to be quite happy. Now, however, I want to use the Authentication service in the LoginCtrl, which I would have thought is done as follows:
login.js
angular.module('controllers.login', ['services.authentication'])
.controller('LoginCtrl', ['$scope', 'Authentication', function ($scope, Authentication) { ... }]);
However, this causes the following injection error:
Error: [$injector:unpr] http://errors.angularjs.org/1.3.15/$injector/unpr?p0=%24stateProvider%20%3C-%20%24state%20%3C-%20Authentication
R/<#http://localhost/testapp/vendor/angularjs/angular.min.js:6:417
Error came because you've injected $state provider in your Authentication factory, without having ui.router module in app.js parkmobi module.
It should use $route instead of $state as your are doing your route in angular-router.
angular.module('services.authentication', ['services.network'])
.factory('Authentication', ['$route', 'Network', function ($route, Network) { ... }]);
Or if you want to use ui-router then you need to use $stateProvider while registering states & ui.router module should be include in your app.

AngularJS - State name passed into controller doesn't work

I'm new to angular and I can't figure out why this isn't working.
When I call {{$state.current.name}} in my view it works perfectly fine, but as soon as I try to pass it to my controller, the state gets "lost".
Here is my setup:
Module:
angular.module('app', ['ui.router'])
.run(function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
})
//followed by boilerplate ui router setup
View:
<home-nav-bar></home-nav-bar>
Directive:
angular.module('app')
.directive('homeNavBar', function () {
return {
restrict: 'E',
templateUrl: 'homeNavBarView.html',
controller: 'navCtrl'
};
})
})();
Controller:
angular.module('app')
.controller('navCtrl', function ($state, $scope) {
alert($state.current.name); //returns empty
});
})();
At this point I am clueless as to why I can get the state name in the view but not in my controller..
Well, ui-router docs say you can access current state's config object using the current property of $state, so there is absolutely no need to attach anything to $rootScope. I have just tested something along the lines of (simplified a bit for readability):
angular.module('myApp')
.controller('SomeCtrl', function ($scope, $state) {
console.log($state.current);
});
The result in Chrome console is:
Object {url: "/some", templateUrl: "app/some.html", controller: "SomeCtrl", name: "some"}
So as you can see all information should be available along with the name.

angular.js routing and stateparams

I'm trying to modify standard user module of meanjs. I added a simple route:
state('users', {
url: '/users/:username',
templateUrl: 'modules/users/views/view-profile.client.view.html'
});
And in my view:
data-ng-controller="ViewProfileController" data-ng-init="findUser()"
I also injected $stateParams to my controller. So in my ViewProfileController - findUser function, when I write this:
console.log($stateParams.username)
I expect to get username parameter. But it returns undefined.
When I set the route this way,
state('users', {
url: '/users/:username',
template: function ($stateParams){
return $stateParams.username;
}
});
it returns username. I don't know what is wrong or missing. Any ideas?
edit: this was my full controller code
'use strict';
angular.module('users').controller('ViewProfileController', ['$scope', '$http', '$stateParams', '$location', 'Users', 'Authentication',
function($scope, $http, $location, Users, Authentication, $stateParams) {
$scope.user = Authentication.user;
$scope.findUser = function () {
console.log($stateParams);
...
};
}
]);
Your dependencies don't match up - the list of dependencies need to match the parameters in the controller function in the same order:
'use strict';
angular.module('users')
.controller('ViewProfileController', ['$scope', '$http', '$stateParams', '$location', 'Users', 'Authentication',
function($scope, $http, $stateParams, $location, Users, Authentication) {
$scope.user = Authentication.user;
$scope.findUser = function () {
console.log($stateParams);
};
}
]);
I should use controller instead of template.
Replace into you code the template: to the follow snippet:
controller: function($stateParams){
console.log('username: '+$stateParams.username);
}
You can see a complete example of this feature here

How to get value from url in angularjs

I am having the url as follows:
http://test.com/#/mya/classified/42/
How can I fetch 42 from this usl in angularjs?
Is there any way in angularjs $location to fetch the same?.
This is what $stateParams service is for:
myApp.controller('MyCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
console.log($stateParams.id);
}]);

Angularjs - inject controller dependency automatically in $scope

Is there a way to inject automatically a dependency (or a resolve) in the $scope without manually append it to $scope ?
(with or without UI-Router)
Would the "controllerAs" syntax be of any help ?
.config(['$stateProvider',
function($stateProvider) {
$stateProvider
.state('test', {
url: '/test',
templateUrl: 'test.tpl.html',
controller: 'TestCtrl',
})
;
}
])
.controller('TestCtrl', ['$scope', 'myService',
function($scope, $rootScope, accruals, myService) {
$scope.myService= myService; // how can I avoid this every time ?
}
])
Thanks

Categories

Resources