Angularjs is a very popular front-end application, nowadays each web application has two separate layers instead of a single application.
A separate layer means one front-end application which is created on the backbone, angularjs etc and another back-end application, which is created on server-side languages like php,java,.net and ruby etc.
In this post, We will learn how to convert a simple HTML template into angularjs application. I am converting the Bootstrap HTML template into an angular application using partial layout functionality.
I am taking Gentellela Admin Bootstrap Devops theme.
Gentellela Admin is a free-to-use Bootstrap admin template. This template uses the default Bootstrap 3 styles along with a variety of powerful jQuery plugins and tools to create a powerful framework for creating admin panels or back-end dashboards.
I will use ui-route
angular module to create partials view and render layout file based on route url.
Angular application structure
- app : This folder will contain angular all modules and services and views.
- app/config : This folder will contain configuration angular file.
- app/testservice : This folder will contain your modules file including controller,views etc.
- app/layout : This folder will contain all layout partial files.
- assets : This folder will contain all css,fonts and js files.
You can also check other tutorial of angular,
- Angular Loading spinner or Preloading image with finally
- Angular Datatable Pagination, Sorting and Searching Using Ajax
- Angular Datatables with Child Rows Using Directive
We will create separate partial HTML template from single BOOtstrap HTML template like below,
Angular layout application structure
- header.html : This file will contain html template header part.
- sidebar.html : This file will contain html template sidebar part.
- footer.html : This file will contain html template footer part.
- layout.html : This file will use to include above partial files and create layout template which will render on each angular request.
Source code of layout.html
file
<div id="navbar" class="navbar navbar-default" ui-view="header" ng-controller="layoutHeaderCtrl"></div> <div class="main-container" id="main-container"> <div id="sidebar" class="sidebar responsive" ui-view="siderbar" ng-controller="layoutSidebarCtrl"></div> <div class="main-content" ng-controller="layoutContentCtrl"> <div class="main-content-inner"> <div class="page-content"> <div ui-view=""> <h1>Welcome UI Dashboard</h1> </div> </div> </div> </div> <div class="footer" ui-view="footer"></div> <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse"> <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i> </a> </div>
You can see above code, I am using ng-view
directive to include partial HTML files and defined controller for each files using ng-controller
.layout.html
file create whole theme template page using partials html files.
Since I am using ui-route
modules for routing angular application so i will call stateprovider
method to set state and call all partial HTML files.
$stateProvider .state('app', { url: '/app', views: { '@': { templateUrl: '/app/layout/layout.html' }, 'header@app' : { templateUrl: '/app/layout/header.html' }, 'siderbar@app' : { templateUrl: '/app/layout/sidebar.html' }, 'footer@app' : { templateUrl: '/app/layout/footer.html' } }, })
I hope its help you.
Conclusion :
This post help to create layout of your angular application using partial HTML files.Its like other back-end framework which are providing layout functionality, so using this angular tutorial You can easily convert bootstrap HTML template into angular layout.
can i get the download link
i can send u demo source code into ur gmail, pls send email on my [email protected].
can you send me your source code into my email ? my email [email protected]
thanks 😀
i have sent.
can you send me your source code into my email ?
due to privacy policy, i can’t share
i ll share soon link with in this article.
hi sir,
Please provide me source code on my mail: [email protected]
Thanks in advance
done