Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Angular 1.6 With ECMAScript 6 Setup

DZone's Guide to

Angular 1.6 With ECMAScript 6 Setup

While it's a bit old, Angular 1.x is still a pretty good solution for creating web apps. Read on for an introduction to this developing with this framework.

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

Project Overview

The following section enumerates the structure our application will follow. You can download a cheat sheet for the structural basics here.

  1. LoginImage title

2. Registration with POST API

Image title

3. After login, take the user to their account page.

Image title4. Create a lead capture page:

Image title

This this is a basic application with authentication and CRUD operations in AngularJS, and all the build processes have been automated with Webpack.

If you are new to Webpack you can learn at least some of the basics of Webpack on http://webpack.js.org. I have also used Babel because I want to use some nice features of ES6. You can plugin a compiler  – Traceur or Babel - to your build chain and it will compile your ECMAScript 6 to ECMAScript 5, which runs fine in any browser.

First things first, why choose Babel over Traceur?

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

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

Project Structure

You can go through the project structure on my GitHub repo.

Through Webpack, I have configured five things:

  • Entry
  • Output
  • Loaders
  • Plugins
  • Dev Server

As I have used a component-based architecture in entry component, I 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. For example, I have installed some loaders using the following commands:

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

The next part is to configure the plugins in the Webpack configuration file, as plugins are the backbone of Webpack. They also serve the purpose of doing anything else that a loader cannot do.

The following is the component-based project structure :

Image title

Image title

Creating Our First Component With Module Binding: 

Login to the API at http://192.34.78.153:5000.

The following are the request headers:

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

  • X-Login-Token: API function that needs a client login and requires you to specify the login token using this header.

Developing services for the login are in the user.service.js service file. The service just includes 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;
        });
    }

The 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 imported the component file into 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;

In the component binding of the controller and HTML (view) use the following code:

import template from './home.html';
import controller from './home.controller';
 
export default {
    template: template,
    controller: controller
};

In the controller, we have just sent the request to the login service.

The final part is to link what we've done with the app.modules.js file.

For the build process, the script starts only the Webpack Dev Server.

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

While it’s not possible for me to explain each and every component here in the post, the other parts of the project have been open sourced and there are also some issues listed in the repository. You can look there to resolve these issues and create a pull request.

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

I will try to make a small video to go through all the component sof the project. Until then, you can check out the repo and can follow me on GitHub for some other interesting work.

GitHub link for the project.

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:
webpack ,angularjs ,web application development ,ecmascript

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}