Angular Hot SPA (Single-Page Application)

If you’ve read my previous article you probably have some understanding of how a common JavaScript build system works. While it’s great to know how it works, having to re-write build tasks for every project is too repetitive. There are many boilerplate projects available which you can use to get started with, but today we’ll focus on Angular Hot SPA - a starter project I developed using ES6, AngularJS, Material UI, and SASS.

Let’s dive right into it. Assuming you have Node installed, let’s clone and install the repository.

~ git clone https://github.com/iamvfl/angular-hot-spa.git my-angular-project
~ cd my-angular-project
~ npm i
~ rm -rf .git
~ .git init

Now that you have a newly intialized git repository with a project inside, go ahead and edit package.json and change the name to your project’s name to make it your own.

These are the files and folders that you should be aware of.

|--- my-angular-project
|  |--- client
|     |--- app
|     |--- build
|     |--- fonts
|     |--- images
|     |--- stylesheets
|     |--- views
|     |-- index.html
|  |--- tasks
|     |-- ...
|-- gulpfile.js
|-- package.json

Our angular code can be found in client/app/, and our stylesheets could be found at client/stylesheets. If you need to modify or add a build or development task, use the tasks/ directory with the provided gulpfile.js.

Let’s start our application in development mode by using the default gulp task.

~ gulp

This should open a new browser window with a basic angular application to get you started.

If you open up client/app/application.js you’ll see the entry point for our Angular application. It’s mainly Angular.js, Material UI and SCSS.

Import Statements

You’ll notice that we’re making use of ES6-style imports to import local scripts and npm packages without manually pulling in vendor scripts. This module management system is available to us thanks to Babel and Browserify, and it saves us having to manually include scripts in index.html.

File Organization by Feature

I’m a big fan of @john_papa’s Angular Style Guide. Instead of separating our components in big folders or files called controllers or services, our code is separated into folders organized by feature. This makes code easy to navigate and work with, and it also avoids a lot of merge collisions when working in git.

SASS & FontAwesome

SASS support comes out of the box and so does the FontAwesome icon font. This makes prototyping simple and quick as we can also import stylesheets from npm packages.

Final Word

If you’d like to improve on Angular Hot SPA, I encourage you to make an issue or pull request on GitHub so we can improve the project for everyone.

Tags: 
angular hot spa
angular es6
angular e6 gulp
angular es6 boilerplate
Front-end Developer