How to load content on page by clicking on menu links?
For example, there is menu:
Personal
Contacts
Question is in how change template HTML in page for each link?
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
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
Related
For my project I want a different view for my login page,
If I use template directive only angular wrap my login page into index.html (the template of the app)
.state('login',{
url:'/',
controller:'loginController',
templateUrl: './components/login/login.html',
controllerAs: 'vm'
})
I want independant page for this, how I can do that ?
I want to redirect to another page of the application. In the similar manner as we do in MVC application or asp.net application. I have defined the Route.js file which is below.
route.js defined in the following manner
var MainApp=angular.module('RoutingApp', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/BusinessAgent', {
templateUrl: 'Views/BusinessAgent/BusinessAgent.html',
controller: 'BusinessAgentController'
})
.when('/Admin', {
templateUrl: 'Views/Admin/Admin.html'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
HTML page
<section id="banner">
<ul class="actions">
<li>
Business Agent
</li>
</ul>
</section>
On click of href it should redirect.But it is not getting redirected.
I think you are missing ng-view . add ng-view for routing. It works as placeholder
<div ng-view></div>
Try putting the url of controller instead of view there.
Instead of
$routeProvider
.when('/BusinessAgent', {
templateUrl: 'Views/BusinessAgent/BusinessAgent.html',
controller: 'BusinessAgentController'
})
Try using this.
$routeProvider
.when('/BusinessAgent', {
templateUrl: 'ControllerName/Actionname',
controller: 'BusinessAgentController'
})
If you are trying to get different view, then use partial view for the respective action of controller.
for me I like to use $urlRouterProvider rather than $routeProvider see the below example:
$urlRouterProvider.otherwise("/BusinessAgent");
$stateProvider
.state("BusinessAgent", {
url: "/BusinessAgent",
templateUrl: "Views/BusinessAgent/BusinessAgent.html",
controller: "BusinessAgentController"
});
that's mean you will call the state with sref rather than href like this:
<a sref="BusinessAgent" >BusinessAgent</a>
If you are using html5Mode enabled
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Then replace '#' with '/' in href
Business Agent
if you disabled html5Mode then use
Business Agent
I saw that you used Angular UI-Router.
This is what I used in a recent application.Use the ui-sref tag instead of the href one.
<a ui-sref="/">Back to home</a>
<a ui-sref="cafe">Back to Cafe State</a>
I've used state provider instead of route provider.My states are
Root State
$stateProvider.state('/',{
url:"/",
templateUrl:'js/apps/choiceScreen/choice.html',
controller:'choiceCtrl'
})
Cafe State
.state('cafe',{
templateUrl:'js/apps/cafe/cafeScreen.html',
controller:'cafeCtrl'
});
you can use
$window.location.href = '/index.html';
for redurect to another page
I'm learning AngularJS and one of the assignments reads like this:
Now, add a new div tag to our index.html with an attribute directive that
will include the rendered template for the current route.
That is, I need to put something inside the following div, which will render the correct (according to routes) template.
<div class="main-wrapper">
</div>
In all examples that I could find, this task is solved by putting <ng-view/> into the HTML code.
But this answer is wrong.
How else can I implement it (render the template, which corresponds to the current route) ?
ngView directive can be used both as an element:
<ng-view></ng-view>
and as an attribute
<div ng-view></div>
See documentation
<ng-view/> is required from the ngRoute module. Templates may be resolved using $routeProvider as
angular.module('ngViewExample', ['ngRoute', 'ngAnimate'])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookCtrl',
controllerAs: 'book'
})
.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: 'ChapterCtrl',
controllerAs: 'chapter'
});
$locationProvider.html5Mode(true);
}])
If you want to manipulate your templates from the controller you could also use ngInclude. You still need to resolve your route inside your controller before fetching the proper template.
I'm somewhat new to AngularJS so I'd like to know whats the best way to architect the products section of my app.
So I have a main product page which will list and link to all my 12 products. Then each ind. product page will need to have the same format (i.e. product description, color, height etc.). This data will not be coming from a backend source. Its just plain HTML.
Whats the best way of setting things up to maximize code reuse? I'm thinking I want to do for the routing - /products/products.html to list all products and then something like /products/product1.html for an ind. product.
How can I make this all work in AngularJS?
Thanks!
For routing you will need to use the ng-view directive in your HTML. The simplest way I can think of is to create a div on the main page and assign it the directive ng-view. Then your Javascript file create a the routing. Below is a sample code just for reference purpose.
// YOUR HTML
<main class="cf" ng-view>
</main>
// YOUR JAVASCRIPT
var myApp = angular.module('myApp', ['ngRoute', 'appControllers']);
var appControllers = angular.module('appControllers', []);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider.
when("/products1", { templateUrl: "views/products1.html"}).
when("/products", { templateUrl: "views/products2.html"}).
when("/products3", { templateUrl: "views/products3.html"}).
otherwise({
redirectTo: "/login"});
}]);
AngularJS Part:
myApp.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider) {
$routeProvider.
when('/main', {templateUrl: 'sub/main.tpl', controller: MainCtrl}).
when('/users', {templateUrl: 'sub/users.tpl', controller: UserCtrl}).
otherwise({redirectTo: '/main'});
}]);
and my index.html
Main | Display Users
<div ng-view></div>
It works great but I am having problem with hashes.
When I try to use an anchor i.e:
test
when I click on this anchor it is calling the main page.
Is it possible to get rid of the hashes when we use ng-view?
Ah, because AngularJS reroutes your urls.
Try using ng-href,
<a ng-href="#test">test</a>
Edit: You can try changing the id of the anchor to the angular url..