Credits: Shirsendu Das

Angular JS is a JavaScript framework. AngularJS extends HTML attributes with Directives and binds data to HTML with Expressions. It can be added to an HTML page with a

[cbCode category:design,category2:design2,lang:php] [cbCode]

Editor/IDE:

You can use any good editor as per your choice. Ex- Sublime Text, Eclipse, Notepad++, Visual Studio etc. You can also use any online editor.

Web Server:

Use any web server such as IIS, apache etc.

Browser:

As Angular JS supports cross-browser compatibility then you can use any browser as your choice.

Basic building blocks of AngularJS:

We will learn the following things in Angular JS:

1. Directives
2. Expressions
3. Data binding
4. Module
5. Model
6. Filters
7. Controllers
8. $scope object

Directives:

Directives are attributes on a DOM element. It gives the specific behaviour to that DOM element. Directives are extended HTML attributes with the prefix ng- . Some of the directives have been described below-

ng-app:-

This is the root element of the AngularJS application. This directive initializes an AngularJS application. You can only have one ng-app directive in your HTML document. If more than one ng-app directive appears, the first appearance will be used. Syntax- Modulename“> Content here….

ng-init:-

This directive evaluates the given expression and initializes any application data. Syntax- expression/initialize application data“ “> Content here….

ng-controller:-

This directives takes the data from the view , process the data and then sends the data to the view. Syntax- expression“> Content here…. \\

ng-model:-

This directive binds the HTML controls (input, textarea etc ) to application data. Syntax- application data“ “> Content here….

ng-repeat:-

This directive repeats a HTML element. When we want to repeat a same task, we use this directive. [cbCode category:design,category2:design2,lang:php]

Example:-

Enter Numbers to addition:

+

= {{ num1+ num2}}

Looping with ng-repeat:

{{ x }}

[cbCode]

Expressions:

AngularJs Expressions is used to bind application data to an Html. It can be written within braces {{expression}}. It can be used inside a directive like ng-bind.

Ex-

[cbCode category:design,category2:design2,lang:php]

AngularJS Expressions

Hello {{student.firstname + ” ” + student.lastname}}!

Expense on Books : Rs.

Roll No: {{student.rollno}}

Marks(English): {{marks[4]}}

Output:

AngularJS Expressions

Hello Riya dutta!

Expense on Books : 60 Rs

Roll No: 34

Marks(English): 60

[cbCode]

Data binding:-\Data binding in Angular JS is to synchronize between view and model. Angular JS supports two-way data binding menas when data in the model changes then the view is updated and vice versa.

Ex-\[cbCode category:design,category2:design2,lang:php]

Name:

{{firstname}}

[cbCode category:design,category2:design2,lang:php] [cbCode]

Change the name inside the input field, and the model data will change automatically

Module:-

Module is a container of different parts of your app- controllers, services, filters, directives, etc. Module is created by angular js function angular.module

var app = angular.module(“myApp”, []); myApp parameter refers to an HTML element in which the application will run. [] This array is the list of modules myApp depends on. Without the [] parameter, you are not creating a new module, but retrieving an existing one.

Models:-

The data shown to the user in the view and with which the user interacts.

Filters:-

Filters are used to modify the data. They can be clubbed in expression or directives using pipe (|) character. The following list shows the commonly used filters.

• Uppercase- Converts a text to uppercase text. Ex

[cbCode category:design,category2:design2,lang:php]

Enter first name:

Enter last name:

Name in Upper Case: {{student.fullName() | uppercase}}

Lowercase- Converts a text to lowercase text. Ex.

Enter first name:

Enter last name:

Name in Lower Case: {{student.fullName() | lowercase}}

• Currency- formats text in a currency format. Ex.

Enter fees:

fees: {{student.fees | currency}}

[cbCode]

• Filter- To display only required subjects, we use subjectName as filter. Ex.

[cbCode category:design,category2:design2,lang:php] Enter subject: Subject:

{{ subject.name + ‘, marks:’ + subject.marks }}

• Order by – To order subjects by marks, we use orderBy marks. Ex.

Subject:

{{ subject.name + ‘, marks:’ + subject.marks }} [cbCode]

Controllers :-

AngularJS application mainly relies on controllers to control the flow of data in the application. In AngularJS, a Controller is defined by a JavaScript constructor function that is used to augment the AngularJS Scope. Ex

[cbCode category:design,category2:design2,lang:php] [cbCode category:design,category2:design2,lang:php] [cbCode]

$scope object :- Scope is a JavaScript object that connects controller with views. Scope contains model data. In controllers, model data is accessed via $scope object. Ex.

[cbCode category:design,category2:design2,lang:php] [cbCode]

With Angular, we declaratively define our events on our HTML elements, but wire up the code in the controller. This separation makes our application much easier to maintain. Hope, my blog is helpful to the beginners who are trying to know about AngularJS.