Angular Goodness : Dividing html files into header, footer and body

Clean code is always the best code, hence its best to divide the code in different categories, the most generic we always use is the header, footer and body. So far I had used tag in JSP, but how do we do it if we just have plain html files.
With Angular we can do it it many different ways, lets explore a simple way,
lets say you have a header.html, footer.html and body,
Step1. Create Main.html file, which will include all the parts of the html.
Step2. Add the references to header,footer and include the body . (In case you have multiple bodies then ng:View can be used to replace the htmls based on difft actions)
Below is the code for the same
<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'
});
})
view rawgistfile1.txt hosted with ❤ by GitHub
Should you have any questions, feel free to comment
Orginally published Nov 2014

Comments

Post a Comment

Popular posts from this blog

Apache Airflow Wait Between Tasks

 Apache Airflow allows you to create custom workflows that can be triggered on a recurring basis at specific time intervals based on your needs. Some concepts to learn are DAGs - this defines the entire workflow Tasks - are the Individual tasks that constitute the workflow Operators - This is an airflow-specific concept, which needs to be understood, Based on what type of tasks you would like to perform there are multiple operators. To run a bash script there is a BashOperator, to run a python code you need to have a Python Operator. For more details, refer  https://airflow.apache.org/docs/apache-airflow/stable/concepts/index.html Above 3 are sufficient to get started, ofcourse there are others like interprocess communication, variables, process dependency management, etc. Let's Define a Simple Workflow we want to achieve DAG = Tasks1 >> Wait for a Day >> Task2 Above is the DAG, where two tasks are executed, second task depends on first task and is executed after a d
Read more

Hibernate Interview Questions

1. What are the main classes of  Hibernate Session SessionFactory Criteria Query Transaction 2. Lazy loading vs Eager Loading 3. Why is second-level caching not enabled by default? The second Level cache is disabled by default because the configuration and choice of which entities are cacheable is application-specific. In JPA, you can turn on cache for a particular domain with annotation @Cacheable
Read more

Java Spring Interview Questions

Java Spring Interview Questions 1. Have you used any Docker? 2. Suppose there is a requirement that for every call we need to create a new instance, how can that be done in Spring Boog Answer - using Spring bean with Scope as Prototype and then every time you need a bean, get the SpringApplicationContext and call ctx.getBean() 3. When a REST API POST call is made, how is that converted to Java objects to work in your controller or service layer Answer - Spring offers ViewResolvers, you can use JSONResolver to convert the JSON inputs to a Java Bean which then can be consumed by Controllers 4. How can you achieve Auto Scaling in kubernetes 5. Have you worked in Hibernate JPA or Spring JDBC in your projects? Answer - both , while Hibernate JPA is good for queries, there are some queries where its not efficient enough and you need to have SQLs itself, like if you want to do a bulk update 6. Explain the process of having your Spring WAR deployed on Kubernetes Cluster? 7. Explain how JWT Aut
Read more