I've been googling about this for the past hour but couldn't find an answer.
I want to change the template when there's a parameter passed in the URL.
I tried using hash to retrieve it by calling $location.hash in the controller but I can't figure out how to have the routeProvider detect it, here's my code:
'use strict';
angular.module('myApp.projects', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/projects', {
templateUrl: 'modules/projects/projects.html',
controller: 'projectsCtrl'
});
}])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/projects:project', {
// $routeProvider.when('/projects#project', { // Tried this and it didn't work as well
templateUrl: 'modules/projects/single-project.html',
controller: 'projectsCtrl'
});
}])
.controller('projectsCtrl',['$scope','portfolioService','$location',
function($scope,portfolioService,$location){
$scope.portfolio = portfolioService.portfolio;
console.info('$location.hash',$location.hash());
// $scope.currentProject = $location;
}])
Related
I'm trying to use the routeParams so I can get part of a URL, but it gets me into an infinite loop when I try to access to the URL with a GET parameter. Currently, I have the following defined:
var nappet = angular.module('nappet', ['ngRoute', 'ngCookies']);
nappet.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {templateUrl: 'app/home/view/homeView.html', controller: 'homeController'})
.when('/organizadores', {templateUrl: 'app/organizers/view/organizerView.html', controller: 'organizerController'})
.when('/organizadores/:organizer', {templateUrl: 'app/organizers/view/organizerDetailView.html', controller: 'organizerController'})
$locationProvider.html5Mode(true);
}]);
And here's the controller:
nappet.controller('organizerController', function($scope, $location, $cookies, $http, $routeParams) {
if($routeParams.organizer === undefined) {
console.log('Works');
} else {
console.log('Infinite loop');
}
});
So, if I put anything replacing the organizer param, it prints that "Infinite loop" message in a loop, but it works when I don't use any parameter on the URL. What could be the problem here?
You forgot to add the .otherwise({redirectTo:'/organizadores'}); instruction to your $routeProvider.
I have a:
main module : kp
sub module : kp.venue
I want kp.venue to have it's own "route" definitions (for all paths relative to that module).
This is what I am trying to achieve in the code bellow.
Can anyone explain me why it doesn't work?
I followed the technique presented in this post: https://stackoverflow.com/a/15301427/971008
(function () {
'use strict';
angular.module('kp.venue', [])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when("/venue", {
template : "<p>This is the venue module</p>",
controller: "VenueCtrl"
});
}
])
.controller('VenueCtrl', ['$scope',
function($scope){
console.log("VenueController");
}
]);
angular.module('kp', ['ngRoute', 'ngAnimate', 'kp.venue'])
.config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$locationProvider.html5Mode({enabled:true, requireBase:false});
$routeProvider
.when("/", {
template: "<p>main app</p>",
controller: "MainController"
})
.otherwise({
redirectTo: '/'
});
}
]);
//Load controller
angular.module('kp')
.controller('MainController', ['$scope',
function($scope) {
$scope.test = "Testing...";
}
]);
}());
Note that I have already tried to move "kp.venue" bellow the definition of "kp" module to be sure that it was not a problem related to things not being loaded in the right order.
I am trying to get rid of the url looking like http://example.com/#/album/0 and have it look more like http://example.com/album/0.
I have the following code
(function() {
var app = angular.module('chp', ['ngRoute', 'projectControllers']);
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/directory.html',
controller: 'ProjectsCtrl'
}).
when('/album/:id', {
templateUrl: 'partials/album.html',
controller: 'ProjectDetailCtrl'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
var projectControllers = angular.module('projectControllers', []);
projectControllers.controller('ProjectsCtrl', ['$scope', '$http',
function ($scope, $http) {
$scope.projects = albums;
$scope.filters = { };
}]);
projectControllers.controller('ProjectDetailCtrl', ['$scope', '$routeParams', '$sce',
function($scope, $routeParams, $sce) {
$scope.project = albums[$routeParams.id];
})();
but this is causing my app the break entirely once I add in $locationProvider in the three places shown. Any idea as to why this is not working for me? Also I am including angular-route.js just after jquery and angular.js so that cant be the problem
At a glance it looks all right to me, but you must make sure your server is set up to serve http://example.com/index.html for any route, otherwise it will try to load http://example.com/album/0/index.html before bootstrapping your angular application. What do you see when you enable html5? 404 not found? Console error?
You might also need to add
<base href="/" /> inside <head></head> in your index.html file
I am new to AngularJS and I am having some issues routing. I have my main app.js:
'use strict';
var app = angular.module('app', ['budget']);
angular
.module('app')
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
}]);
and my controller file looks like:
angular
.module('budget', ['budget.services'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/content/app/budget/views/budget.html',
controller: 'budget.homeController'
})
.when('/budget/:year/:month',
{
templateUrl: '/content/app/budget/views/budget.html',
controller: 'budget.homeSelectController'
});
}])
.controller('budget.homeController', function ($scope, budgetStore) {
budgetStore.getCurrentBudget(function (data) {
$scope.budget = data;
});
})
.controller('budget.homeSelectController', function ($scope, $routeParams, budgetStore) {
budgetStore.getBudget($routeParams.month, $routeParams.year, function (data) {
$scope.budget = data;
});
});
Angular only ever routes to the homeController route, it never routes to the second route? Can anyone tell me what I'm doing wrong?
I think you have wrong query string assigning
Did you check this?
pass query string in angular js
<a href="/main.html#/budget/12/12" >Next Page</a>
or
<a href="/main.html#/budget/{{Yourvale1}}/{{Yourvale2}}" >Next Page</a>
Get Query String Value
$routeParams.Yourvale1;
I would like to use proper dependency injection in MyCtrl1to inject the fields of the MyCtrl1.resolve object. I've tried many different combinations of attempting to inject #MyCtrl1.resolve etc. with no luck.
#MyCtrl1 = ($scope, $http, batman, title) ->
$scope.batman = batman.data
$scope.title = title.data
#MyCtrl1.resolve = {
batman: ($http) ->
$http.get('batman.json')
title: ($http) ->
$http.get('title.json')
}
##MyCtrl1.$inject = ['$scope', '$http'] -- commented out because not sure how to inject resolve fields
angular
.module( 'app', [])
.config( ['$routeProvider', '$locationProvider', ($routeProvider, $locationProvider)->
$locationProvider.html5Mode(true)
$routeProvider.when('/', {templateUrl: 'index.html', controller: MyCtrl1, resolve: MyCtrl1.resolve})
$routeProvider.otherwise({redirectTo: '/'})
])
angular.bootstrap(document,['app'])
Resolve is a property of a route and not a controller. Controllers would be injected with dependencies defined on a route level, there is no need to specify resolve properties on a controller.
Taking one of your examples (transformed to JavaScript), you would define your controller as always, that is:
MyCtrl1 = function($scope, $http, batman, title) {
$scope.batman = batman.data;
$scope.title = title.data;
}
and then the resolve property on a route:
angular.module('app', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true)
$routeProvider.when('/',{templateUrl: 'index.html', controller: MyCtrl1, resolve: {
batman: ['$http', function($http) {
return $http.get(..).then(function(response){
return response.data;
});
}],
title: ['$http', function($http) {
return //as above
}]
}});
$routeProvider.otherwise({redirectTo: '/'});
}]);
If you want to minify the code using resolve section of routing you need to use array-style annotations - I've included this in the example above.