How to load content on page by clicking on menu links? For example, there is menu:
<a href="#">Personal</a>
<a href="#">Contacts</a>
Question is in how change template HTML in page for each link?
2 Answers
Basically what you are trying to achieve will be accomplish by creating SPA. For that you need to use ngRoute module in your application(by adding angular-route.js)
For setting up angular router you need to register routes with there template & controller, etc. inside app.config.$routeProvider would take a URL by .when method.
Code
var app= angular.module('app', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/tab/:id', {
templateUrl: 'template.html',
controller: 'templateController'
}).
otherwise({
redirectTo: '/tab/1'
});
}]);
& then there would be one section on UI which is nothing but ng-view directive that watches of $routeProvider configuration with url in browser bar
<ng-view></ng-view>
For more details look at this answer
Working Example Plunkr
18 Comments
Hamed
Can I use
$routeProvider in separated controller?
Pankaj Parkar
no it doesn;t lie inside a controller, It always be there in application config phase (
app.config)
Jossef Harush Kadouri
+1 routing is the way. @Hamed check this example i made 4 u - plnkr.co/edit/NU2ECRXqSHLtiEIKX3YS?p=preview
Hamed
But if I want to use this routing in one controller on my web site? All parts of site was build in php
Pankaj Parkar
@Hamed what do you mean by controller..I didn;t get you..controller is the part which provides binding for view..you can not relate controller with routing..
|
Additional to @pankaj, You have to use $location services in your controller. So that you can change view accordingly from controller.
ex. You have link
<a ng-click="saveData">Save</a>
Now in controller:
$scope.saveData = function(){
$location.href('viewName');
}
ref : https://docs.angularjs.org/api/ng/service/$location
ng-viewdocs.angularjs.org/api/ngRoute/directive/ngView