Pages

Monday, 2 November 2015

Simple Login page using AngularJs Bootstrap and Grunt

        In this tutorial we are going to create a simple Login page using AngularJs Bootstrap and Grunt. Here we don't use any grunt per-written templates. We create the application from the very base so that you get the clear picture of this application.

This is the login page that we are going to implement.



Prerequisites
Download and install NodeJs and Git.

1. NodeJs  : https://nodejs.org/en/download/
2. Git     : https://git-scm.com/downloads

Step 1. Create the directory structure
Create the following folder structure.
- demoapplication/
    --src/
    --src/common/
    --src/demoapp/

demoapplication - is the root folder of this project. (You can give any name..)
src - Contains application's source files. Later we fill this up with HTML,CSS and JS files.

Step 2. Set up npm dependencies
        npm (Node Package manager) manages dependencies for an application. We specify the npm configuration in a meta data file  package.json. To create package.json go to project root folder (Here demoapplication/) and run the below command.

> npm init

 You will be prompted to enter certain values like name,version etc. Give relevant values and hit Enter.
Finally npm will show a full package.json file an asks you 'Is this OK? (yes)'
Give yes and continue.

Now add the dependencies for the application. Open package.json and add devDependencies as below.
"devDependencies": {
    "grunt": "^0.4.5",
    "grunt-angular-templates": "^0.5.7",
    "grunt-bower-concat": "^0.6.0",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-concat": "^0.5.1",
    "grunt-contrib-connect": "^0.11.2",
    "grunt-contrib-copy": "^0.8.2",
    "grunt-contrib-watch": "^0.6.1",
    "load-grunt-tasks": "^3.3.0"
    }
To install the packages run the below command.

> npm install

This will take few minutes to download all the dependencies. You can see the installed packages inside /demoapplication/node_modules directory.

Step 3. Configure bower Dependencies
        Similar to npm , bower is also a package manager and is optimized for the front-end web applications.
Here we add dependencies like bootstrap,angularJs etc which are required for proper working of application.The config file for bower is bower.json. Create this file by running the command.

> bower init

Fill the details like package.json and create bower.json.
Now add the dependencies to bower.json.
"dependencies": {
    "angular": "~1.4.7",
    "angular-route": "~1.4.7",
    "bootstrap": "~3.3.5"
  }
Finally install the package using below command.

> bower install

You can see the installed packages inside bower_components folder.

Step 4. Develop login page using AngularJs and apply css bootstrap styles

Our application will have the following files.
index.html - First page where we load all the js/css etc and bootstrap AngularJs application.
header.html - Header menu using CSS bootstrap nav bar.
login page - Simple login page in plain html.

Now create the following files.
  1. src/index.html
  2. src/common/header.html
  3. src/demoapp/demoapp.css
  4. src/demoapp/demoapp.html
  5. src/demoapp/demoapp.js
Below is the source code of each file.
1.index.html
<html ng-app="demoapp">
 <head>
  <title>Demo Application</title>
  
  <link rel="stylesheet" type="text/css" href="css/bower.css">
  <link rel="stylesheet" type="text/css" href="css/app.css">

  <script src="js/bower.js"></script>
  <script src="js/app.js"></script>
  <script src="js/templates.js"></script>
 </head>
 <body>
  <div ng-include='"src/common/header.html"'></div>
  <div ng-view></div>
 </body>
</html>

2.header.html
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container-fluid">
   <div class="navbar-header">
   </div> 
    <a class="navbar-brand" href="http://tutorialbasics.blogspot.in">TutorialBasics</a>
   </div>
</nav>

3.demoapp.css
body {
   padding-top: 100px; 
   text-align: center;
   background-color:#F4F4F4;
}
.login-form {
    background-color: #E4E4E4;
}

