Angular.JS

What is AngularJS?

“AngularJS is what HTML would have been if it was designed for applications”.

AngularJS makes it easy to develop modern, single page web applications (SPAs).

  • AngularJS binds application data to HTML elements.
  • AngularJS can clone and repeat HTML elements.
  • AngularJS can hide and show HTML elements.
  • AngularJS can add code “behind” HTML elements.
  • AngularJS supports input validation.

 

AngularJS Expressions

AngularJS expressions are written inside double braces: {{ expression }}.

AngularJS expressions binds data to HTML.

AngularJS will “output” data exactly where the expression is written.

AngularJS expressions are much like JavaScript expressions.

AngularJS expressions can contain literals, operators, and variables (just like JavaScript).

Example {{ firstName + ” ” + lastName }}

AngularJS Directives

AngularJS directives are HTML attributes with an ng prefix.

The ng-app directive initializes an AngularJS application.

The ng-init directive initialize AngularJS data.

Directive Description
ng_app Defines the root element of an application.
ng_bind Binds HTML elements to application data.
ng_click Defines the behavior when an element is clicked.
ng_controller Defines the controller object for an application.
ng_disabled Binds application data to the HTML disabled attribute.
ng_init Defines initial values for an application.
ng_model Binds application data to HTML elements.
ng_repeat Defines a template for each data in a collection.
ng_show Shows or hides HTML elements.

The ng-app Directive

The ng-app directive defines the root element of an AngularJS application.

The ng-app directive will auto-bootstrap (automatically initialize) the application when a web page is loaded.


The ng-init Directive

The ng-init directive defines initial values for an AngularJS application.

Normally, will should not use ng-init. You should use ng-controller instead.


The ng-model Directive

The ng-model directive binds HTML elements to application data.

The ng-model directive can also:

  • Provide type validation for application data (number, email, required).
  • Provide status for application data (invalid, dirty, touched, error).
  • Provide css classes for HTML elements.
  • Bind HTML elements to HTML forms.

The ng-repeat Directive

The ng-repeat directive clones HTML elements once for each item in a collection (in an array).

AngularJS Controllers

AngularJS applications are controlled by controllers.

The ng-controller directive defines the application controller.

A controller is a JavaScript Object, created by a standard JavaScript object constructor.

The $scope of the controller is the application /the HTML element) it is referred from.

<div ng-app=“” ng-controller=“personController”>

First Name: <input type=“text” ng-model=“person.firstName”><br>
Last Name: <input type=“text” ng-model=“person.lastName”><br>
<br>
Full Name: {{person.firstName + ” ” + person.lastName}}

</div>

<script>
function personController($scope) {
    $scope.person = {
        firstName: “John”,
        lastName: “Doe”
    };
}
</script>

Application explained:

The AngularJS application is defined by ng-app. The application runs inside a <div>.

The ng-controller directive names the controller object.

The function personController is a standard JavaScript object constructor.

The controller object has one property: $scope.person.

The person object has two properties: firstName and lastName.

The ng-model directives binds the input fields to the controller properties (firstName and lastName).

AngularJS Filters

AngularJS filters can be used to transform data:

Filter Description
currency Format a number to a currency format.
filter Select a subset of items from an array.
lowercase Format a string to lower case.
orderBy Orders an array by an expression.
uppercase Format a string to upper case.

Filtering Input

An input filter can be added to a directive with a pipe character (|) and filter followed by a colon and a model name.

The filter filter selects a subset of an array:

<div ng-app=“” ng-controller=“namesController”>

<p><input type=“text” ng-model=“name”></p>

<ul>
  <li ng-repeat=“x in names | filter:name | orderBy:’country'”>
    {{ (x.name | uppercase) + ‘, ‘ + x.country }}
  </li>
</ul>

</div>

AngularJS HTML DOM


AngularJS has its own HTML attributes directives.


The ng-disabled Attribute

The ng-disabled directive binds application data directly to the HTML disabled attribute.

<div ng-app=“”>
<p>
<button ng-disabled=“mySwitch”>Click Me!</button>
</p>
<p>
<input type=“checkbox” ng-model=“mySwitch”>Button
</p>
</div>

The ng-disabled directive binds the application data “mySwitch” to the HTML disabled attribute.

The ng-model directive binds “mySwitch” to the content (value) of the HTML input checkbox element.

 

AngularJS Events


The ng-click Directive

The ng-click directive defines an AngularJS click event.

<div ng-app=“” ng-controller=“myController”>

<button ng-click=“count = count + 1”>Click me!</button>

<p>{{ count }}</p>

</div>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.