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.
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.
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:
Next, add the file “webpack.config.js” to your root directory and use this code to get started.
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.
Next, add another file named “index.html” to your root directory and use this code to get started.
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.
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
Part 2: Your First Component