4.demoapp.html
<div class="container">    
    <div class="col-md-5 col-md-offset-3">                    
        <div class="panel panel-primary" >
            <div class="panel-heading">
                <div class="panel-title">Account Login</div>
            </div>     

            <div class="panel-body login-form" >
                <input type="text" class="form-control" placeholder="username or email" />
                </br>
                <input type="text" class="form-control" placeholder="password" />
                </br>

                <div class="form-group">
                    <input type="checkbox"> Remember me
                </div>        

                <div class="form-group">
                    <input type="button" class="btn btn-lg btn-success btn-block" value="Sign in">
                </div>

            </div>
        </div>
    </div>
</div>

5.demoapp.js
var demoapp =  angular.module('demoapp',['ngRoute']);

demoapp.config(['$routeProvider',function($routeProvider){
 $routeProvider.when('/demoapp',{
  templateUrl: 'src/demoapp/demoapp.html',
        controller: 'demoController'
  
 }).otherwise({ redirectTo: '/demoapp' });
}]);

demoapp.controller('demoController',function($scope){
 //controller code here...
});


Step 5. Configure Grunt

Grunt is a JavaScript task runner. Tasks includes minify files,validate files,combine files,start server and many more.
All these tasks can be automated and trigger using single command.

Grunt uses a configuration file (Gruntfile) where we define the tasks and order in which they run.
Gruntfile can be either Gruntfile.js or Gruntfile.coffee. Here we use Gruntfile.js.

Create Gruntfile.js file inside project root directory (demoapplication/). Open Gruntfile.js and add the below content.

Gruntfile.js
'use strict';
module.exports = function(grunt) {
  require('load-grunt-tasks')(grunt);
  
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    /*watch - watch the files for modification and trigger the build*/
    watch: {
      options: {
        livereload: true,
      },
      src: {
        files: [
        'src/**/*.*',
        ],
        tasks: ['build']
      },

      gruntfile: {
        files: ['Gruntfile.js']
      }
    },

  /*connect - open server at localhost and liveupdate contents*/
    connect: {
      options: {
        port: 9000,
        hostname: 'localhost',
      },
      livereload: {
        options: {
          open: true,
          base: 'deploy'
        }
      }
    },

  /*copy - copy index.html to deploy folder*/
    copy: {
      build: {
        cwd: 'src',
        src: [ 'index.html' ],
        dest: 'deploy/',
        expand: true
      }
    },

    /*clean - clean the deploy directory*/
    clean: {
      build: {
        src: [ 'deploy' ]
      },
    },

    /*concat - concat all js/css files into single file*/
    concat: {
      options: {
        separator: ';'
      },
      appjs: {
        src: ['src/**/*.js'],
        dest: 'deploy/js/app.js'
      },
      appcss: {
        src: ['src/**/*.css'],
        dest: 'deploy/css/app.css'
      },

      bowercss: {
        src: ['bower_components/**/*.css'],
        dest: 'deploy/css/bower.css'
      },
    },

    /*bower_concat - concat all js files inside bower_components directory*/
    bower_concat: {
      all: {
        dest: 'deploy/js/bower.js',
      }
    },

    /*ngtemplates - put all html files into templateCache and generate as single js file*/
    ngtemplates: {
      options: {
        base: "deploy",
        module: "demoapp",
      },
      app:        {
        src:      'src/**/*.html',
        dest:     'deploy/js/templates.js'
      }
    }

  });

grunt.registerTask('build', [
  'clean',
  'concat',
  'bower_concat',
  'ngtemplates',
  'copy'
  ]);

grunt.registerTask('default', [
  'build',
  'connect',
  'watch'
  ]);

};

You will see many tasks defined in Gruntfile.js file. These tasks are implemented in npm dependencies that we added in Step 2.
Below is the list of tasks and it's purpose.

