We Keep Coding

Information doesn't refresh after clicking on link in AngularJS. I've got {{ value }} but not the data

I have an Angular app that takes information from few JSON files.
The first JSON file contains data about cities and managers. Like this:
[
{
"link" : "veliky_novgorod",
"city" : "Великий Новгород",
"manager" : "mr. Sminth",
},
{
"link" : "magnitogorsk",
"city" : "Магнитогорск",
"manager" : "mr. Young",
},...
I use it in order to create a page for every city.
My urls look like this: ...index.html#/cities/veliky_novgorod/, ...index.html#/cities/biisk/, ...index.html#/cities/biisk/mobile/, etc.
Everything works fine, but when I try to go from one page to another information from the other JSON (scopes) doesn't load. After changing page I've always got {{ value }}
But when I make refresh manually, everything is going back to normal.
In other words, how can I reload new page after clicking on link. I tried to use window.location.reload() But it doesn't work.
<li ng-repeat="city in cities">
{{city.manager}}
</li>
My module and controller below:
var curryApp = angular.module('CurryApp', [
'ngRoute',
'curryControllers'
]);
curryApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'link_list.html',
controller: 'CurryListCtrl'
}).
when('/cities/:cityId/', {
templateUrl: 'template-total.html',
controller: 'CurryDetailCtrl'
}).
when('/cities/:cityId/mobile/', {
templateUrl: 'template-mobile.html',
controller: 'CurryMobileCtrl'
}).
otherwise({
redirectTo: '/'
});
}]);
That's my controller:
var curryControllers = angular.module('curryControllers', []);
curryControllers.controller('CurryListCtrl', ['$scope', '$http', function($scope, $http) {
$http.get('cities.json').success(function(data) {
$scope.cities = data;
});
}]);
curryControllers.controller('CurryDetailCtrl', ['$scope', '$routeParams', '$http', '$route',
function($scope, $routeParams, $http, $route) {
$scope.reloadRoute = function(){window.location.reload();}
$scope.cityId = $routeParams.cityId;
$http.get('cities.json').success(function(data) {
$scope.cities = data;
$http.get('paidbc.json').success(function(data2) {
$scope.paidBc = data2;
$scope.isActive = function(item) {
return item.link === $scope.cityId;
};
});
});
}]);
curryControllers.controller('CurryMobileCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.cityId = $routeParams.cityId;
}]);

It seems that is an error related with the href attribute. According to docs:
The wrong way to write it:
link1
The correct way to write it:
<a ng-href="http://www.gravatar.com/avatar/{{hash}}">link1</a>
In your case, use:
<a ng-href="#/cities/{{city.link}}" ng-click="reloadRoute()">{{city.manager}}</a>
instead of using only href.

$routeParams undefined when passing to new view & controller

Fairly new to AngularJS and WebAPI here, and figure the best way to learn is by doing. Apologies in advance if this question seems simple - I've spent a day flipping through StackOverflow and tried them all.
I currently have a separate Master & Detail view, both with their own controller. I am trying to pass the selected ID through to the Details controller so I can query my database using the ID, though am getting "undefined" on my $routeParams. I'm unsure if I am missing something simple, or whether I'm even approaching this correctly.
The controller doesn't seem to like it when I inject '$routeParams' either.
My app.js module:
var app = angular.module("ProjectDashboardModule", ["ngRoute"]);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when("/", { templateUrl: "/Home/Index" })
.when("/Project", { templateUrl: '/Project/Index', controller: 'ProjectCrudController' })
.when("/Project/project/:id", {templateUrl:'/Project/project', controller: 'ProjectTaskController' });
$routeProvider.otherwise({redirectTo: '/home' });
$locationProvider.html5Mode(true);
}]);
my Factory.js:
app.factory('projectFactory', ['$http', function ($http) {
var urlBase = '/api/Projects/';
var projectFactory = {};
projectFactory.getProjects = function () {
return $http.get(urlBase);
};
projectFactory.getSingleProject = function (id) {
return $http.get(urlBase + '/' + id);
};
return projectFactory;
}]);
my ProjectTaskController.js:
app.controller('ProjectTaskController', ['$scope', "$routeParams", 'projectFactory', function ($scope, $routeParams, projectFactory) {
alert($routeParams.id)
$scope.project;
$scope.message;
getProjectById($routeParams.id);
function getProjectById(id) {
projectFactory.getSingleProject(id)
.success(function (data) {
$scope.project = data;
})
.error(function (error) {
$scope.message = 'error retrieving project ' + error.message;
});
}
}]);

I found that my problem was that all my angular script references were scattered. I moved all my custom script references (controller, factory, module) to index.cshtml and fixed the issue.

Can I call Route Provider service in Controller in angular js asp.net mvc

