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.
Perfomatix |AngularJS Development Company
Perfomatix is a leading angularJS development company, providing product engineering services for large and small businesses worldwide.
Would you like to hire angular developers?
Feel free to drop in a note for us right now. Talk to our experts now and let us be your innovation partner!
