Created
November 14, 2013 14:46
-
-
Save bmakarand2009/7468039 to your computer and use it in GitHub Desktop.
Angular way of creating header and footers
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html ng-app="testApp"> <!-- remember testApp defines that this is angular app, you can define it at downlevels too --> | |
| <!-- your css files --> | |
| <head> | |
| <link rel="stylesheet" href="css/style.default.css" type="text/css" /> | |
| <link rel="stylesheet" href="css/style.navyblue.css" type="text/css" /> | |
| <link rel="stylesheet" href="css/responsive-tables.css"> | |
| <script src="js/lib/angular/angular.js"></script> | |
| <script src="js/lib/angular/angular-resource.js"></script> | |
| <script src="js/app.js"></script> | |
| <script> | |
| facturaApp.controller('ParentViewController', function($scope,$location) { | |
| $scope.supplierEntity = 'suppliers'; | |
| $scope.hasHeader = function() { | |
| if($location.path() === "/") | |
| return false; | |
| else | |
| return true; | |
| } | |
| </scirpt> | |
| </head> | |
| <body> | |
| <!-- ParentViewController is the Angular controller where hasHeader() method is written.. | |
| Note - all the controllers defined below it will always have access to values in ParentViewController --> | |
| <div ng-controller="ParentViewController"> | |
| <!-- ng-show is a special directive which will display the element only if the conditiion is met i.e return value of the method is true..' | |
| <div ng-show="hasHeader()"> | |
| <div ng-include="'views/header.html'"></div> | |
| </div> | |
| <ng-view></ng-view> <!-- if this is angular app with multiple views/bodeies --> | |
| <!-- <div ng-include="'views/body.html'"></div> --> | |
| <div ng-include="views/footer.html"></div> | |
| </div> | |
| </body> | |
| </html> | |
| <!-----app.js -----> | |
| <!-- Incase if you are using ngView, you will need the following code to display the right html parts --> | |
| var facturaApp = angular.module('facturaApp', ['ngResource']); | |
| facturaApp.config(function($routeProvider,$locationProvider) { | |
| $routeProvider | |
| .when('/', { | |
| templateUrl: 'views/index.html' | |
| }) | |
| .when('/welcome', { | |
| templateUrl: 'views/welcome.html' | |
| }) | |
| .when('/sample1', { | |
| controller:'SampleController', | |
| templateUrl: 'views/sample1.html' | |
| }) | |
| .when('/sample2/:id', { | |
| controller:'ViewController', | |
| templateUrl: 'views/sample2.html' | |
| }); | |
| }) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment