Scribd
Upload
87 views

CH 1 AngularJS

AngularJS is a JavaScript framework commonly used for building single-page applications. It extends HTML with new attributes called directives that add dynamic behavior to web pages and bind data to page elements. AngularJS uses MVC architecture, with controllers managing application logic and data binding, views presenting data to the user, and models managing the underlying data. The document then provides examples of basic AngularJS concepts like directives, controllers, and data binding to introduce its core functionality.

Uploaded by

DrSanjay Bhakkad
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
87 views

CH 1 AngularJS

AngularJS is a JavaScript framework commonly used for building single-page applications. It extends HTML with new attributes called directives that add dynamic behavior to web pages and bind data to page elements. AngularJS uses MVC architecture, with controllers managing application logic and data binding, views presenting data to the user, and models managing the underlying data. The document then provides examples of basic AngularJS concepts like directives, controllers, and data binding to introduce its core functionality.

Uploaded by

DrSanjay Bhakkad
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 41

AngularJS

DR. SANJAY P. BHAKKAD


ASSOCIATE PROFESSOR,
IMSCD&R AHMEDNAGAR
Introduction

 What is AngularJS?
 AngularJS is a modern JavaScript framework from
Google, commonly used to work with Single Page
Applications (SPAs).
 AngularJS is primarily based on declarative HTML
attributes that you can add to your HTML page with
a <script> tag.
 The library is called Angular because HTML uses
angular-shaped brackets.
 AngularJS is open sourced.
Introduction

 AngularJS is client-sided, so all these things are


happening in browsers and you get the elegance of
standalone application.
 AngularJS extends HTML attributes with Directives
and binds data to HTML with Expressions.
 It’s a framework for Dynamic web applications.
 AngularJS makes use of declarative programming for
building UI.
 It’s a MVC structured framework.
Introduction

 Why to use AngularJS?


 Allows you to reuse components
 An easy way of two-way bindings
 You can directly call the code-behind code in your
html
 You can validate forms and input fields before
submitting it without writing a single line of code
 Allows you to control complete DOM structure
show/hide, changing everything with AngularJS
properties
Model-View-Controller (MVC)

 MVC structure provides the clear


separation between
 managing the data (model),
 the application logic (controller) &
 presenting the data to the user (view)
 The view gets data from the model to display to the user.
 When user interacts with the application by clicking or
typing, the controller responds by changing data in the
model.
 Finally, the model notifies the view that a change has
occurred so that it can update what it displays.
Model-View-Controller (MVC)

 VIEW
 View in an application is a part which is rendered in
a browser through which user can interact or see
whatever data has been requested.
 In an AngularJS application view is the DOM,
composed of directives, filters and data-bindings.
Model-View-Controller (MVC)

 CONTROLLER
 Controller holds all of our application logic. In
AngularJS the controllers are JavaScript classes.
 The Controller controls and prepares the data into
the form so that it can be rendered at the View.
 The controller is responsible for communicating the
server code to fetch the data from a server using Ajax
requests and send the data to back-end server from
Views.
Model-View-Controller (MVC)

 MODEL
 Model is the bridge standing between Controllers and
Views.
 In AngularJS, the model data is stored in Object
properties.
 There can be a controller which we can bind to two or
more views. In reality the Controller is blank about views
and has no information about the views
 Similarly View is independent of logic implemented or
data present in the Controller.
 And, model acts as the communication tunnel between
the Views and Controller.
Hello, World : Example

 Hello.html

<!DOCTYPE html>
<html ng-app>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.mi
n.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller = 'HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
Hello, World : Example

 controller.js
function HelloController ($scope) {
$scope.greeting = {text: 'Hello'};
}
 Note that the part of DOM is updated separately,
rather than updating the whole page.
 Here, we have merged template HTML strings with
data, and inserted the result where we want it in the
DOM.
Data binding

 If you want to insert fresher data into the UI, or


change the data based on user input, you need to do
some non-trivial work.
 But, we could have hall this work done for us without
writing (additional) code.
 For this, we could just declare which part of the UI
map to which JavaScript properties and have them
sync automatically.
 Called data-binding.
 MVC will do this for you.
Hello, World – Live : Example

 In this example, we add a text input that can


change the value of greeting.text as the user types.
 HelloDynamic.html

<div ng-controller = 'HelloController'>


<input ng-model='greeting.text'>
<p>{{greeting.text}}, World</p>
</div>
 Now, we have UI that will dynamically update.
 Angular would automatically update both the input and the text
