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.
Related
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;
}])
I use next configuration for routing:
.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/appointments', {
controller: 'AppointmentController'
})
}])
And Controller:
.controller('AppointmentController', ['$scope', '$http', '$sce', function ($scope, $http, $sce) {
alert('Test')
}]);
Url is looks like as: http://blogapp.com/appointments
So, I have not error on page, but alert() does not work when I enter URL
Try going to
http://blogapp.com/#/appointments
The hash would be included by default for Angular.
As Arthur commented, you would need to go to http://blogapp.com/#/appointments
To stop this and remove the #, replace your config with:
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/appointments', {
controller: 'AppointmentController'
})
$locationProvider.html5Mode(true);
}])
I've been struggling with using ng-view for my subview of my application. I've followed multiple tutorials and have even checked the routeProvider and locationProvider attributes to ensure that they were pointing to the correct path.
index.html
<html ng-app="elephantApp">
...
<div id="view" ng-view>{{$scope.message}}</div>
...
</html>
application.js
/*
Main AngularJS for Elephant Blog App
*/
var elephantApp = angular.module("elephantApp", ["ngRoute", "ui.bootstrap"]);
elephantApp.config(function ($routeProvider, $locationProvider){
$routeProvider
// Home
.when('/', {
templateUrl: "app/partials/home.html",
controller: "ElephantController"
})
.when('/about', {
templateUrl: 'partials/about.html',
controller: 'PageCtrl'
}) ;
$locationProvider
.html5Mode(true);
});
elephantApp.controller("ElephantController", function($scope, $route, $routeParams, $location){
$scope.contentClass = 'content-home';
$scope.message = {message: "Hi"};
});
elephantApp.controller("PageCtrl", function($scope, $route, $routeParams, $location){
$scope.contentClass = 'content';
$scope.model = {message: "Hey!"};
});
/*
function ElephantController($scope, $route, $routeParams, $location){
$scope.contentClass = 'content-home';
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
$scope.model = {message: "Hey"};
}
*/
So I have no idea what's going on at all.
I have even tried to do code like:
// Pages
.when("/about", {templateUrl: "partials/about.html", controller: "PageCtrl"})
.when("/faq", {templateUrl: "partials/faq.html", controller: "PageCtrl"})
.when("/contact", {templateUrl: "partials/contact.html", controller: "PageCtrl"})
// Blog
.when("/blog", {templateUrl: "partials/blog.html", controller: "BlogCtrl"})
.when("/blog/post", {templateUrl: "partials/blog_item.html", controller: "BlogCtrl"})
// else 404
.otherwise("/404", {
templateUrl: "partials/404.html",
controller: "PageCtrl"
});
I would like to use the above code as it is what I mainly want to do. Though it isn't working. The ng-includes work but not my ng-views. Am I missing something?
Thanks.
By default, a route in angular is the hash in the URI path after #, for example http://app/#/about. By setting $locationProvider.html5Mode to true how you done, we can write without # http://app/about, but need that server always returning index.html. For this purposes you can use, for example, Express server: http://www.seankenny.me/blog/2013/08/05/angularjs-in-html5-mode-with-expressjs/
var app = angular.module('TaskApp', []);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/Home', {
templateUrl: '/Home/Index',
controller: 'IndexController'
});
$locationProvider.html5Mode(true);
//$locationProvider.hashPrefix('');
}]);
This code is not working properly ,When I remove $routeProvider all reference it work properly but I need $routeProvider how I solve it ?
app.config(['$routeProvider', '$locationProvider',
function ($locationProvider, $routeProvider) {
Oops
EDIT
var app = angular.module('TaskApp', ['ngRoute']);
You also need to add the route service to the app.
this is my app.js
var cricketapp = angular.module('cricketapp', ['ngCookies']).
config(['$routeProvider', function($routeProvider, $httpProvider, $cookies){
$routeProvider.
when('/', {
templateUrl: '/partials/games-pending-entry.html',
controller: HomeCtrl
}).
when('game/:gameId',{
templateUrl: 'partials/shortlist.html',
controller: ShortlistCtrl
}).
otherwise({redirectTo: '/'});
//$httpProvider.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;
}]);
and controllers.js
function HomeCtrl($scope, $http){
$http.get('/api/games-pending-entry').success(function(data){
$scope.games_pending_entry = data;
});
}
function ShortlistCtrl($scope, $http, $routeParams){
$scope.gameId = $routeParams.gameId;
$http.get('api/get-players').success(function(data){
$scope.players = data;
})
}
and in my html, i am calling the link as
<a class='btn btn-warning' href='#/game/{{ game.id }}'>Enter Shortlist</a>
when i click on this link, i am redirected back to /#/
where am i going wrong?
Your $routeProvider rules are wrong:
when('game/:gameId',{
should become
when('/game/:gameId',{
As the route isn't recognized, it redirects to '/'. Changing that will most likely solve the problem.
Also, you may find ngHref useful, to avoid having links broken, before the {{model}} bindings resolved: http://docs.angularjs.org/api/ng.directive:ngHref