Bootstrap 3

December 21, 2015 Harmeet Singh

AngularJS Starter Templete With Bootstrap

If you have not tried yet to create angularjs website then definitely this article will help you to create angularjs website with bootstrap starter template. So let’s start.

In this example i am using bootstrap “Justified nav” template.

These are the following AngularJs features what we will covered with creating this template

MVC(Model view Controller) Architecture
Calling JSON service with factory
Dependency Injection
AngularUI Bootstrap
Routing
Directives
Image Gallery with AngularJS

At the end of the article you understand what is MVC Architecture and how it works in AngularJS? | AngularJS MVC
MVC: It’s a design pattern that breaks the application into three parts Model View Controller. Using a pattern is a reusable solution but in regular javascript we organize the code differently. Another way of looking at patterns are as a templates which can be used in quite a few different scenarios.

Model:

Model is belongs to data it can be dynamic data or static which means you can get it from a database like Mongodb and you can also get data from static JSON file.

Let’s create a static JSON to defining a model. Add following lines in a data.json file.

{
	"projectTitle" : "Angular",
		"nav" : [
			{"name" : "Home", "url" : "#/", "className" : "active"},
			{"name" : "Projects", "url" : "#/projects", "className" : ""},
			{"name" : "Services", "url" : "#/services", "className" : ""},
			{"name" : "Downloads", "url" : "#/", "className" : "dropdown", "sub" :
				[
					{"name" : "AngularJS", "url" : "#/angularJS"}
				]
			},
			{"name" : "Image Gallery", "url" : "#/imagegallery", "className" : ""},
			{"name" : "Contact", "url" : "#/contact", "className" : ""}
		]
}

View:

View is displaying the data of model. For this we use double curly brackets and it is lot like using JavaScript template library (like mustache.js).

Let’s create a view, following this instruction in index.html:

First declare the name of the application using ng-app directive.
```
<html lang="en" ng-app="angularApp">
```
Download and add the angular library in your page version – v1.3.0-rc.5.
```
<script src="lib/angular.min.js"></script>
```

Defining the controller name using ng-controller directive in your parent element.
```
<div class="container" ng-controller="homeCntrl">
```
Let’s combined the code:

<div class="container" ng-controller="homeCntrl">

     <!-- Static navbar -->
      <div class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="isCollapsed = !isCollapsed">
              <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="#">{{menu.projectTitle}}</a>
          </div>
          <div collapse="isCollapsed" class="navbar-collapse collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
              <li ng-repeat="nav in navbar" class="{{nav.className}}" >
                <a is-active-nav href="{{nav.url}}" class="{{ nav.sub && 'dropdown-toggle'}}"  data-toggle="{{nav.sub && 'dropdown' || ''}}"  >{{nav.name}} <b ng-show="nav.sub" class="caret"></b></a>
                <ul class="dropdown-menu" ng-show="nav.sub">
                  <li ng-repeat="subItem in nav.sub"><a href="{{subItem.url}}">{{subItem.name}}</a></li>
                </ul>
              </li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </div>

<div ng-view></div>
	  
	  
	  
      <!-- Site footer -->
      <div class="footer">
        <p>&copy; ngBootstrap.com 2015</p>
      </div>

　　　</div>

In this HTML we have use ng directives to rendering the data in view.

ng-repeat: The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.

ng-init: The ngInit directive allows you to evaluate an expression in the current scope.

ng-click: The ngClick directive allows you to specify custom behavior when an element is clicked.

ng-show: The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute.

Controller

It controls how data is retrieved and displayed to end-user. which means Controller gives you control over model and view.

var angularApp = angular.module('angularApp', ['ngRoute', 'ui.bootstrap'])

Creating angular module name which we have defined in ng-app directive in HTML.

We can also defined the dependency as per the module using [] brackets. For our application we need ngRoute for routing to navigate the site. For this you have to download and include

<script src="lib/angular-router.min.js"></script>

AngularUI Bootstrap “ui.bootstrap” using the angular bootstrap component., you can download the library from this link https://angular-ui.github.io. and add in html page.

<script src="modules/ui-bootstrap-tpls-0.12.0.min.js"></script>

Creating Factory in Angularjs

AngularJS provides you three ways to create a service : factory,service and provider. A factory is a simple function which allows you to add some logic before creating the object. It returns the created object.

