You are here

Parts of AngularJS

There are several parts of AngularJS. build the innovative application, here are most of them

  1. Model - the information that's shown to the user. it's straightforward Plain previous JavaScript Object additionally referred to as POJO.
  2. View - The seeable space or formatted knowledge
  3. Controller - The business logic that drives the applying
  4. Scope - A context that holds knowledge models and functions.
  5. Directives - Extends HTML with custom parts and attributes
  6. Expressions - "}", wont to access scope models and functions
  7. Template - HTML and extra markup within the sort of directive and expressions
  8. Compiler - It parses the model and instantiates directives and expressions. In alternative words, the compilation in AngularJS suggests that attaching event listeners to the HTML part to create them interactive.
  9. Filter - It formats the worth of AN expression
  10. Data Binding - It synchronize knowledge between model and consider
  11. Dependency Injection - Creates and wires perform and objects
  12. Injector - it's an instrumentality for dependency injection
  13. Module - A instrumentality for various parts of the applying like filters, controllers, directives etc.
  14. Services - reusable business logic
  15. Directives are markers on a DOM parts (HTML Tags, attribute, comment or CSS class) that tell compiler of AngularJS ($compile) to connect such behavior on these DOM parts or perhaps rework them and its children.

In short, Directives are markers within the HTML tag that tells Angular to run or reference JavaScript code. Following ar list of most of the directives in AngualarJS

  1. ng-app – wont to attach the applying Module to the page or parent HTML part
  2. ng-controller – wont to attach a Controller perform
  3. ng-show / ng-hide - wont to show or hide a part supported the expression
  4. ng-repeat – wont to repeat a part for every item in AN Array
  5. ng-model – wont to bind the part to the property price of the Model.
  6. ng-init – wont to initialize our knowledge
  7. ng-change – wont to decision a perform once the part changes (input part within form) <form ng-change=”compute()”></form>
  8. ng-submit – won't to decision perform once the shape is submitted, it additionally mechanically prevents the shape doing its default post action to the server
  9. ng-<event name> (ng-click/ng-dblclick) - wont to decision a perform on these events
  10. ng-class – to line the category name, accepts the category name price as Boolean
  11. ng-src – wont to set the trail for the image
  12. ng-href – wont to set the target universal resource locator for the anchor tag
  13. ng-cloak - wont to hide parts until AngularJS bootstraps and finishes loading

AngularJs directives usually starts with weight unit but we are able to additionally prefix it with “data” like “data-ng-app”. therefore rather than writing ng-app, we are able to write data-ng-app.

We shall study these directives one by one in their separate posts.

Normalization of Directive formats

Generally directives are written dash delimited as AN attribute to the HTML part, but it also can be written in following ways in which

The module may be an instrumentality for various elements of AngularJS application like controllers, filters, services etc.

This is the place wherever we tend to write code for Angular application 
It makes our code a lot of reparable, testable and simply legible
This is additionally an area to outline dependencies in our app
Why Module?

Most applications have a main technique that gets instantiated once the application runs for the primary time and this technique instantiate totally different elements of the applying.

AngularJS does not have main technique, therefore it uses a module that specifies, however, AN application ought to be started. the advantages of this approach ar following

We can produce reusable modules
Modules are loaded in any order
Unit takes a look at does not have to be compelled to load all the app, simply loading that specific module is enough to start out unit testing
It's simple to know
How to outline a module?

To create a module, we tend to use angular.module technique. It accepts 2 parameters

1st parameter - the name of the module
2nd parameter - the array of module names on that this module depends on

Expression in AngularJS is javascript like code that's placed in bindings to insert dynamic values into the HTML pages. It starts with  "}".