in the curly braces by getting the values from the controller.
AngularJS : First Program

<!DOCTYPE html>
<html ng-app>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
</script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller = 'HelloController'>
<input ng-model='greeting.text'>
<p>Hello {{greeting.text}}!</p> See: Controller.js
</div>
function HelloController ($scope) {
</body>
</html> $scope.greeting = {text: 'Students'};
See: HelloDynamic.html }
Basic building blocks of AngularJS

 Invoking AngularJS
 Any application must do two things to start Angular:
1. Load the angular.js library
2. Tell Angular which part of the DOM it should manage with
the ng-app directive
 Loading the Script:
 You can load the script from Google’s content
delivery network (CDN), like so:
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
</script>
Directives

 In earlier programs we have seen several new attributes


which are not part of the HTML.
 For example
 double-curly notation, for data binding,
 ng-controller, for specifying which controller oversees which part of
the view
 ng-model, which binds an input to part of the model
 We call these HTML extension as directives.
 Angular comes with many directives that help you define
the view for your app.
 They can declaratively set up how your application works
or be used to create reusable components.
 You can also create your own directives.
Directives

 ng-app
 The ng-app directive defines an AngularJS
application.
 We use this directive to auto-bootstrap an AngularJS
application.
 The ng-app directive designates the root element of
the application and is typically placed near the root
element of the page - e.g. on the <body> or <html>
tags.
 If ng-app directive is found, that will become the
root scope of the app.
ng-app : Syntax

 <element ng-app="modulename">
...
content inside the ng-app root element can contain
AngularJS code
...
</element>
 <body ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</body>
 modulename is Optional, Specifies the name of a module
to load with the application.
 See ng-appEx.html
Directives

 ng-controller
 In AngularJs, Controllers are the JavaScript classes
used to manage the areas of the page.
 AngularJS applications are controlled by controllers.
 The ng-controller directive defines the application
controller.
ng-controller : Example

<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 appModule = angular.module('myApp', []);
appModule.controller('myCtrl', function($scope) {
$scope.firstName = “Sanjay";
$scope.lastName = “Bhakkad";
});
</script> See NameEx.html
Code Explained

 Controller is a part of the module, which provides a


namespace for related parts of your application.
 We then called the Angular object to create a module named
myApp
 Then we pass our controller’s function to call the module’s
controller 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 andlastName).
 The ng-model directives bind the input fields to the
controller properties (firstName and lastName).
ng-controller : Example

 Controller Methods
 The example above demonstrated a controller object
with two properties: firstName and lastName.
 A controller can also have methods (variables as
functions):
Controller with method : Example

<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 = “Sanjay";
$scope.lastName = “Bhakkad";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>
See FullNameEx.html
ng-controller : Example

 Controllers In External Files


 In larger applications, it is common to store controllers in
external files.
 Just copy the code between the <script> tags into an
external file named personController.js:
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = “Sanjay";
$scope.lastName = “Bhakkad";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
}); See personController.js
Controller in External File : Example

 Now, refer that script file into your html page.

<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 src="personController.js"></script>
See NameExternalCtrlEx.html
Directives

 ng-init
 The ng-init directive initializes application data.

 Example:

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

<p>Input something in the input box:</p>


<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>
See ng-initEx.html
Directives

 Data Bindings
 Data binding in AngularJS is the synchronization between the
model and the view.
 Data Model
 AngularJS applications usually have a data model. The data
model is a collection of data available for the application.
 var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = “Sanjay";
});
 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, as:
Directives

 HTML View
1. 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>
2. You can also use double braces {{ }} to display content from
the model:
 <p>{{firstname}}</p>
3. Or you can use the ng-model directive on HTML controls to
bind the model to the view.
 <input ng-model="firstname">

See dataBindingsEx.html
Directives

 Data Binding
 Data binding shown via {{ }} interpolation notation lets us insert
the value of a variable into part of the page and keep it in sync.
 The {{ }} sets up a one-way relationship that says “insert a value
here.”
 If you want to keep changes in sync with your model use ng-
model.
 The {{ firstName }} expression, in the example above, is an
AngularJS data binding expression.
 Data binding in AngularJS binds AngularJS expressions with
AngularJS data.
 E.g.: {{ firstName }} is bound with ng-model="firstName".
Directives

 ng-model
 The ng-model directive binds the value of HTML
controls (input, select, textarea) to application data.
 The ng-model directive can also:
 Provide type validation for application data (number, email,
required).
 Provide status for application data (invalid, error).
 Provide CSS classes for HTML elements.
 Bind HTML elements to HTML forms.
ng-model : Example (Static)

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


Name: <input ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Sanjay Bhakkad";
});
</script>
See ng-modelEx.html
ng-model : Example (Two Way Bindings)

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


Name: <input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = “Sanjay Bhakkad";
});
</script>
See ng-modelEx2.html
Two Way Bindings

 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.
Directives

 ng-repeat
 The ng-repeat directive repeats a set of HTML, a
given number of times.
 The set of HTML will be repeated once per item in a
collection.
 The collection must be an array or an object.
 Note: Each instance of the repetition is given its
own scope, which consist of the current item.
ng-repeat : Example 1

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

<div ng-app="" ng-init="names=['Ajay','Sanjay','Vijay']">


<p>Looping with ng-repeat:</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
</body>
</html> See RepeatEx1.html
ng-repeat : Example 2 – Using Controller

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

<h1 ng-repeat="x in records">{{x}}</h1>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = ["Sanjay Bhakkad",
"Mahesh Potdar",
"U. H. Nagarkar",
"Hari Shankar Rai"]
});
</script>
</body>
See ngRepeatEx.html
ng-repeat : Example 3
Using External Controller

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

<script src="recordsCtrl.js"></script>

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

<div ng-repeat="x in records"> var app = angular.module("myApp", []);


<span>{{x.name}}</span>, app.controller("myCtrl", function($scope) {
<span>{{x.age}}</span> $scope.records = [
{name:'Sanjay Bhakkad', age:40},
</div>
{name:'Mahesh Potdar', age:45},
{name:'U. H. Nagarkar', age:50},
</body>
{name:'Hari Shankar Rai', age:35}]
</html> });
See RepeatEx2.html File: recordsCtrl.js
ng-repeat : Example 4 - Table Creation
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="recordsCtrl.js"></script>

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

<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th> var app = angular.module("myApp", []);
</tr> app.controller("myCtrl", function($scope) {
<tr ng-repeat="x in records">
$scope.records = [
<td>{{ $index + 1 }}</td>
<td>{{ x.name}}</td>
{name:'Sanjay Bhakkad', age:40},
<td>{{ x.age}}</td> {name:'Mahesh Potdar', age:45},
</tr> {name:'U. H. Nagarkar', age:50},
</table> {name:'Hari Shankar Rai', age:35}]
</body>
});
</html>
See RepeatEx3.html File: recordsCtrl.js
AngularJS : Filters

 Filters can be added in AngularJS to format data.


 Filters allow you to declare how to transform data for
display to the user within an interpolation in your template.
 The syntax for using filters is:
{{ expression | filterName : parameter1 : … parameterN }}
 expression is any Angular expression,
 filterName is the name of the filter you want to use, and
 the parameters to the filters are separated by colons.
 The parameters themselves can be any valid Angular expression.
 Filters can also be chained with additional pipe symbols in the
bindings. For example
{{ 12.9 | currency | number:0 }} displays $13
AngularJS : Filters

 AngularJS provides filters to transform data:


 currency : Format a number to a currency format.

 date : Format a date to a specified format.

 filter : Select a subset of items from an array.

 json : Format an object to a JSON string.

 limitTo : Limits an array/string, into a specified number of


elements/characters.
 lowercase : Format a string to lower case.

 number : Format a number to a string.

 orderBy : Orders an array by an expression.

 uppercase : Format a string to upper case.


AngularJS Filter Examples

 Create an external controller file : employeeRecords.js

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


app.controller("myCtrl", function($scope) {
$scope.records = [
{name:'Sanjay Bhakkad', joinDt:'2016-06-01', salary:40000, dept:'sales'},
{name:'Ganesh Avhad', joinDt:'1980-12-21', salary:30000, dept:'purchase'},
{name:'Jaydeep Girase', joinDt:'2015-12-15', salary:20000, dept:'sales'},
{name:'Aayushi Sharma', joinDt:'2000-11-25', salary:35000, dept:'purchase'},
{name:'Manish Joshi', joinDt:'2014-05-10', salary:22000, dept:'hr'},
{name:'Komal Dongre', joinDt:'2005-11-30', salary:15000, dept:'hr'}
]
});
AngularJS Filter Examples

 LowerCaseUpperCaseFilters.html
 DateFilter.html
 CurrencyFilter.html
 LimitToFilter.html
 OrderByFilter.html
 Filter_Filter.html
 NumberFilter.html
 JsonFilter.html

You might also like