An Introduction to AngularJS

In this article you will be introduced to AngularJS. AngularJS is a JavaScript framework and follows the MVC (Design pattern) architecture.

Here is an introduction to AngularJS

  • AngularJS is a JavaScript framework.

  • AngularJS follows the MVC (Design pattern) architecture.

  • In general JavaScript is strongly associated with HTML elements while performing the manipulations to DOM. To overcome this, AngularJS provides us to create our own elements or attributes (Directives or expressions as per AngularJS).

  • AngularJS also supports creating a Single Page Application. Single Page Application means loading different views into a single page without reloading all the time.

  • AngularJS will enhance the HTML elements by providing some new attributes or expressions.

  • Even though the angular elements are associated with HTML elements, the browsers will ignore the angular elements, whereas our angular instance will process these angular elements .

  • For building an AngularJS app, we need to configure or refer the built-in script file(.js). This file we can accessed from the following url:

    AngularJS official website

  • In the home page of that page itself we can have the download button, where we can have the script file and in addition to it we can find the CDN too.

angularjs

Angular js

Adding reference of .js file to app:

code

How to make our app as AngularJS app

In a .HTML page if we want a certain part of the code to behave as AngularJS,  then that part of the directive should be decorated or extended with ng-app = "" .

code
code
code

From the above snaps, we know that ng-app directive can be placed at any section or at any level of the html tags.

Now, here we may have a small question such as, "How many ng-app can be declared in a page ?". Here the answer will be any number.  There is no rule that should have only one ng-app.

The perfect and popular definition about ng-app is:

"ng-app is the root element of an AngularJS application, under which directives can be used to declare bindings and define behavior."
 
Read more articles on AngularJS: