- Two Way Data-Binding
- DOM-based templating with directives
- Dependency injection
- It incorporates the basic principles behind the original MVC software design pattern
For more detailed information you can visit here. Next, we will highlight the best practices for AngularJS.
Best practices for AngularJS
Following are some of these best practices:
We the developers spend a lot of time writing code. In the early phases of a project, the directory structure doesn’t matter too much and many people tend to ignore best practices for writing code. In the short term, this allows the developer to code rapidly, but in the long term, this affects code maintainability.
This structure makes it very easy for the reader to visualize. It seems to make a lot of sense and is very similar to a lot of Model-View-Controller (MVC) architectural pattern frameworks. We have a separation of concerns, controllers have their own folder, views have their own folder, and external libraries have their own folder.
Dependency injection(DI) is one of AngularJS’s best software design patterns. for giving components their dependencies – rather than hard-coding them within the components. It makes easily testable components as well as making it clear upon which any particular object depends. AngularJS is very flexible on how things can be injected. DI is pervasive all throughout AngularJS. The simplest version requires just passing the dependency name into the function of the module.
The above screenshot makes it very clear that ‘MainCtrl’ depends on $scope and $timeout.
- One should prefer using the dash-delimited format (e.g. ng-model for ngModel). While working with an HTML validating tool, one can instead use the data-prefixed version (e.g. data-ng-model for ngModel).
- Moreover, one must prefer using directives via tag name and attributes over comment and class names. Doing so, generally makes it easier to determine what directives are given element matches.
- While creating directives, it is recommended to prefix your own directive names to avoid collisions with the future standard.
Keep Presentation Logic Out of Controllers
It’s easy for a programmer to fall into the habit of presentation manipulation of the DOM in a controller, which can be problematic in an MVC architecture.
In MVC architecture, every module is separated into either the model, view or controller. The view is where your presentation logic is coded. The presentation is anything to do with the DOM. If you need to change a value in any HTML element, you should only use the presentation layer to do it.
When you perform presentation execution in the controller rather than the view, you break the separation of layers. When you or another developer goes back to maintain the code, you may miss the code in your controller that shouldn’t be there. This often leads to bugs.
Use AngularJS-specific Testing Tools
This tool can help you debug, review, test, and determine if you have any errors in your code. It keeps track of the scope, and you can view the element attached to the scope.
How to Quick Start with AngularJS
To implement web applications using the front-end application framework, you just need to have some idea of the following concepts:
- HTML: Most of the templates we create in AngularJS is in the form of handcrafted HTML. So you must know that what are forms in HTML and what are tags ng-form etc.
- CSS: While handcrafting template you should require CSS to make more attractive UI design.
- DOM: DOM stands for Document object model. The directives in AngularJS binds the application data to the attributes of HTML DOM elements. With a good jquery background, you can easily pick up this part.
- Model View Whatever (MVW): AngularJS was closer to MVC (Model-View-Controller) but on account of various refactoring and API improvements, it has become closer to MVVM (Model-View-View Model). MVW is used heavily by all AngularJS developers. It is coined by Google. It is a simple MVC concept.
- Separation of Concern (SOC): SOC concept is heavily used in AngularJS. In AngularJS all the controllers, directive, services and factories are made for SOC. It provides a more lean and cleaner code. Also, reusability automatically increases, if you use the SOC concept.
- Promises: Promises are a core feature of AngularJS. Promise is the eventual result of any operation. A promise will tell what to do when the operation fails or succeeds. Promises are nothing but callbacks. When you call any AngularJS service it will be called asynchronously. When the response is sent from service callback hold the response and do the needful.
Note: If you like to learn by coding then this AngularJS tutorial is what you’re looking for In this tutorial, you’ll learn about Angular basics, controllers, services, filters and directives.
jQuery VS AngularJS
The below image will give you a perfect picture – comparing the above technologies, enabling to decide which is best suited for your web application.
Must Know before using AngularJS
- AngularJS is Entirely Client-Side
- AngularJS is Focused on Data
- AngularJS Provides a Declarative UI
- AngularJS Data Objects are POJO