How to convert Bootstrap HTML Theme into angularJS template

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.

Demo of convert HTML theme into angularJS template