var angularApp = angular.module('angularApp', ['ngRoute', 'ui.bootstrap']).factory('serviceInfo', function ($http){

    'use strict';
    return $http.get('data/json/data.json');

});
angularApp.controller('homeCntrl', function ($scope,serviceInfo, $location){
	
	serviceInfo.success(function(data)
	{
		$scope.menu= data;
		$scope.navbar= data.nav;
		$scope.navbarRight= data.navRight;
	})
});

Scope is the glue between application controller and the view. During the template linking phase the directives set up $watch expressions on the scope. The $watch allows the directives to be notified of property changes, which allows the directive to render the updated value to the DOM.

If you find AngularJS MVC Article helpful please share it and comment below.

You can get the full code from here: https://github.com/harmeet090/Angularjs

November 28, 2015 Harmeet Singh

Bootstrap 3 with Liferay 6.2

In Current Liferay version 6.2 we have bootstrap 2.3.2 as default theme library.Bootstrap 3 was released on August 19th, 2013, before releasing Liferay 6.3. Bootstrap 3 completely dropped support for IE7 and below. While Liferay 6.2 provided limited support for IE7 and below. So here are some of the distinctive differences between Bootstrap v2.3 and v3.0:

Bootstrap 3	Bootstrap 2.3.2
Grids: Fluid (480px, 768px, 992px, 1200px)	Flat Design: Gradients are no longer available in V3.0
Grids: Fluid and fixed (724px, 940px, 1170px; below 768px are single column and vertically stacked)	CSS3 gradients and box shadows
Columns Classes: .col-xs-1, .col-sm-1 .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2 .col-md-2, .col-lg-2	.span1,.span2

For know more in detail please go to this link:- http://getbootstrap.com/migration/

Creating Theme with Bootstrap 3 in Liferay 6.2

These are some basic steps for creating Theme with Bootstrap 3. In some of the steps are same except few additional Steps.

In Liferay Devloper Studio, Go to –> File – New – Liferay Plugin Project.
Provide the Name inside Project Name Text Box (say Test).
Select the Plugin Type as – Theme and click Next.
Select Theme parent – _styled and Theme framework – Velocity. Click Finish.
A new Theme (Test-theme) will be created.
Inside _diffs folder create css, images, js and templates folder.
Copy and paste the required files in the corresponding folders as needed.
1. Download Bootstrap 3 CSS file and place it inside _diffs – css
2. Open Main.css and call the Bootstrap 3 css file above custom.css
Modify the files as explained.

Liferay 6.2 Basic Structure: [Two Column Layout]

<div  id="main-content" role="main">
<div class="portlet-layout row-fluid">
        <div class="span6 portlet-column portlet-column-first" id="column-1">
            $processor.processColumn("column-1", "portlet-column-content portlet-column-content-first")
        </div>
      <div class="span6 portlet-column portlet-column-last" id="column-2">
            $processor.processColumn("column-2", "portlet-column-content portlet-column-content-last")
        </div>
    </div>
</div>

These are the some comman classes who are conflict with Bootstarp 2.3 in liferay 6.2.

.signed-in .collapse {  display:block;  }
.lfr-edit-layout-panel .collapse{  display:block; }
.dockbar.navbar-static-top .collapse {      display: block;  }
.navbar-inner .collapse{     display:block;   }
.dockbar-ready #wrapper {    margin-top: 149px; }
.dockbar-ready section#content {    padding: 0 0 0 0;  }

.dockbar.navbar-static-top {
  background-color: transparent;
  padding: 0px;
}
.dockbar-messages{  display:none;	}

.lfr-device-preview{  z-index: 1000;  }

.modal{   display:block;	}

.modal-hidden{ display:none; }

LIFERAY UI

LIFERAY UI

Tag: Bootstrap 3

AngularJS Starter Templete With Bootstrap

Model:

View:

Controller

Creating Factory in Angularjs

Bootstrap 3 with Liferay 6.2

Bootstrap 2.3.2

Creating Theme with Bootstrap 3 in Liferay 6.2

Liferay 6.2 Basic Structure: [Two Column Layout]

These are the some comman classes who are conflict with Bootstarp 2.3 in liferay 6.2.

Categories

Archives

Tags