So all of my pages use the index.html to render pages and in the index.html, my code is structured so that all views render in the div with the ng-view="" tag as:
<body>
<div class="navbar navbar-inverse" role="navigation" ng-controller="indexController" style="border-bottom: #ab2328 3px solid;">
<div class="container">
<div class="navbar-header">
<button class="btn btn-success navbar-toggle" ng-click="navbarExpanded = !navbarExpanded">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<a ng-show="!isSWA" class="navbar-brand" href="http://www.naviabenefits.com" target="_blank"><img style="height: 37px;" src="ppt/assets/navia.png"></a>
<a ng-show="isSWA" class="navbar-brand" href="http://pebb.naviabenefits.com/" target="_blank"><img style="height: 37px;" src="ppt/assets/navia.png"></a>
</div>
<div class="collapse navbar-collapse" collapse="!navbarExpanded">
<ul ng-show="!isSWA" class="nav navbar-nav navbar-right">
<li ng-show="authentication.isAdmin">admin</li>
<li>products + services</li>
<li>about us</li>`
<li>testimonials</li>
<li>careers</li>
<li>news</li>
<li>blog</li>
<li>contact us</li>
<li ng-show="authentication.isAuth"><a id="signOut" href="#/logout" >sign out <i class="fa fa-sign-out"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div ng-view="">
</div>
</div>
<div id="footer" role="navigation" ng-controller="indexController">
<div class="container">
<div class="footerLinks">
</div>
</div>
</div>
</body>
So I have a couple of pages that I want to render without the header and footer, but still keep some of the other pathing.
This "plain" page has its own controller and all and my routing for it in my app.js looks like:
$routeProvider.when("/claimReceipt-plain", {
controller: "claimReceiptController",
templateUrl: "ppt/views/claims/claimReceipt-plain.html"
});
How can I do this within this index.html and not have the header and footers render, but me more or less, its own page?
Define a scope level Boolean variable on the page controller where you don't want the header and use ng-show directive to apply condition on the header div tag.
Related
I'd like to divide content with bootstrap tabs. This works fine except the html breaks when I attach the ng-controller in parent elements. Is there a way to use html elements to insert ng-controller without affecting the hierarchy necessary to display tabs in bootstrap?
Working tab layout:
<div ng-app="myApp">
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">{{ tab1_content }}</div>
<div id="tab2" class="tab-pane fade in">{{ tab2_content }}</div>
<div id="tab3" class="tab-pane fade in">{{ tab3_content }}</div>
</div> <!-- all tab-content -->
</div> <!-- end myApp -->
How I'd like to use my controllers (breaks the tab displays by putting content in all tabs:
<div ng-app="myApp">
<div class="tab-content">
<ng-controller ng-controller="test_controller1">
<div id="tab1" class="tab-pane fade in active">{{ tab1_content }}</div>
<div id="tab2" class="tab-pane fade in">{{ tab2_content }}</div>
</ng-controller> <!-- end test_controller1 -->
<ng-controller ng-controller="test_controller2">
<div id="tab3" class="tab-pane fade in">{{ tab3_content }}</div>
</ng-controller> <!-- end test_controller2 -->
</div> <!-- all tab-content -->
</div> <!-- end myApp -->
Demo: https://jsfiddle.net/L2b4yLfa/
Is this acceptable?
I have initialized the same controller for two tabs. Since its a small window the code snippet output will show mobile view. click on run code snippet -> full page
angular.module('myApp', []);
angular.module('myApp').controller('test_controller1', function($scope) {
$scope.tab1_content = "Tab One Content";
$scope.tab2_content = "Tab Two Content";
});
angular.module('myApp').controller('test_controller2', function($scope) {
$scope.tab3_content = "Tab Three Content";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#myNavbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="#">Title</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
<li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
<li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Testing</li>
</ul>
</div>
</div>
</nav>
<div ng-app="myApp">
<div class="tab-content">
<div id="tab1" ng-controller="test_controller1" class="tab-pane fade in active">{{ tab1_content }}</div>
<div id="tab2" ng-controller="test_controller1" class="tab-pane fade in">{{ tab2_content }}</div>
<div id="tab3" ng-controller="test_controller2" class="tab-pane fade in">{{ tab3_content }}</div>
</div> <!-- all tab-content -->
</div> <!-- end myApp -->
So in the future you would need to share data between the same controller for the two tabs using services.
My solution was to switch to angular bootstrap ui, not use the built-in uib-tabs and use $rootscope to handle the 'active_tab' value.
<style> .uib-tab.nav-item { display:none; } .nav-tabs { border-bottom: inherit; } </style>
<div ng-app="myApp">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="navCollapsed = !navCollapsed">
<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="#">Title</a>
</div> <!-- end navbar-header -->
<div class="collapse navbar-collapse" uib-collapse="navCollapsed">
<ul class="nav navbar-nav">
<li ng-class="{active: active_tab == 1}" ng-click="active_tab = 1">Tab 1</li>
<li ng-class="{active: active_tab == 2}" ng-click="active_tab = 2">Tab 2</li>
<li ng-class="{active: active_tab == 3}" ng-click="active_tab = 3">Tab 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Selected Tab: {{ active_tab }}</li>
</ul>
</div> <!-- end uib-collapse -->
</nav> <!-- end nav -->
<uib-tabset active="active_tab">
<ng-controller ng-controller="test_controller1">
<uib-tab index="1" heading="heading not displayed">1: {{ tab1_content }}</uib-tab>
<uib-tab index="2" heading="heading not displayed">2: {{ tab2_content }}</uib-tab>
</ng-controller>
<ng-controller ng-controller="test_controller2">
<uib-tab index="3" heading="heading not displayed">3: {{ tab3_content }}</uib-tab>
</ng-controller>
</uib-tabset>
</div>
Demo: https://plnkr.co/edit/36tkl3pCV7hgNz8rbpTq?p=preview
I am using AngularJs and Bootstrap. While I am using $RouteProvider for SPA, I am using bootstrap for the layout. This is working fine.
However, I am now trying to use Bootstrap nav-tabs to have tab based navigations.
My HTML is like this:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<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="#/mis"><i class="fa fa-tachometer"></i> TrigonMeter</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar" class="navbar-collapse collapse">
<ul id="tabs" class="nav navbar-nav nav-tabs container-fluid" data-tabs="tabs">
<li class="active"><a data-target="#db" href="#db" data-toggle="tab">Dashboard</a></li>
<li><a data-target="#admin" href="#admin" data-toggle="tab">Admin</a></li>
<li><a data-target="#mis" href="#mis" data-toggle="tab">MIS</a></li>
<li><a data-target="#fin" href="#fin" data-toggle="tab">Finance</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-link">Hi {{globals.currentUser.username}}</li>
<li><span class="glyphicon glyphicon-log-out"></span>Logout</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
For the tabs. This works fine. And the following is the tab-content section:
<div class="container-fluid">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="row">
<div id="my-tab-content" class="tab-content col-sm-2 col-md-2 sidebar">
<div class="tab-pane active" id="db">
<h1>Dashboard</h1>
<ul>
<li>Organisation Details</li>
<li>Job Numbers</li>
<li>Job Expenses</li>
<li>Job Financial Details</li>
<li>Contracts</li>
</ul>
</div>
<div class="tab-pane" id="admin">
<h1>Admin</h1>
<p>Organisation Details</p>
</div>
<div class="tab-pane" id="mis">
<h1>MIS</h1>
<ul>
<li>Job Numbers</li>
<li>Job Expenses</li>
<li>Job Financial Details</li>
<li>Contracts</li>
</ul>
</div>
<div class="tab-pane" id="fin">
<h1>Finance</h1>
<p>orange orange orange orange orange</p>
</div>
</div>
<div class="col-sm-10 col-md-10">
<div ng-view></div>
</div>
</div>
</div>
But The tab-content section is not working.
Please do let me know if I could explain the problem.
Is there a way to do this?
I am new to bootstrap and AngularJs. I am using bootstrap and Angular Js for my current application. When I use the bootstrap carousel directly inside the index page, the carousel's slide link are working absolutely perfect. But When I load the carousel markup through the partial files using ng-view, the slide links does not work correctly. It only works one time and then just don't work the next time. Where I am going wrong. I am pasting the code below:
<div class="corousal-container">
<div class="col-md-12">
<ul id="tabs" class="ops-tabs">
<li class="col-md-4 ops-list active">
<a href="#" class="ops-block">
<span class="header">Charts</span>
</a>
</li>
<li class="col-md-4 ops-list">
<a href="#" class="ops-block">
<span class="header">Graphs</span>
</a>
</li>
<li class="col-md-4 ops-list">
<a href="#" class="ops-block">
<span class="header">Reports</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-12">
<div data-ride="carousel" class="carousel slide" id="execView">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#execView" class="active"></li>
<li data-slide-to="1" data-target="#execView" class=""></li>
<li data-slide-to="2" data-target="#execView" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item">
<div class="container" id="pie-chart1">
</div>
</div>
<div class="item">
<div class="container" id="pie-chart2">
</div>
</div>
<div class="item active">
<div class="container" id="pie-chart3">
<div class="carousel-caption">
<canvas class="canvas" id="canvas" style="width: 400px; height: 400px;" width="600" height="600"></canvas>
</div>
</div>
</div>
</div>
<a data-slide="prev" href="#execView" class="left carousel-control"><span class="fa fa-angle-left"></span></a>
<a data-slide="next" href="#execView" class="right carousel-control"><span class="fa fa-angle-right"></span></a>
</div>
</div>
If you are using ng-view then you need to create your bootstrap carousel after the html is loaded. You can do this in the onload method.
<div ng-view onload="viewLoaded()"></div>
$scope.viewLoaded=function(){
$('.carousel ').carousel()
}
Use angular Bootstrap directives for this.
http://angular-ui.github.io/bootstrap/
so I'm stacking on this problem.
I try to create tabs with loading via ng-include the contents. But doesn't matter what kind of url I include I get always this error http://goo.gl/yyNeQb
I don't have anything else included (Controller,...)
Someone any idea?
<ul class="nav nav-tabs">
<li ng-class="{active: main.active.tab == 'register'}" class="active">
<a ng-click="main.active.tab = 'register'">Register</a>
</li>
<li ng-class="{active: main.active.tab == 'login'}">
<a ng-click="main.active.tab = 'login'">Login</a>
</li>
</ul>
<div class="tab-content">
<div ng-switch="main.active.tab">
<div
ng-switch-when="register"
ng-include src="'../angular/views/register.html'">
</div>
<div
ng-switch-when="login"
ng-include src="'../angular/views/login.html'">
</div>
</div>
</div> <!-- tab content-->
If I include a Controller like this
<script type="text/javascript" src="../angular/controller/RegisterController.js"></script>
The source will be load and I can work with it.
Have not tested it immediately but can you try this instead?
<div class="tab-content">
<div ng-switch="main.active.tab">
<div ng-switch-when="register">
<ng-include src="'../angular/views/register.html'"></ng-include>
</div>
<div ng-switch-when="login">
<ng-include src="'../angular/views/login.html'"></ng-include>
</div>
</div>
</div>
I have a bunch of pages with code for a nice looking footer area for buttons and stuff at the bottom of the page:
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-inner">
<footer>
<a class="btn btn-warning actionButton" href="#/">
<i class="glyphicon glyphicon-trash icon-white" />
Cancel
</a>
<a class="btn btn-primary actionButton" data-ng-click="saveSampleForm(sampleForm)" data-ng-disabled="form.$invalid">
<i class="glyphicon glyphicon-ok icon-white" />
Save
</a>
<div class="version">v{{applicationdata.Version}}</div>
</footer>
</div>
</div>
</nav>
I know about the nginclude tag, but is there a way to reuse the nav portion of this code, but have custom <footer> content? The buttons change from page to page. Maybe a directive? Still learning this stuff...
Edit: I know I could add the code for the <footer> content to my $scope and then use {{footerContent}}, but I would prefer to keep html out of my model.
You can certainly do so. Here's an idea using transclusion with directives.
Directive
app.directive('navFooter', function() {
return {
templateUrl: 'nav.html',
replace: true,
transclude: true,
restrict: 'E'
}
})
nav.html
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-inner">
<footer ng-transclude>
</footer>
</div>
</div>
</nav>
Usage
<nav-footer>
<a class="btn btn-warning actionButton" href="#/">
<i class="glyphicon glyphicon-trash icon-white"></i>
Cancel
</a>
<a class="btn btn-primary actionButton" data-ng-click="saveSampleForm(sampleForm)" data-ng-disabled="form.$invalid">
<i class="glyphicon glyphicon-ok icon-white"></i>
Save
</a>
<div class="version">v{{applicationdata.Version}}</div>
</nav-footer>
Demo link.