AngularJS Tips 
 
─ Rahil Shaikh 

CipherTrick 
Website - ​www.ciphertrick.com 
Twitter - ​https://twitter.com/rahil471 
Github - ​https://github.com/rahil471 
 

 
   1 
 

Directory Structure 
Probably the most important thing to take care off, when planning for a large scalable 
project.  
There are a few options to structure an angular project, probably the below is the best. 
This will make your code more maintainable and would be easier to locate. 
public/
app/
components/ (Smaller mini apps/modules)
home/
home.html
home.js (mainApp.home, controller and or
services)
signup/
signup.js
signup.html
shared/ (Shared across two or more components/directives)
sidebar/
sidebar.html
sidebar.js
app.js (Main app/configurations and routes.)
assets/
css/
scss/
js/
env/ (Can be single or multiple files depending on the setup)
prod.js
dev.js
index.html
   2 
 

If npm/bower are used as package managers, the respective folder would be along-side 
public 

Modularise your app 
Angular comes with dependency injection. Use this to advantage and modularise your app 
into smaller separate components (mini apps). 
Create a root module whose role is to pull together smaller feature modules into the app. 
Create many, self-contained mini modules. 

Controller As syntax 
Uses controller as syntax over the traditional scope model. Makes nesting controllers 
easier and provides better readability. 
Learn to use controller as syntax ​here​. 

Use Factories and services. 
Move common logic into factories and services. Move Web API requests to factories and 
keep your controllers skinny. 

Factories for $http 
There are a few ways to make an $http request. Using .then instead of success and error 
allows you to chain promises and serve precessed responses from factories when needed. 
Learn about it ​here​. 

Forms 
There are a few things to watch out for when working with forms in angularjs. 
● Use AngularJS form validation, avoid jquery. 
● Use novalidate attribute to disable html5 validation. 
● ng-messages​ is an awesome module to make form validations more cleaner. 
Angular v 1.3 and above supported. 
   3 
 

● If your application involves lots of forms then use some library to manage forms 
and generate forms dynamically. ​Angular-formly​ is one of the most popular. 
● Always store complete form data in an object instead of separate variables. 

Testing 
Angular is designed to support testing. Write unit tests from the beginning of the project. 
This will make you confident about your code and help you in the long run. 
Use karma as your test runner and ​jasmine ​as the framework. You can also use other 
frameworks like mocha chai. 
Learn how to write unit tests ​here​. 
Use protractor for E2E testing. 

Routing: 
One of the most important aspects of any single page application. Use UI-router built by 
Angular-UI team instead of ngRoute, that comes by default. 
UI router​ will make your app more flexible and provide you with nested and parallel 
routing. 

Package managers 
Use package managers like npm or bower to manage packages and libraries. Using npm 
has an advantage if your are working on Node.js for you backend and it also supports 
module loaders like browserify. 

Workflow automation - (Advance) 
Use task running tools like Gulp or grunt to automate mundane development tasks. 
This would straight away boost your efficiency and allow you to concentrate on 
development work. 
Some of the tasks you can automate: 
● Minification 
● Concatenation 
● Javascript Linting 
   4 
 

● Spinning up server and running the app 
● Auto refresh browser on code change. 
● Running unit tests and e2e tests. 
And the lists goes on. 
We have done a separate article on using Gulp to automate JavaScript workflow ​here​. 

Module Loaders - (Advanced) 
Use module loaders to load javascript libraries and scripts into browser. 
Browserify is an excellent tool which lets us use ​require(‘module’)​ in browser just like we 
do in Node.js. 
This prevents loading of hundreds of script tags into your index page. Browserify is easy to 
use and can easily be automated by writing gulp/grunt tasks. 
Learn how to use browserify ​here