AngularJS is one of the most powerful JavaScript frameworks which is available today. The development process is simple, which is one of the main advantages of Angular JS. This makes it easier for prototyping not only small apps but also full-featured applications on the client side.

I would like to share some good tips that I have learned along the way that can help you start your AngularJS application on the right track.

Tip #1 : Directory Structure

While starting to code in any project, we should keep our code organized. We developers often struggle with code organization when scaling an application. It gets messy once it grows in size. We start losing times searching for files. I’ve come across this issue recently in AngularJS and JavaScript applications. So we should plan a good structure.

1. Classify Based on File Type

In the below AngularJS example, objects of the same nature are regrouped into a single file. This demonstrates poor code organization.

<div>
<pre>--Directory Structure--

app/
    js/
       app.js
       controllers.js
       services.js
   partials/
       login.html
       tasks.html
   index.html</pre>
</div>

The controller and service files will become enormously large and difficult to handle in no time.

2. Classify Based on MVC Type

The next way of organizing JavaScript involves creating a directory for each type, like controllers, services, and partials to store the templates. This type doesn’t provide any post about application architecture, we know that controllers are there but still need to dig in to understand their dependencies.

<div dir="ltr">
<div>
<pre>--Directory Structure--

app/
  js/
     app.js
     Controllers/
        loginController.js
        taskController.js
     Services/
        loginService.js
        taskService.js
  partials/
     login.html
     tasks.html
index.html</pre>
</div>
</div>

This works better for small projects but once you’ve reached more than 10 files per directory you start losing time again.

3. Classify Based on Features

Instead of keeping the files grouped by type, group files based on features: This directory structure makes it much easier to find all the files related to a particular feature in a single folder, which will speed up development. It doesn’t look good to keep files with .js files, but the time savings are more valuable.

<div dir="ltr">
<div>
<pre>--Directory Structure--

app/
   app.js
   login/
      login.html
      loginController.js
      loginService.js
   task/
      tasks.html
      taskController.js
      taskService.js
index.html</pre>
</div>
</div>
Tip #2  : Directives

AngularJS is not a framework to write code that modifies the DOM. To accomplish this we can use Directives.

  • Earlier libraries like jQuery were used for this.
  • Angular JS provides built-in directives that can help us.
  • We can create our own directives also.
Tip #3 : Scope
  • Scope must be used only in Controllers. Scopes are just used to get the data that the template will show and write this data in an object of the scope.
  • Scope must not be modified in the templates. Even if AngularJS allows us to modify the scope in the templates, it’s something that we probably shouldn’t do.
  • Do not create properties in the scope but object. Scope is just a way to bind our model with the template, so the model must be a javascript object, to use a simple property can and will give issues later on with the scope hierarchy.
Tip #4  : Multiple Bootstrap Modal in the Same Page

Once I come across a situation where I have to show multiple bootstrap

modals

from a single page. Also when I click a button from the first modal, I have to show another modal. This didn’t work for some time. The HTML page content was enormously large. The situation was such that I have to move the contents of the second modal to another HTML page. But, I found a better solution for this, which worked fine.

<div dir="ltr">
<div>
<pre>Solution : Move the 2nd modal div content above the first modal div content</pre>
</div>
</div>
Tip #5  : Ng-if Vs Ng-hide
<div dir="ltr">
<div>
<pre> ng-hide - Hide the contents in html

       ng-if - Comments off the contents in the html</pre>
</div>
<ul>
<li>Once I have faced a situation where I have to print the contents inside a div. On such situations ng-if is better since ng-show/ng-hide contents will always be visible on the print screen.</li>
</ul>
</div>
  • While using ng-if, I also have encountered a scenario where the scope values of the underlying HTML elements were not accessible. We can use ng-show/ng-hide instead when such an issue occurs.

Finally, need to mention that the above mentioned best practices, especially the folder structure may depend a lot on the application we want to build. If we are just building a small module, then it will not make any sense having different components in different files.

It all depends on the business nature, project size and these all will be unique for each project. So always keep this in mind and the try to follow the best practices described based on your requirement.

Need Help?


We are Perfomatix. We specialize in building highly scalable APIs and Mobile apps and we also have strong expertise in IoT appsVirtual Reality apps, and Augmented Reality appsGet in touch with us to find out how we can help in shaping your disruptive idea into a prototype, MVP and finally into a killer product. Visit our success stories section to find out more about some of the startups which made it big for us.


captcha

X