Angular Best Practices

— — It’s not finished but it has been into draft mode for the past 2 years now… — -

It’s a complete and simple introduction to the best practices on how to organise your project with Angular. The below architecture had a lot of traction and good feedback from conferences, clients and online communities that I have been involved in. Sorry if it’s a bit late…I was supposed to write this article 3 years ago…Better late than never, right? You can find the full Angular project on github. This article can be extended to Typescript. It’s not finished but it has been into draft mode for the past 2 years now…

What we will be talking about:

Folders organisation, components architectures, services, controllers, resources, directives, e2e tests, unit tests, tools like grunfile, jshint and etc around Angular and best practices.

What we will NOT be talking about

I will not be talking about es6 features in this medium article. I wrote another article about the new architecture around Angular 2 and all the different fancy tools: es6, webpack, RxJS, Zone.js and Typings :)

Architecture

Angular Folder Architecture

Looks like a basic start — but we will expand the app folder in the few minutes to make things quite interesting :)

Normal basic project files

• .bowerrc: file to configure your bower

.bowerrc.js

• .gitignore: to ignore the files that are automatically installed via npm install or bower install)

.gitignore

• bower.json: list all the bower modules to be installed in the project

• Gruntfile.js: the task manager for your project

Small part of gruntfile.js (otherwise it’s too long)

• packages.js: list all the npm modules to be install in the project

Partial parckage.json file

• protractor.conf.js: configuration file for your e2e (end to end) tests

protractor.conf.js

• Karma.conf.js: configuration file for your unit tests

Partial view of karma.conf.js

• .jshintrc: configuration file improving the code quality of your project

.jshintrc

Project folders

• public: contains all your application files
• test: contains all your test files for your application

Public folder

Public folder

The public folder is organised into two folders, one for the Javascript app code and one for the css folder. The index.html is the top entry of your app project.

Index.html — entry point of the app

To make this angular article very simple to understand — the different files are added at the bottom of the index.html file. Normally in the new architecture with es6 and Webpack you will bundle them into one file and then add it to the index.html. But this is another story…well another article !

You bootstrap your angular app by calling ng-app=”app”. You then add the different components (views) by typing ui-view.

The views

The views (the visuals on your page/DOM) will be displayed between the two div. Check your Browser debugger and you will see everything inside…Magic! :)

Please go deeper…

Deep view of the app folder

It’s starting to be more interesting … So the app folder contains a components folder, app.js and state.js files.

• components: the project is organised into components — each part of your application is an isolated component. So it easier to test and use them in another project.
• app.js: This is the glue / link between all javascript components.

app.js

So when you call app in you index.html it actually uses base, state and components.

• state.js: This is where you describe your navigation behaviour !

state.js

It use ui-router module behind the wood. It’s a This package / module is installed via bowerrc.json and then add it in index.html ! In this example, you want to redirect the user to /login in any case.

Component

Think about a component as a piece of behaviour on your app. In this example we have a login component. The login component is responsible for login/logout the user through your app.