Lecture#08 Angular JS

Dr. Mubbashir Ayub

What is Angular JS

 AngularJS extends HTML with new attributes.

 AngularJS is perfect for Single Page Applications (SPAs).
 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 elements
with Expressions.
 Example1.html
Angular JS CDN

 Like JQuery and Bootstrap, Angular JS has its own CDN

 Use always with the script tag
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js
"></script>
How AngularJS Extends HTML

 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.
 Example2.html
AngularJS Directives

 The ng-init directive initializes AngularJS application variables.

 <div ng-app="" ng-init="firstName=‘Mubbashir'">

<p>The name is <span ng-bind="firstName"></span></p>

</div>
 Ng-init.html
 Alternatively above can be written as:
 <div data-ng-app="" data-ng-init="firstName=‘Mubbashir'">

<p>The name is <span data-ng-bind="firstName"></span></p>

</div>
AngularJS Expressions

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

 AngularJS will "output" data exactly where the expression is written:
 <div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>
 If you remove the ng-app directive, HTML will display the expression as it is, without
solving it:
 AngularJS expressions bind AngularJS data to HTML the same way as the ng-
bind directive.
AngularJS Expressions

 You can write expressions wherever you like, AngularJS will simply resolve the expression
and return the result.
 Example: Let AngularJS change the value of CSS properties.
 Change the color of the input box below, by changing its value:
 <div ng-app="" ng-init="myCol='lightblue'">

<input type=“text” style="background-color:{{myCol}}" ng-
model="myCol">

</div>
 Example CSS.html
AngularJS Numbers

 AngularJS numbers are like JavaScript numbers:

 <div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
 Same example using ng-bind:
 <div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>
AngularJS Strings

 <div ng-app="" ng-init="firstName=‘Mubbashir';lastName=‘Ayub'">

<p>The name is {{ firstName + " " + lastName }}</p>

</div>
 AngularJS Objects
 <div ng-app="" ng-
init="person={firstName:'Mubbashir',lastName:'Ayub'}">

<p>The name is {{ person.lastName }}</p>

</div>
AngularJS Arrays

 <div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is {{ points[2] }}</p>

</div>
 Same example using ng-bind:
 <div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is <span ng-bind="points[2]"></span></p>

</div>
AngularJS Expressions vs. JavaScript Expressions

 Like JavaScript expressions, AngularJS expressions can contain literals, operators, and
variables.
 Unlike JavaScript expressions, AngularJS expressions can be written inside HTML.
 AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript
expressions do.
 AngularJS expressions support filters, while JavaScript expressions do not.
AngularJS 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.
 Creating a Module
 A module is created by using the AngularJS function angular.module
 <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.
Adding a Controller

 Add a controller to your application, and refer to the controller with the ng-controller
directive:
 <div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div> The [] parameter in the module definition can
be used to define dependent modules.
<script> Without the [] parameter, you are
not creating a new module, but retrieving an
var app = angular.module("myApp", []);existing one.

app.controller("myCtrl", function($scope) {
  $scope.firstName = “Mubbashir";
  $scope.lastName = “Ayub";
});

</script>
Adding a Directive
 AngularJS has a set of built-in directives which you can use to add functionality to your
application.
 In addition you can use the module to add your own directives to your applications:
 <div ng-app="myApp" w3-test-directive></div>

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

app.directive("w3TestDirective", function() {
  return {
    template : "I was made in a directive constructor!"
  };
});
</script>
 Example: Directive.html
Modules and Controllers in Files

 It is common in AngularJS applications to put the module and the controllers in separate
JavaScript files.
 In this example, "myApp.js" contains an application module definition, while "myCtrl.js"
contains the controller.
 Example: Files.html
AngularJS Applications
 AngularJS modules define AngularJS applications.
 AngularJS controllers control AngularJS applications.
 The ng-app directive defines the application, the ng-controller directive defines the controller.
 <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}}
AngularJS module defines
</div> application:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName= "Mubbashir";
  $scope.lastName= "Ayub"; AngularJS controllers control
});
applications:
</script>
Repeating HTML Elements

 The ng-repeat directive repeats an HTML element:

 <div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>
 Example: Repeat.html
AngularJS Data Binding
 Data binding in AngularJS is the synchronization between the model and the view.
 AngularJS applications usually have a data model. The data model is a collection of data available
and functions for the application.
 Data model
 var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = “Mubbashir";
  $scope.lastname = “Ayub";
});
 HTML View
 The HTML container where the AngularJS application is displayed, is called the view.
 The view has access to the model, and there are several ways of displaying model data in the view.
 You can use the ng-bind directive, which will bind the innerHTML of the element to the specified
model property:
 <p ng-bind="firstname"></p>
Two-way Binding

 Data binding in AngularJS is the synchronization between the model and the view.
 When data in the model changes, the view reflects the change, and when data in
the view changes, the model is updated as well. This happens immediately and
automatically, which makes sure that the model and the view is updated at all times.
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.
 <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>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName = “Mubbashir";
  $scope.lastName = “Ayub";
});
</script>
 Example: Controller.html
Explanation
 The AngularJS application is defined by  ng-app="myApp". The application runs inside
the <div>.
 The ng-controller="myCtrl" attribute is an AngularJS directive. It defines a controller.
 The myCtrl function is a JavaScript function.
 AngularJS will invoke the controller with a $scope object.
 In AngularJS, $scope is the application object (the owner of application variables and
functions).
 The controller creates two properties (variables) in the scope (firstName and lastName).
 The ng-model directives bind the input fields to the controller properties (firstName and
lastName).
Controller Methods
 The example above demonstrated a controller object with two properties: lastName and firstName.
 A controller can also have methods (variables as functions):
 <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>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
  $scope.firstName = “Mubbashir";
  $scope.lastName = “Ayub";
  $scope.fullName = function() {
    return $scope.firstName + " " + $scope.lastName;
  };
});
</script>
 Example: ControllerMethods.html
AngularJS Scope
 The scope is the binding part between the HTML (view) and the JavaScript (controller).
 The scope is an object with the available properties and methods.
 The scope is available for both the view and the controller.
 How to Use the Scope?
 When you make a controller in AngularJS, you pass the $scope object as an argument:
 app.controller('myCtrl', function($scope)
  $scope.carname = "Volvo";
 When adding properties to the $scope object in the controller, the view (HTML) gets
access to these properties.
 In the view, you do not use the prefix $scope, you just refer to a property name, like
{{carname}}.
Understanding the Scope

 If we consider an AngularJS application to consist of:

 View, which is the HTML.
 Model, which is the data available for the current view.
 Controller, which is the JavaScript function that makes/changes/removes/controls the data.
 Then the scope is the Model.
 The scope is a JavaScript object with properties and methods, which are available for both
the view and the controller.
 If you make changes in the view, the model and the controller will be updated:
 Example:ChangeView.html
Angular vs React vs Vue

 Angular vs React vs Vue: Which Framework to Choose in 2022 (codeinwp.com)

 Quiz#02. JQUERY and Angular JS, next week 11 May 2022
 Reminder: Due date for Assignment#02 and Semester project
proposal is 23rd April