Full Stack Solutions
Javascript Design Pattern (4)

Angular 1.6 With ECMA6 Setup & JWT Authentication (Open Source)

ANGULAR JS IN LAST YEARS

Angular 4 & 5 are in the Market from last year but Angular 1.6 is also a stable version in the market right now even this version have some issues but all these are properly documented.Angular JS

Angular currently sits atop the framework hierarchy ,with  79% of respondents using it to create  Application compared to 64% last year.Additionally Typescript is one of the most favorite flavor of  JavaScript . 52%  respondents , up from 32% last year.

Capture22

This growth among Angular users sits in stark opposition to React, which has stayed static year-over-year in terms of user growth, coming in at 30% over our last two community surveys.

ANGULAR JS ASSIGNMENT :

Angular JS Application consist of following modules :

Download Full Assignment in PDF : Assignment

  1. LOGIN With JWT Token
  2. Registration with POST API

12

3)After Login User Account Page
3

4) Lead Capture Page

4

 

Assignment Solution  : As this is the basic Application with Authentication and CRUD Operation in Angular JS so it’s not good for the Beginner even Mediator can learn few of the things from this application like the Pattern i have used to develop that Angular Application and all the build process has been automated by Webpack.

If you are new to Webpack you can learn atleast some basic of webpack on http://webpack.js.org and Babel we have used,just because i want to use some nice features of ES6.You plugin a compiler  – Traceur or Babel -into your buildchain and it will compile your ECMAScript 6 to ECMAScript 5 which runs fine in any browser.

First thing first Why choose BABEL OVER TRACEUR ?

If you want to use ES6 in current Project you would like to compile it in a way , that it runs in all modern browsers.

Traceur needs a runtime, whereas Babel compiles and includes every Polyfill, that it needs into the ES5 output. So I decided to go with Babel so I have all code required in the compiled output.

PROJECT STRUCTURE : 

You can go through the Project Structure by https://github.com/impuneet/angular-1.6-webpack-setup.

Through the Webpack i have configured the four things :

  • Entry
  • Output
  • Loaders
  • Plugins
  • devServer

As I have used the Component based architecture so in entry there is need to resolve the module.js file.

entry: {
        'app': './src/app.module.js',
        'vendor': './src/vendor.module.js'
    },
    devtool: 'source-map',
    output: {
        filename: 'libs/[name].bundle.js',
        path: path.resolve(__dirname, 'build')
    },

There are some loaders that we need to include into our configuration file like i have installed some loaders by  https://webpack.js.org/concepts/loaders/:

npm install --save-dev css-loader
npm install --save-dev ng-annotate-loader
npm install --save-dev babel-loader
npm install --save-dev sass-loader
npm install --save-dev file-loader
npm install --save-dev url-loader

Next part is to configure the Plugins in the webpack configuration File as Plugins are the backbone of the Webpack.They also serve the purpose of doing anything else that a loader cannot do.

Following is the Component based Project Structure :

5

6

Creating your First Component With Module Binding : 

Login API is http://192.34.78.153:5000

Following are the request Headers :

X-Api-Token : This is the API Authentication token.Use your full name represented as slug e.g puneet-sharma

X-Login-Token : API function that need a client login , require you to specify the login token using this header.

Developing Services for the Login in the service file user.service.js.Service just include that part which will have Socket,$http and XHR Calls

    login = (data,token) => {
        return this.$http.post('http://192.34.78.153:5000/clients/login/',data,{
            headers: {
                "X-Api-Token": token
            }
        }).then((response) => {
            console.log('response',response);
            return response;
        },(err) => {
            return err;
        });
    }

Routing Path is : \src\services\router-helper\app-routes.js

{
name: 'home',
url: '/',
component: 'home',
requireLogin: false
}

In the \src\components\home\index.js  file  we have import the component file in to the index.js.

import homeComponent from './home.component';
const homeModule = angular.module('app.home', []);
// loading components, services, directives, specific to this module.
homeModule.component('home', homeComponent);
// export this module
export default homeModule;

and in the Component binding of Controller & HTML(View)

import template from './home.html';
import controller from './home.controller';

export default {
    template: template,
    controller: controller
};

and in Controller we have just send the request to the login Service.

Final part is to link into the app.modules.js

For Build Process,the script is to start the Webpack Dev Server only .

  "scripts": {
    "start": "webpack-dev-server --progress --open",
    "build": "webpack --progress",
    "test": "echo "Error: no test specified" && exit 1"
  },

Hence it’s not possible for me to explain each and every component here in the blog so other part has been Open Source and there are also some issues listed in the repository.You can take initials to resolving these issues & create pull request.

Hence this project can be used by other users too by downloading it and can additional features into this Project.If you have any doubts related,you can comment in to the comment box.

I will try to make a small Video to go through all the component of the Project till then you can set up the repo & can follow me on Github for some other interesting work.

Github Source Code

 

  • gridlove_ad_300x250.jpg