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
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
<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.
Tip #4 : Multiple Bootstrap Modal in the Same Page
Once I come across a situation where I have to show multiple bootstrap
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
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!