AngularJS:

---

AngularJS:

AngularJS is a structured, very powerful JavaScript based open-source front end web framework. It is used for one-page dynamic applications. It is maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. Single page means the webpages need to be refreshed. We can further divide a webpage into different components. It is used by thousands of developers around the world. It is mainly used for creating the web applications. It was originally developed in 2009 by Misko Hevery and Adam Abrons.

AngularJS injects the required components to the same webpage, i.e. the webpage becomes dynamic. And when the user navigates to a URL, AngularJS injects the required components into the same page instead of refreshing the page. It essentially reuses the components which do not change, i.e. reducing the load time.

Short, AngularJS is a framework to build large scale, high-performance, and easy tomaintain web applications.

---

AngularJS Key Features

• Model-View-Controller: MVC is a kind of UI development architecture that includes three interconnected elements- Model (handling the logic), View (Dealing with how to render logic on screen) and Controller (Dealing with how to update the UI if any change happens).
• Data Model Binding: With this feature Angular keeps both the Model and View in sync.
• Directives: These are simple classes that tell the browser that the part is an Angular code.
• Writing less code: Angular uses component-based UI design, hence code is relatively smaller.
• Deep Linking: It is a special type of hyperlinking that takes us not only to a particular page but to a specific spot in the application.
• Dependency Injection: It is a feature that enables angular to get the essential dependencies required for its classes to run.

---

Advantages

• It is an open-source framework, freely available and maintained by Google
• Easy to Learn and work in minimum possible time.
• It extends HTML by providing its own elements called directives
• Its codes are reusable hence the overall application size is smaller.

---

Angular JS CDN

The CDN link for Angular JS can be taken from the web reference of Google itself.

This link can be used in the script tag as follows:

Code:

Output: Enter your name in the box and see what happens.

---

AngularJS Expression:

AngularJS expressions are those that are written inside double braces {{expression}}.AngularJS evaluates the specified expression and binds the result data to HTML. AngularJS expressions can also be written inside a directive: ng-bind="expression".

AngularJS expression can contain literals, operators and variables. AngularJS displays the data exactly at the place where the expression is placed.
For example, an expression {{6/2}} will produce the result 3 and will be bound to HTML.

Code:

Output:

• ng-app ="" or simply ng-app refers to the ng-app directive which means that there is no module to assign controllers, directives, services attached to the code.
• If directive ng-app is removed from the code, HTML will simply display the expression without solving it.

For Example, let’s take the above code and remove the ng-app directive:

Code:

Output:

---

Important features of AngularJS expressions

• AngularJS expressions can
  1. Be written inside HTML and support filters.
  2. Contain literals, operators, and variables.
  3. Contain literals of any data type.
  4. Contain arithmetic operators which may produce the result based on the type of operands.
  5. Contain variables declared via ng-init directive.
  6. The ng-init directive is used to declare AngularJS application variables of any data type.


• AngularJS expressions cannot
  1. Contain conditions, loops, exceptions or regular expressions e.g. if-else, ternary, for loop, While loop etc
  2. Declare functions
  3. Contain return keyword
  4. Contain comma or void

---

AngularJS Numbers:

In AngularJS, numbers can be used in expressions. Any expression using the number and the operators (like , +, -, *, %, etc) then these are called number expressions. We may use ng-init directive to declare and initialize the variables in AngularJs. For example: ng-init="RateOfInterest=5;PrincipalAmount=20000"

Code:

Output:

---

String Expressions in AngularJs:

The string expression in Angularjs is a unit of code to perform operations on string values. It may be simply adding two stings i.e. concatenation etc.

Code:

Output:

---

AngularJS Objects:

AngularJs expressions can have objects as well. The object expressions in AngularJs hold object properties in them and the same way then evaluates at the view where they are used.

For Example, lets define one object as a personname object having 2 key value pairs of "firstName" and "lastName". personname object may be defined using ng-init directive like ng-init="personname={firstName:'Shashi',lastName:'Kant'}"

Code:

Output:

---

AngularJS Array Expressions:

Expressions can be used to work with arrays as well. Array expressions in AngularJs are the expression that hold an array and use those array objects while evaluating array expressions. For Example, marks array may hold Marks value of various subject (here 4 subjects) and it may be defined using ng-init directive as ng-init="marks=[85,80,75]".

Code:

Output:

---

Using different types of variables (of any data type) in a webpage:

Expressions can be used to work with arrays as well. Array expressions in AngularJs are the expression that hold an array and use those array objects while evaluating array expressions. For Example, marks array may hold Marks value of various subject (here 4 subjects) and it may be defined using ng-init directive as ng-init="marks=[85,80,75]".

Code:

Output:

---