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;
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;
}])
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 am working on an app about routing, my code:
//HTML, I passed a 'test' into routing
Test
<div data-ng-view=""></div>
//Template
<h1>{{res}}</h1>
//Angularjs
var app = angular.module("dictApp", ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/details/:test', {
templateUrl: 'template.html',
controller: 'testCtrl'
});
}]);
app.controller('testCtrl', function ($scope, $routeProvider) {
$scope.res = $routeProvider.test;
});
//The template is displayed as
{{res}}
The template page should display 'test', but I don't know why it didn't work.
Thansk in advance.
'test' parameter should be available in $routeParams.
app.controller('testCtrl', function ($scope, $routeParams) {
$scope.res = $routeParams.test;
});
The service that exposes the route parameters is $routeParams. $routeProvider is the provider used to configure the routes in the app like the one you have done in your code using .when method as well
You need to inject $routeParams and use it instead of $routeProvider
app.controller('testCtrl', function ($scope, $routeParams) {
$scope.res = $routeParams.test;
});
Please consider the this code where the routeProvider is needed to inject page(n).html in ng-view.
In addition to the console error:
unknown provider: $routeProviderProvider <- $routeProvider
The argument to function routeIt is the name of the page to navigate to, How can I mix a conditional switch with routeProvider.when in order to call the page matching the argument in the most efficient manner? Thanks
(function () {
'use strict';
angular
.module('appModule')
.controller('MainMenuCtrl', ['$scope', '$http', 'TogglerFactory', '$routeProvider', MainMenuCtrl]);
function MainMenuCtrl($scope, $http, Toggler, routeProvider) {
$http.get('models/mainMenu.json').then(
function (response) {
$scope.menuItems = response.data;
},
function (error) {
alert("http error");
}
)
function routeIt (page) {
routeProvider
.when('/page1', {
url: "/page1",
templateUrl: 'views/page1.html',
controller: 'Page1Ctrl'
})
.when('/page2', {
url: "/page2",
templateUrl: 'views/page2.html',
controller: 'Page2Ctrl'
})
}
$scope.itemClicked = function (item){
Toggler.menuToggle();
routeIt(item);
}
}
})();
Service providers aren't available for injection in run phase (i.e. anywhere but provider services and config blocks). It is possible to make route provider injectable and configure it after config phase,
app.config(function ($provide, $routeProvider) {
$provide.value('$routeProvider', $routeProvider);
});
And controllers aren't the best places to implement any logic (e.g. route hot-plug).
Ok you're using your routeProvider wrong you need to configure your routes inside .config blocks
angular.module('myApp', [])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/page1', {
url: "/page1",
templateUrl: 'views/page1.html',
controller: 'Page1Ctrl'
}
})
If you want to change the url from your controller use $location.path('/page1'); inside your controller.
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);
}])