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

December 13, 2015 Harmeet Singh

What’s new in Bootstrap 4 alpha

Bootstrap 4 comes with ton of major changes so it’s impossible to cover them all in detail here, so here are some of our most major changes:

Moved from Less to Sass:Using Libsass bootstrap now compiles Sass faster then ever, and also joined large community of Sass developers.
Improved grid system: Bootstrap now have added a new grid standard to better target mobile devices.
Flexbox support: The future of web is now change a boolean variable and recompile your CSS to take advantage of a flexbox-based grid system and components.
Customization is easy:In Bootstrap 4 Now It’s easy to customize the some CSS style options instead of creating new style of like box-shadows,text-shadows transitions, gradients, and more to a separate stylesheet like v3, bootstrap moved all these options into Sass variables. If we want default transitions on everything or to disable rounded corners? Simply we just need to update a variable in Sass and recompiled it.
Drop IE8 support and moved to rem and em units: Bootstrap 4 dropped support for IE8 and we can take advantage of the CSS3 without being held back with CSS hacks or fallbacks. Typography Pixels have been swapped for rems and ems where appropriate to make responsive and component sizing even easier. If you need IE8 support, keep using Bootstrap 3.
Rewrote all our JavaScript plugins: Every plugin has been rewritten in ES6 to take advantage of the newest JavaScript enhancements. They also now come with UMD support, generic teardown methods, option type checking, and tons more.
Tooltips and Popovers: Bootstrap 4 improved auto-placement of tooltips and popovers using library called Tether.

And many other things like Custom form controls, margin and padding classes, new utility classes, and more have also been included.

Know more about Bootstrap 4 head to the v4 alpha docs!

One more thing…

Bootstrap 4 alpha also launching our latest side project, Official Bootstrap Themes.

December 13, 2015 Harmeet Singh

wkhtmltopdf – Generating PDF and Images

wkhtmltopdf is amazing open source (LGPLv3) command line tool wkhtmltopdf to render HTML to PDF and various image formats using the Qt WebKit rendering engine. These run entirely “headless” and do not require any service.

There is also a C library, if you’re into that kind of thing.

How to use wkhtmltopdf ?

Download a precompiled binary or build from source
Create your HTML document that you want to convert into a PDF (or image)
Run your HTML document through the tool.
For example, if I really like the treatment LiferayUI has done to their logo today and want to capture it forever as a PDF:wkhtmltopdf https://liferayui.com liferayui.pdf

Global Options:
      --collate                       Collate when printing multiple copies
                                      (default)
      --no-collate                    Do not collate when printing multiple
                                      copies
      --cookie-jar <path>             Read and write cookies from and to the
                                      supplied cookie jar file
      --copies <number>               Number of copies to print into the pdf
                                      file (default 1)
  -d, --dpi <dpi>                     Change the dpi explicitly (this has no
                                      effect on X11 based systems)
  -H, --extended-help                 Display more extensive help, detailing
                                      less common command switches
  -g, --grayscale                     PDF will be generated in grayscale
  -h, --help                          Display help
      --htmldoc                       Output program html help
      --image-dpi <integer>           When embedding images scale them down to
                                      this dpi (default 600)
      --image-quality <integer>       When jpeg compressing images use this
                                      quality (default 94)
      --license                       Output license information and exit
  -l, --lowquality                    Generates lower quality pdf/ps. Useful to
                                      shrink the result document space
      --manpage                       Output program man page
  -B, --margin-bottom <unitreal>      Set the page bottom margin
  -L, --margin-left <unitreal>        Set the page left margin (default 10mm)
  -R, --margin-right <unitreal>       Set the page right margin (default 10mm)
  -T, --margin-top <unitreal>         Set the page top margin
  -O, --orientation <orientation>     Set orientation to Landscape or Portrait
                                      (default Portrait)
      --page-height <unitreal>        Page height
  -s, --page-size <Size>              Set paper size to: A4, Letter, etc.
                                      (default A4)
      --page-width <unitreal>         Page width
      --no-pdf-compression            Do not use lossless compression on pdf
                                      objects
  -q, --quiet                         Be less verbose
      --read-args-from-stdin          Read command line arguments from stdin
      --readme                        Output program readme
      --title <text>                  The title of the generated pdf file (The
                                      title of the first document is used if not
                                      specified)
  -V, --version                       Output version information and exit

Additional options

That’s amazing, I’ve always wanted to turn LiferayUI homepage into a PDF, but I want a table of contents as well.

There are lot’s of command line options. You can check out the auto-generated wkhtmltopdf options.

You can also add custom Header and Footer in PDF using page option.

wkhtmltopdf --header-html header.html https://liferayui.com liferayui.pdf

LIFERAY UI