AngularJS Modular/Component Design Series

Part 1 — Setup AngularJS and Webpack

In this series, I will walk you through setting up your AngularJS web application to use modular/component based design and optimize it using lazy loading. In this first section, we will create a simple hello world application using NodeJS, AngularJS and Webpack. You’ll need to download the latest stable version of NodeJS before starting. For this demo, I’ll be using version 12.16.1.

https://www.nodejs.org

Once installed, open a terminal in the directory you would like to host your project, verify you have node installed by entering the “node -v” command. Initialize your application by entering the “npm init” command. Npm will then ask you questions about the new project, you can accept all the defaults for this project by pressing enter for all the questions asked.

Your folder should have a “package.json” file in it. Open it and verify that it looks like the below file.

Initial Package.Json File

Now that we have initialized our project, let’s import our development dependencies webpack, webpack-cli, html-webpack-plugin and webpack-dev-server. Enter the command “npm i --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server”

Next add your AngularJS Dependency using the command “npm i angular”

The final “package.json” file should look like this:

package.json after install dependencies

​Next, add the file “webpack.config.js” to your root directory and use this code to get started.

webpack.config.js

Now lets add a file that will be the entry point of our application. In the root folder of your application, create a file called “index.js”. Next, open “index.js” import angularjs and initialize a new module and controller that will be used to display our hello world message.

index.js

Next, add another file named “index.html” to your root directory and use this code to get started.

index.html

The last thing we need to do is add “build” and “run” alias commands. Inside your “package.json” file add these two properties to the script property and remove the test property. You can delete the existing “test” property from the “scripts” tag.

adding build and run commands to project.json

In your terminal, run the commands “npm run build” then “npm run start”. After they complete, you should now see your app in your browser.

Explanation of what we did.

After we installed NodeJS and initialized our folder using “npm init” we used npm to install 4 libraries to our projects development dependencies, and 1 to our overall dependencies.

Development Dependencies:

webpack

webpack-cli

html-webpack-plugin

webpack-dev-server​

Global Dependencies:

angular

Webpack and webpack-cli allow us to to setup and use webpack from the terminal. Html-webpack-plugin is a webpack plugin that creates our index.html and adds all of our javascript dependencies so that we can create a single page application. webpack-dev-server is a web server we can use to test our application, angular is the front end framework we will being using. These libraries are tracked in the “package.json” file by npm.

Inside the “scripts” section in our “package.json” file, we added lines of code to help with building and running our application. This allows us to create aliases for commands using the “npm run {alias}” syntax. We can now use “npm run build” to build the client, and “npm run start” for the command “webpack-dev-server — open” which turns on our web server.

"scripts": {    
    "build": "npx webpack",
    "start": "npx webpack-dev-server --open"  
},

Inside of our entry file “index.js” we find two lines of code:

/*
     import AngularJS
*/
import angular from "angular"; 
/*
    Create a new App Module named "AngularComponentDemo" and
    register a controller named "sampleController" to it
    create a property on the scope called message and assign it
    the value "Hello world"
*/
angular.module("AngularComponentDemo", [])
    .controller('sampleController', function($scope){
        $scope.message = "Hello world";
    }
);

In the “index.html” file, we added the basic layout of an html page with a ng-app and ng-controller attributes on the body tag. These tells Angular that the “AngularComponentDemo” module can be found on this part of the page, and which controller to assign to the application.

The last thing we did was set up our webpack configuration file (webpack.config.js). Lets walk through and see what each line means

/*
    import path library, and html-webpack-plugin  
*/
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {  
    /*
        Set the mode for the webpack build
    */   
    mode: 'development',
    /*
        Entry point for our javascript application   
    */
    entry: {    
        index: './index.js'  
    },
    /*
        The path where the script files can be located and
        where to output the files from the webpack build 
    */
    output: {    
        publicPath: './',
        path: path.resolve(__dirname, 'dist')
    },
    /*
        html-webpack-plugin used to template html page for our UI
    */
    plugins: [    
        new HtmlWebpackPlugin({      
            title: 'Angular Component Demo',      
            template: './index.html'    
        })  
    ],
    /*
        configure webpack dev server to use our dist folder for the
        server and set the public face path to "/"
    */
    devServer: {    
        publicPath: "/",    
        contentBase: path.join(process.cwd(), "dist")  
    }
}

To checkout the working version of this, clone my Angular Component Demo, then run the install, build and start commands to run.

git clone https://github.com/Tsm012/AngularJSComponentDemo_HelloAngularJSAndWebpack.git

npm install

npm run build

npm run start

​You can also follow along on Youtube:

https://www.youtube.com/watch?v=9SMoVhdFAP8

References:

AngularJS

Concepts | webpack

Part 2: Your First Component

AngularJS Modular/Component Design Series — Creating and Loading Your First Component