Sorry if this is too basic a question, Angular + jQuery + HTML/CSS noob here.
I have a website (www.blog.nishantkelkar) that has a navbar. It has a few tabs, one of which is "About Me". I'd like the page to not reload when the user clicks on the "About Me" tab. I presume this is inefficient, and saving up on load-time for the navbar (which is going to remain constant at all times on my website) is a good thing?
I'm using Twitter's Bootstrap open source library for styling on my webpage, and AngularJS to control actions (like tab clicks).
My effort: I have a controller that sets ng-class = "active" based on whether a tab is clicked. However, it loads the entire href for that tab (whole html) instead of just the difference in html.
Thanks and any/all help is appreciated!
Sorry if this is too basic a question, Angular + jQuery + HTML/CSS noob here.
I have a website (www.blog.nishantkelkar) that has a navbar. It has a few tabs, one of which is "About Me". I'd like the page to not reload when the user clicks on the "About Me" tab. I presume this is inefficient, and saving up on load-time for the navbar (which is going to remain constant at all times on my website) is a good thing?
I'm using Twitter's Bootstrap open source library for styling on my webpage, and AngularJS to control actions (like tab clicks).
My effort: I have a controller that sets ng-class = "active" based on whether a tab is clicked. However, it loads the entire href for that tab (whole html) instead of just the difference in html.
Thanks and any/all help is appreciated!
Share edited Feb 25, 2016 at 5:27 Nishant Kelkar asked Feb 25, 2016 at 5:19 Nishant KelkarNishant Kelkar 4121 gold badge4 silver badges20 bronze badges 3- would remend showing and hiding relevant div's using JQuery, almost similar to a landing page or a one page web site, alternatively you can use ajax to load pages in a div and keep the menu static but what have you tried? – TrojanMorse Commented Feb 25, 2016 at 5:26
- You can use ngRoute to achieve injecting dynamic content into a container on your page, without reloading other content which is to remain static. – 1252748 Commented Feb 25, 2016 at 5:27
- @person who downvoted: Can I please know why? I listed that I am a noob, listed my effort, described my problem clearly. What else is required? – Nishant Kelkar Commented Feb 25, 2016 at 7:33
2 Answers
Reset to default 3ng-view and ng-route will get the work done for you.
Just define your views using the $routeProvider.
Here is a sample code
Main page
<body>
<header>
<nav class="navbar navbar-default" ng-controller="HeaderController">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Sample App</a>
</div>
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/')}"><a href="#/">Home</a></li>
<li ng-class="{ active: isActive('/about')}"><a href="#/about">About</a></li>
</ul>
</div>
</nav>
</header>
<ng-view></ng-view>
</body>
app.js (route config)
(function () {
var app = angular.module('sampleApp',['ngRoute']);
app.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl:'home.html'
})
.when('/about',{
templateUrl:'about.html'
})
.otherwise({ redirectTo:'/'});
});
})();
and the HeaderController to highlight the active tabs
(function () {
var headerController = function ($scope, $location)
{
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
};
angular.module('sampleApp').controller('HeaderController',headerController);
}());
Here is the plunker demo
You have a few options, but the better one is to use routing.
Angular have a built-in client-side routing (ng-route), as well as a third-party ui-router (it's better, but more plicated for understand).
That mean you should have few separate files: mail.html and a few page.html.
in main.html you should add your header. And a ng-view (for ng-route) directive.
It's would work like a placeholder where you would render your pages.
And In page.html you should just add an basic page info.
It's similar to use includes in other languages.
But important: all client-side routing have bad deal with search engine. So, SEO for all Single-Page Applications, like an angular-based, it's a bit problematic.
So, in other words if SEO is important for you, may be you should prefer backend-based routing (at least like old-school php or whatever, to render your pages)
Bonus (offtop) If you just want a static-based blog (without backend) but easy for maintenance, you are able to use something like Jekyl. It's a tool, that will generate static pages from json on build-time. You can find a few alternatives of jekyl for different platforms (ruby, nodejs, etc.). In this case you would be able to host yor pages on any static hosting, like pages.github.. This is how to use jekyl with gh-pages: link.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744912392a4600631.html
评论列表（0条）