I am using controller in my Angularjs which gets question one by one from server and i want on specific condition this controller should call a routeprovider that should change my current view with templateUrl and put into a directive
my question is can i call route provider in controller rather than module
here is my CreateController
var CreateController = ['$scope', '$http', function ($scope, $http) {
$scope.model = {
};
................>
.................>
$scope.NextQuestion = function () {
$http.post('/Testing/NextQuestion', {
........................>
}).success(function (newdata) {
$scope.model = newdata;
var inccomplevel = $scope.model.servercomplevel;
if (qId == 10) {
here i need the code for routeProvider and directive please provide me help
}
......................>
}];
i did the route provider in app.js file there it works
here is the code for app.js when i do like this it works and when i shift the code of route provider
to the create controller in condition if qId == 10 there it does not work
var app = angular.module('app', ['ngRoute']);
app.controller('CreateController', CreateController);
app.config(function ($routeProvider) {
$routeProvider
.when('/',
{
templateUrl: 'Partials/TestCompleted.html',
controller: 'AppCtrl'
})
.otherwise({ redirectTo: '/' });
});
app.controller("AppCtrl",function ($scope) {
$scope.newmodel = {
}
});

Instead of trying to change the value of the templateUrl on the route, you should define another route. Then you can simply switch routes.
To change the route/view, you need update the path. You can do this using the $location service.
See AngularJS : How do I switch views from a controller function?

Getting URL parameters using $route

I have the following url:
http://myurl.dev/users/32
I want to pass the last parameter 32 to a $http.get request but I can't figure out how to pass it.
So far I have this:
var matchmaker = angular.module('matchmaker', ['ngRoute'], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
})
.controller('LocationCtrl', ['$scope', '$http', '$location', '$routeParams', '$route', function($scope, $http, $location, $routeParams, $route) {
var id = $route.current.params.id;
console.log(id);
$http.get('http://myurl.dev/services/' + id ).success(function(data)
{
$scope.applicants = data;
});
}]);
In the console it's saying:
Cannot read property 'params' of undefined
Can anyone tell me what I'm doing wrong please?
Edit:
Angular isn't generating the url, it's a server side generated url
Edit 2.0
Here's the config for the routeProvider with actual route parameters:
var matchmaker = angular.module('matchmaker', ['ngRoute'], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
})
.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/matchmaker/locations/:id', {
controller: 'LocationCtrl'
});
$locationProvider.html5Mode(true);
});

Put a console.log($routeParams); in your controller and check its value.
If it is Object {} check if you have a route definition using parameters:
var module = angular.module('ngRouteExample', ['ngRoute']);
module.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/test/:id', {
templateUrl: 'test.html',
controller: 'TestController'
});
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
});
If so, you will get this output in the console:
Object {id: "42"}

It is because you trying to get value which doesn't exist at that moment, that's how javascript works. You need to specify that you want these values when they are ready using '$routeChangeSuccess' event.
.controller('PagesCtrl', function ($rootScope, $scope, $routeParams, $route) {
//If you want to use URL attributes before the website is loaded
$rootScope.$on('$routeChangeSuccess', function () {
//You can use your url params here
$http.get('http://myurl.dev/services/' + $routeParams.id )
.success(function(data) {
$scope.applicants = data;
});
});
});

AngularJS: Load templateUrl after all data received by the controller

I'd like to display my template when the data coming from my server are loaded.
I created a module called Services with inside some services to load my data, I'm using HomeService for my example.
var app = angular.module('MyApp', ['Services']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/',
{
templateUrl: 'home.html',
controller: 'Home_Ctrl',
resolve: {
loadData: //??
}
});
}]);
app.controller('Home_Ctrl', ['$scope', 'HomeService', function($scope, HomeService) {
$scope.data = HomeService.getData();
}
I guess I need to create a promise to do that. Is it possible to put this function inside my controller?
I mean, I don't want something like that:
var ctrl = app.controller('Home_Ctrl', ['$scope', 'HomeService', function($scope, HomeService) {
//Do something
}
//Promise
ctrl.fct = function($q) {
}
I want something like that:
app.controller('Home_Ctrl', ['$scope', '$q', 'HomeService', function($scope, $q, HomeService) {
//Do something
//Promise
this.fct = function() {}
}
Any idea?
Thanks.

You could use resolve property of controller.
You could create a object which will return promise and assign to controller resolve function and inject the same in controller definition kindly see very simple example
$routeProvider.when('/ExitPoll', {
templateUrl: '/partials/ExitPoll.html', controller: exitpollController, resolve: {
responseData: ['$http', function ($http) {
return $http.get('/Candidate/GetExitPolls/hissar').then(function (response) {
return response.data;
});
}],
}
});
var exitpollController = ['$scope', '$http','responseData','$rootScope',
function ($scope, $http, responseData, $rootScope) {
}];