Angular JS

  • AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.

  • AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.

  • AngularJS extends HTML with ng-directives.

    • The ng-app directive defines an AngularJS application.

    • The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

    • The ng-bind directive binds application data to the HTML view.

Introduction

AngularJS Example

<html>
<head>
    <title>Angular JS Example</title>
    <script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
    <div ng-app="">
        <p>Name: <input type="text" ng-model="name"></p>
          <h1>Hello {{name}}</h1>
</div>
</body>
</html>

AngularJS Example

  • AngularJS starts automatically when the web page has loaded.
    • The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.
    • The ng-model directive binds the value of the input field to the application variable name.
    • The ng-bind directive binds the content of the <p> element to the application variable name.

AngularJS Expressions

  • AngularJS binds data to HTML using Expressions

  • AngularJS expressions can be written inside double braces: {{ expression }}.

  • AngularJS expressions can also be written inside a directive: ng-bind="expression".

  • AngularJS will resolve the expression, and return the result exactly where the expression is written.

  • AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.

    Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}

Example

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Example

If you remove the ng-app directive, HTML will display the expression as it is, without solving it:

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div>
  <p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Angular JS Expressions

You can write expressions wherever you like, AngularJS will simply resolve the expression and return the result.

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol">
</div>
</body>
</html>

Angular JS Objects

AngularJS objects are like JavaScript objects:

<html>
<script src="angular.min.js"></script>
<body>

<div ng-app="" ng-init="person={firstName:Ravi',lastName:'Chythanya'}">
<p>The name is: {{person.firstName +' ' +person.lastName }}</p>
</div>

</body>
</html>

Angular JS Arrays

AngularJS arrays are like JavaScript arrays:

<html>
<script src="angular.min.js"></script>
<body>

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The name is: {{ points[2] }}</p>
</div>

</body>
</html>

Angular JS Modules

  • An AngularJS module defines an application.

  • The module is a container for the different parts of an application.

  • The module is a container for the application controllers.

    Controllers always belong to a module.

Creating a Module

A module is created by using the AngularJS function angular.module as follows:

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>

  • The "myApp" parameter refers to an HTML element in which the application will run.
  • Now you can add controllers, directives, filters, and more, to your AngularJS application.

Adding a Directive

You can use the module to add your own directives to your applications:

<script>

var app = angular.module('myApp', []);
app.directive("myDirective", function() {
  return {
    template : "I was made in a directive constructor!"
  };
});
</script>

</body>
</html>

AngularJS Directives

  • AngularJS lets you extend HTML with new attributes called Directives.

  • AngularJS has a set of built-in directives which offers functionality to your applications.

  • AngularJS also lets you define your own directives.

AngularJS directives are extended HTML attributes with the prefix ng-.

  • The ng-app directive initializes an AngularJS application.        
  • The ng-init directive initializes application data.
  • The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

Repeating HTML Elements

The ng-repeat directive repeats an HTML element:

<html>
<script src="angular.min.js"></script>
<body>

<div ng-app="" ng-init="subjects=['WT','TOC','OS']">
  <ul>
    <li ng-repeat="x in subjects">{{ x }}</li>
  </ul>
</div>

</body>
</html>

Create New Directives

  • In addition to all the built-in AngularJS directives, you can create your own directives.
  • New directives are created by using the .directive function.

  • To invoke the new directive, make an HTML element with the same tag name as the new directive.

  • When naming a directive, you must use a camel case name, myDirective, but when invoking it, you must use - separated name, my-directive:

Example

AngularJS arrays are like JavaScript arrays:

<body ng-app="myApp">
<my-directive></my-directive>

<!--div my-directive></div-->
<script>
var app = angular.module("myApp", []);
app.directive("myDirective", function() {
  return {
    template : "<h1>Made by a directive!</h1>"
  };
});
</script>

</body>

AngularJS Controllers

  • AngularJS controllers control the data of AngularJS applications.

  • AngularJS controllers are regular JavaScript Objects.

  • The ng-controller directive defines the application controller.

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

Example

<html>

<script src="angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>

Example

<script>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName = "Ravi";
  $scope.lastName = "Chythanya";
});
</script>

</body>
</html>

Controller Methods

A controller can also have methods (variables as functions):

<html>
<script src="angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>

Controller Methods

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
  $scope.firstName = "Ravi";
  $scope.lastName = "Chythanya";
  $scope.fullName = function() {
    return $scope.firstName + " " + $scope.lastName;
  };
});
</script>

Angular JS Events

AngularJS has its own HTML events directives.

  • ng-blur                                                                                              
  • ng-change
  • ng-click
  • ng-copy
  • ng-cut
  • ng-dblclick
  • ng-focus
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseup
  • ng-paste
  • ng-show

Mouse Events

Increase the count variable when the mouse moves over the H1 element:

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="count = count + 1">Mouse over me!</h1>
<h2>{{ count }}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

ng-paste Event

<html>
<script src="angular.min.js"></script>

<body ng-app="">

<input ng-paste="count = count + 1" ng-init="count=0" value="Paste text here!" />

<p>Text has been pasted {{count}} times.</p>

<p>This example will increase the value of the variable "count" every time you paste text into the input field.</p>

</body>
</html>

ng-click Event

<button ng-click="myFunc()">Click Me!</button>

<div ng-show="showMe">
  <h1>Menu:</h1>
  <div>Pizza</div>
  <div>Pasta</div>
  <div>Pesce</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.showMe = false;
  $scope.myFunc = function() {    $scope.showMe = !$scope.showMe;  }
});

Made with Slides.com