Your Personal Cheat Sheet For AngularJS Directives

Date 29 Jun 2017
Posted in Web Development


If you are using JavaScript you simply have to try the speedy Angular JS framework. The kind of flexibility Angular provides reduces hassles while coding and makes your job much faster. If you look at other frameworks, they can be defined as putting together a bunch of tools – ‘an integrated tool set’. However, according to ‘sitepoint.com’, Angular is the next generation framework where each tool was designed to work with every other tool in an interconnected way. That’s why we want to get you started with AngularJS right now. When it comes to dynamic mobile app creation this interconnected framework is extremely helpful and highly preferred. So we’ve prepared a sort of cheat sheet with a few essential directives you should know to understand Angular JS’ basic structure.

1. ng-app: The ng-app is your basic directive to set up an AngularJS application. Everything happens inside the ng-app and all functionalities are contained within it. It really is the ‘root element’ of the application. When the web page is loaded, Angular JS maps the page, and initializes the application when loaded.

2. ng-init: The ng-init directive recalls the data from a third-party database as required by the app. This directive ensures faster data linking, compared to other frameworks. Yet it isn’t very common, as people use ng-model to get the data. However, as mentioned earlier if the app requires linking to a third-party database, ng-init is the directive to use.

3. ng-model: As defined, ‘ng-model directive binds the value of HTML controls (input, select, textarea) to application data’. The advantage here is that this is two-way binding where the value can be found and updated in the HTML as well as the Angular JS file. It can also validate the entered value and point out any error. Apart from that, you can also use it to find out the status of data (for instance, if there is a value entered or if it is still null).

4. ng-repeat: The ng-repeat directive as the name suggests, repeats clauses/conditions/instructions which are applied to data. Specifically used to process bulk data, there by saving time and reducing code.

5. ng-controller: The ng-controller directive ‘controls the flow of data in the application’. What it means is that ng-controller manages the data in smaller sections making it easier for the coder to handle changes or data output. So if there is an issue in one part of the code, with the ng-controller you will be able to find it faster and redress it. The controllers can have different kinds of properties/attributes and functions depending on the overall requirement of the app.

6. ng-bind: ng-bind directive it similar to ng-model that it binds the HTML element to the application data. The difference is that, ng-bind will only display the content and not hold the value of the data, if required in the application. It will simply tell you what it is, like a set of instructions displayed on a page, and hold no intrinsic value to the code of the page.

7. ng-click: ng-click plans for an event in the application. In this case, the event is that of an expression of a ‘click’ (eg: submit form button) which then leads to the execution of instructions as planned in the code.
8. ng-blur: Like ng-click, ng-blur also plans for an event in the code. However, unlike ng-click, it specifies a behavior where something simply moves from point A to B, without requiring a ‘click button’. For instance, a cursor moving from text box A to text box B, once the value has been entered in text box A.

9. ng-class: The ng-class directive manages CSS classes in the HTML code. Once you define the CSS class, putting it under the ng-class directive, will make any future changes possible and hassle-free.

10. ng-form: As the name suggests, ng-form specifies an HTML form. In case, there are multiple forms in the app, with ng-form, the different forms can be managed individually. They are usually located within controllers, so that the controller can inherit the data from these forms. Forms in Angular also provide data-binding and even validate the HTML input elements.

Now that you’ve figured out the basics of Angular JS, go and experiment with them. Remember, the more you use them the more use you will get out of them. All the best!

  • Name: *
  • Email: *
  • Message: *