Menu
I am fairly new at Angular and trying to build a static website using angular and bootstrap. This is what I have done so far to create navigation (and footer using same method) to add to every pages in the website. Is there any better(more efficient) way building templates with Angular? Is this what everyone does for these type of applications?
app.directive("mynav", function () {
return {
restrict: "A",
template: "<nav class='navbar navbar-default' role='navigation'><div class='navbar-inner'><div class='container-fluid'><div class='navbar-header'><button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#menu-nav'><span class='sr-only'>Toggle navigation</span><span class='icon-bar'></span><span class='icon-bar'></span><span class='icon-bar'></span></button><a class='navbar-brand' href='#'><img alt='img' src='img/logo.svg' height='30'></a></div><div class='collapse navbar-collapse' id='menu-nav'><ul class='nav navbar-nav navbar-right'><li><a href='pages/home.html'>Home</a></li><li><a href='pages/about.html'>About</a></li><li><a href='pages/service.html'>Services</a></li><li><a href='pages/product.html'>Rental Products</a></li><li><a href='pages/contact.html'>Contact</a></li><button type='button' class='btn btn-primary navbar-btn'>Request A Quote</button></ul></div></div></div></nav>"
}
});<header mynav></header>
414
In case your navbar is also static like footer, you can exclude it from ng-view
Your html structure can be something like :
<html>
<head>...</head>
<body>
<div mynav></div>
<div ng-view></div>
<div my-footer></div>
</body>
</html>
In this case, the navigation bar will be static too just like your footer. So all your views will be loaded at <div ng-view></div> and mynav and my-footer div will be untouched.
Also,In your directives, you can replace inline template with templateUrl. Create a new HTML, say my-nav.html and use templateUrl: "path/to/my-nav.html",
76
You dont need a directive for static html.
Usually you have a shell page (main page), in which you put all the parts that should be on all (or most) pages. And then you load you views into that page using angular's ng-view (or ui-view if you use ui-router for routing).
Something like this:
<html ng-app='app'>
<head>...</head>
<body>
<div ng-controller="navbarCtrl as vm">
<div ng-include="'navbar.html'"></div>
</div>
<!-- Your main view loads here, along with its controller
as defined in your routing (check ngRoute or ui-router for more)-->
<div ng-view></div>
<footer>Your footer comes here (or can be ng-included)</footer>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With