Task
npm package
use
clean
grunt-contrib-clean
To clean the final deploy directory
copy
grunt-contrib-copy
Copy files to deploy folder (Here only one file index.html)
concat
grunt-contrib-concat
Concat - concat all js/css files into single file
bower_concat
grunt-bower-concat
Concat all js files inside bower_components directory
ngtemplates
grunt-angular-templates
Put all html files into templateCache and generate as single js file
connect
grunt-contrib-connect
Open server at localhost and live update contents
watch
grunt-contrib-watch
Watch the files for modification

grunt.registerTask registers task,sub tasks and order of execution.Two tasks are registered here- build and default.The build task contains other sub tasks like clean,concat etc. default is the main task which will run the application.

Step 6. Run the application

Now everything is set for running the application. Before that make sure you have all the folder/files in the below structure.

To run the application type the below command in cmd from project root( demoapplication/)

> grunt 

This will automatically build and copy the files to deploy folder and open the login page in your web browser as we saw in the beginning.
URL to demoapp - http://localhost:9000/#/demoapp 

Few points to remember
  • Live load: If we change any files inside src folder same will be reflected automatically in web page. (No page refresh needed).
  • Always make sure you update files inside src folder only (Don't update the files under deploy folder).
  • All the html files are compiled to templates.js file( You won't see any html files inside deploy folder. grunt-angular-templates does this trick).
That's it. Hope this will be handy application to begin with. Feel free to share your comments and feedback.

Git repo : https://github.com/tutorialbasics/login-demo.git


Posted by at
Labels: , , , , , , ,

23 comments:

  1. muhyasin894 November 2015 at 09:09

    good tutorial keep it up

    ReplyDelete
  2. Unknown6 April 2016 at 01:57

    Please provide app.js and template.js files mentioned in index.html file

    ReplyDelete
  3. Unknown20 May 2017 at 00:20

    AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how - www.credosystemz.com/training-in-chennai/best-angularjs-training-in-chennai

    ReplyDelete
  4. Tejuteju8 August 2018 at 03:05

    Awesome Post Keep Updating AngularJS5 Online Training

    ReplyDelete
  5. Zinavo-Web Design | Web Development | SEO | Mobile Apps | ERP/CRM8 November 2018 at 22:04

    I would like to say thanks for sharing the best information.. Web Designers in Bangalore | Website Designers in Bangalore | Website Design in Bangalore Bangalore

    ReplyDelete
  6. Freya23 September 2019 at 05:35

    Hey, awesome blog! Really loved your post and its too impressive!We are top Mobile App Development Company |
    Web and Mobile app development company Australia |
    Best mobile app development company |
    Web and Mobile app development company UK

    ReplyDelete
  7. Anonymous25 September 2019 at 03:46

    Am impress this blog, very informative content.i hope you to post more..
    top software development companies
    custom software development company

    "
    web and mobile app development company
    "

    ReplyDelete
  8. Jones Brianna29 November 2019 at 00:13

    Very informative article, Which you have shared here about create Login page using angularjs bootstrap. After reading your article I got very much information and it is very useful for us. I am thankful to you for sharing this article. Fantasy sports app development

    ReplyDelete
  9. ppc fame20 August 2021 at 05:34

    As one of the leading Web designing company in Mohali, we cater to the fraternity of the clients and provide them the services which suits best to their requirements. We analyze the situation of every business deeply, understand their purpose and comprehend with it accordingly. Our services include web designing, Logo Design, web development and search engine optimization. We provide websites to our clients which are very cost efficiently. We work in all the industries from fashion to Entertainment to health care and real estate. When it comes to your business you should not take chances but rather go for the best and we at PPC Fame provide you with the best resolutions. We are the first preference for the industry leaders and well settled businesses when it comes to best Web designing company in Mohali.
    Web designing company in Mohali

    ReplyDelete
  10. shivax17 September 2021 at 22:23

    Thank you so much for sharing useful information
    mobile app development companies in dubai|mobile app development companies in usa|mobile app development companies in canada

    ReplyDelete
  11. Renovate Me28 September 2021 at 21:22

    Thanks for sharing this article. I would like to share this Home Renovations Adelaide

    ReplyDelete
  12. Gratis School Of Learning21 October 2021 at 05:23

    Through this Digital Marketing Institute in Panchkula, you will become an expert in modules such as SEO, Social Media Marketing, PPC, Analytics, Content, Mobile, and Email Marketing. Our Social Media Marketing and PPC courses in Panchkula have trained end number of students. Work on real-world projects, learn the latest tools, and attend masterclasses led by the Google and Facebook certified team.

    - Get hands-on training on live projects!
    - Upgrade your resume
    - Get prepared for your dream job.
    - 120+ hours of high-quality training.
    - 10+ live projects.
    - 25+ digital marketing tools and platforms.


    Call: +91 9887046666
    Email: info@g-sol.net
    Timings: 10:00 AM TO 12:00 PM
    Location: SCO-9, First Floor, Sector-11, Panchkula, Haryana 134109

    ReplyDelete
  13. iVedaHelp Blogs28 October 2021 at 04:56

    Are you facing a GMB suspension issue??? Don't worry here you can find How to Get Suspended GMB Back. Still, have doubt???

    Call: 7087400802

    ReplyDelete
  14. Unknown4 November 2021 at 02:20

    Thanks for sharing this unique information with us. Your post is really awesome. Your blog is really helpful for me. Please check out dry ice dekat saya 

    ReplyDelete
  15. Latest Gist15 December 2021 at 05:33

    This post came at the very right time. Thanks for taking time to write this educating post. I have save this post and will come back for new post. What Are The 3 Types of Hackers?

    ReplyDelete
  16. onlineAssignmenthelp29 December 2021 at 23:31

    Business Management Assignment Help

    ReplyDelete
  17. Aarya Sharma10 January 2022 at 03:29

    Thanks for sharing this amazing content. it's very useful to me. The blog has a lot of information, the way you have clearly explained is really fantastic. Thanks a lot for this blog.

    Hire Dedicated HTML5 Developers

    ReplyDelete
  18. utkarsh9 February 2022 at 04:03

    Tons of remote java developer jobs are out there right now if you know where to look. Many Fortune 500 companies rely on Java developers to keep their services running smoothly and their websites up-to-date. Thank you for the tips and tricks.

    ReplyDelete
  19. jamessmith0554012 February 2022 at 06:16

    9k movie bz torrent news 9kmovie hindi dubbed movies 9kmovie.com press 9k movies 300mb,9kmovie 2020 9xmovies 9xmovie 9kmovies.com 9kmovies.net.
    daily out fit idea youth beauty tips Mini Big News

    ReplyDelete
  20. jamessmith0554012 February 2022 at 06:17

    city big story techgadget time nation news time news sofar whole family fun expenses help

    ReplyDelete
  21. GS Web Technologies27 September 2022 at 03:46

    Get amazing digital marketing services from the Best Digital Marketing Company in Zirakpur. Boost your sales, leads, and traffic at a very affordable price.


    Our Services:

    Website development Company in Zirakpur

    Application development Company in Zirakpur

    Graphic designing Company in Zirakpur

    Social Media Company in Zirakpur



    Contact Information:


    Name: GS Web Technologies: Website, Mobile App Development, Graphic Designing and Digital Marketing Company in Zirakpur, India.


    Address: 3rd Floor, Paras Down Town Square Mall, Zirakpur, Punjab – 140603, India.


    Phone Number: +91- 9501406707

    ReplyDelete
  22. Great Assignment Help25 September 2023 at 00:07

    This comment has been removed by the author.

    ReplyDelete
  23. blogscomment332225 November 2023 at 02:44

    Social eavesdropping is observing how humans interact with each other in certain situations. Dogs constantly watch their owners interact with other humans and based on these observations segregate people into being kind or rude.read more on k9nerds

    ReplyDelete

Subscribe to: Post Comments (Atom)