AngularJS coding best practices

An application developer spends most of his time to write code. It is best practice to structure the directory in a way that helps the developer to write code rapidly. It is important to structure the AngularJS controllers, directives, filters, and so on in separate JavaScript files. You can get more information about the AngularJS coding style at following links:

Organizing code

Most of the times, the structure of the application is defined by the way in which the files are organized in the project. AngularJS does not describe a certain directory structure; there are three different commonly used patterns to organize AngularJS code.

Piles

In this technique, the project contains the following directory structure:

ProjectName

  • CSS
  • Images
  • JS
    • app.js
    • controller.js
    • directive.js
    • filters.js
    • services.js
    • HTMLS

In this type of directory structure, we have a subdirectory for each type for example. We keep all the cascaded style sheet files in CSS, all image in images folder, and so on. The JavaScript (JS) subdirectory has one JavaScript file of each AngularJS object type. In case of a large project where we have a large number of controllers or services, it will be hard to find files.

Drawer

In this type of code structure, we will organize our AngularJS code in the subdirectories instead of a single file. We will create different subdirectories for different AngularJS objects, shown as follows:

ProjectName

  • CSS
  • Images
  • JS
    • app.js
    • controllers
      • ctrlLogin.js
      • ctrlRegistration.js
      • ctrlCustomer.js
    • directives
    • filters
    • services
  • HTMLS

In this kind of organization, it is easy to locate the file using the file tree. Also, it will be easy to identify which file to modify in the source control.

Modularity

This type of code organization is useful if we need to reuse the controllers, directive, filters, and services in other projects. It is best practice to arrange all files according to the category, shown as follows:

ProjectName

  • CSS
  • Images
  • JS
    • app.js
    • authentication
      • ctrlLogin.js
      • ctrlRegistration.js
      • ctrlLogout.js
      • srcAuthentication
    • customers
      • ctrlGetCustomer.js
      • ctrlUpdateCustomer.js
      • customerFilter.js
  • HTMLS

With this structure, any developer can now open the top-level folder and immediately get insight into the project as to what it can do and find out which project to undertake.

Common code

In each and every project, there is some common code that is used by other modules in the application. Follow the given best practices for the common code in the project:

  • If the AngularJS module is required to be accessed from other common objects, write one or more facades for them.
  • If the common module is becoming too large, it is good practice to divide the module into submodules.
  • We need to add utility methods into $rootScope; in this way, they can be used by child scopes. This technique will avoid the use of same dependency in each controller in the application.
  • Use the $emit, $broadcast, and $on methods on the scope, which will help to decouple two components that need explicit reference to one another.

Using AngularJS

The following are best practices of how to use the AngularJS framework:

  • In order to initialize the application for AngularJS, place the <script> tag, which includes all AngularJS JavaScript files at the bottom of the page to improve the load time.
  • Create a function for the complex code inside the controller; the function will be then called from the view.
  • Try to avoid creating a controller in the global scope:
    • The AngularJS controller can only be used to set up the initial state of the $scope directive and one or two behaviors. Avoid using the controller to do the following:
      • DOM manipulation
      • Input formatting
      • Output filtering
      • Share code and state across different controllers
      • To manage the lifecycle of other components
    • The controller only needs to have business logic for a single view
    • It is recommended that you use an array notation to declare the controller function
  • It is preferred that you use a directive through tags or an attribute's name in the HTML instead of using a comment or class.
  • It is recommended that you use a prefix with AngularJS objects, such as ctrl with the controller.
  • It is preferred not to use large HTML in a template, instead use HTML's separate file and load it in the DOM.
  • Passing dependency to the constructor function rather than using one of the following arrays is a better way of injecting dependencies. We do this so that the responsibility of creating the dependency object could lie with other objects or functions. Not only is this a straightforward directive for those who have worked with one or more dependencies in the past, but it is also a welcome note for beginners. A dependency injection can also be performed by using one of the following methods:
    • By creating it using a new operator
    • By looking for it in a well-known place or a global singleton
    • By asking for a registry or service registry for it
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset