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.
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.
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.
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 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.
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.