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.
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.
how to call the external controller using resolve in angularjs
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp .config(function ($routeProvider, $locationProvider) {
$routeProvider
// home page
.when('/', {
templateUrl: 'Samples/accordion.html',
controller: "AddStudentController",
})
});
accordion.html
<h1>AddStudent</h1>
mainApp.controller('AddStudentController', function($scope) {
$scope.message = "This page will be used to display add student form";
});
how to call the controller using resolve.
Please share your suggestions,
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 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 want to use angular's routing function only to bind views and controllers without indicating template and ng-view.
This is what I have so far, and is working well.
JavaScript
angular.module('myModule', [])
.config([
'$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
controller:"myCtrl", template:"whatever"
})
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
}
])
.controller('myCtrl', function($scope){
angular.bootstrap(document, ['myModue'])
HTML
hello!
<div ng-view></div>
This is what I want, and is not working
JavaScript
angular.module('myModule', [])
.config([
'$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
controller:'myCtrl'
})
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
}
])
.controller('myCtrl', function($scope){})
angular.bootstrap(document, ['myModule'])
HTML
hello!
How can I do this?
The way you are trying to do it seems conflicting with the concept of Single Page Application
However what you want to do is possible in a different way, the Deep Linking cookbook example may help shed some light for you:
http://docs.angularjs.org/cookbook/deeplinking