AgularJS basics- angular directives and controllers

Angular JS
• Open source web app framework
• AngularJS version 1.0 was released in 2012.Miško
Hevery, a Google employee, started to work with
AngularJS in 2009.
• AngularJS extends HTML with new attributes and
it is perfect for Single Page Applications (SPAs),
• Easy to learn.
Workshop on Advanced JavaScript &
Frameworks

General features :
• We can create rich internet application by using
Angular JS.
• Angular js Allow us to write the client-side code
using javascript.
• AngularJs provides cross-browser compliant and it
automatically handles JavaScript code suitable for
each browser.
• Angularjs is used to build high-performance, large
scale, and easy-to-maintain web applications.
Frameworks

Core features :
1. Data-binding :
2. Scope :
3. Controller :
4. Services :
5. Filters :
6. Dependency Injection :
7. Routing :
8. Templets :
9. Directives :
10. Deep linking :
Frameworks

• Model View Controller: In Angular JS, it is very easy to
develop application in a clean MVC way. You just have to
split your application code into MVC components i.e.
Model, View and the Controller.
Frameworks

AngularJS MVC Architecture
1. Model: It is responsible for managing application data. It
responds to the requests from view and to the
instructions from controller to update itself.
2. View: It is responsible for displaying all data or only a
portion of data to the users. It also specifies the data in a
particular format triggered by the controller's decision to
present the data.
3. Controller: It is responsible to control the relation
between models and views. It responds to user input and
performs interactions on the data model objects. The
controller receives input, validates it, and then performs
business operations that modify the state of the data
model.
Frameworks

• AngularJS extends HTML attributes with Directives,
and binds data to HTML with Expressions.
• AngularJS is distributed as a JavaScript file, and can be
added to a web page with a script tag:
• <script src="https://ajax.googleapis.com/ajax/libs/ang
ularjs/1.6.9/angular.min.js"></script>
Frameworks

AngularJS Directives
• AngularJS directives are extended HTML attributes
with the prefix ng-.
• The ng-app directive initializes an AngularJS
application and it defines the root element of an
AngularJS, this directive will auto-
bootstrap (automatically initialize) the application
when a web page is loaded.
Frameworks

• The ng-init directive defines initial values for an
AngularJS application.
• The ng-model directive binds the value of HTML
controls (input, select, textarea) to application data.
– 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-bind directive binds application data to the
HTML view.
Frameworks

<html> <script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6
.9/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>
<script>var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";}); </script></body></html>
Frameworks

• 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.
• ng-repeat directive, each repetition has access to
the current repetition object:
Frameworks

AngularJS Scope
Frameworks
The scope is the binding part between the HTML
(view) and the JavaScript (controller) and it 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:

AngularJS Expressions
Frameworks
Inside double braces: {{ expression }}.
Can also be written inside a directive: ng-bind="expression".
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.
• Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}

AngularJS Modules and Controllers
• An AngularJS module defines an application.
• The module is a container for the different parts of
an application and it is a container for the
application controllers, Controllers always belong to
a module.
• The [] parameter in the module definition can be
used to define dependent modules.
Frameworks

• <div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
• Without the [] parameter, you are not creating a
new module, but retrieving an existing one.
Frameworks

Adding a Controller:
Frameworks
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = “sri";
$scope.lastName = “ranji";
});
</script>

<!DOCTYPE html><html><script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/
angular.min.js"></script>
<body> <h2>program information.</h2>
<div ng-app="myapp" ng-controller="ctrl"> <br> The
department is {{dept}} an dprogram is {{program}} </div>
<script>
var app = angular.module('myapp', []);
app.controller ('ctrl', function ($scope) {
$scope.dept = "CSE";
$scope.program = "AIML"; });
</script> </body> </html>
Frameworks

AngularJS Forms
Frameworks
• Forms in AngularJS provides data-binding and validation
of input controls.
• The ng-model directive can provide type validation for
application data (number, e-mail, required):
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Not a
valid e-mail address</span> <br><br>
You have entered:{{text}}
</form>

• Input controls are the HTML input elements:
– input elements
– select elements
– button elements
– textarea elements
• Data-Binding
Input controls provides data-binding by using the ng-
model directive.
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
Frameworks

Frameworks
Checkbox
A checkbox has the value true or false. Apply the ng-
model directive to a checkbox, and use its value in your
application.
<h2> Checkbox Buttons: </h2><br>
Select Programming languages:
<input type="checkbox" ng-model="myVar1">Python
<input type="checkbox" ng-model="myVar2">Java
<input type="checkbox" ng-model="myVar3">
HTML,CSS.Javascript
<h2 ng-show="myVar1">I have selected 1st option </h2>
<h2 ng-show="myVar2">I have selected 2nd option </h2>
<h2 ng-show="myVar3">I have selected 3rd option </h2>

Radio buttons
Bind radio buttons to your application with the ng-model directive.
Radio buttons with the same ng-model can have different values, but
only the selected one will be used.
<h2> Radio Buttons </h2><br>
Select Highest Qualification:
<input type="radio" ng-model="myVar" value="BE">B.E
<input type="radio" ng-model="myVar"
value="MTech">M.Tech
<input type="radio" ng-model="myVar" value="Phd">Phd
Frameworks

Frameworks
Selectbox
Bind select boxes to your application with the ng-model directive.
The property defined in the ng-model attribute will have the value
of the selected option in the selectbox.
<h2> Selectbox:</h2>
Select a Country:
<select ng-model="myVar" >
<option value="">
<option value="in">India
<option value="au">Australia
<option value="us">United States
</select>

ng-repeat
• <div ng-app="" ng-init="names=[‘apple’, ’Orange’,
‘grapes']">
• <p>Looping with ng-repeat:</p>
• <ul>
• <li ng-repeat="x in names">
• {{ x }}
• </li>
• </ul>
• </div>
Frameworks
Looping with ng-repeat:
•apple
•Orange
•grapes

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>Looping with objects:</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}</li>
</ul> </div>
Frameworks
Looping with objects:
•Jani, Norway
•Hege, Sweden
•Kai, Denmark

AngularJS Services
Frameworks
In AngularJS, a service is a function, or object, that
is available for, and limited to.
AngularJS has about 30 built-in services.
The $location service
Example: The $location service has methods which
return information about the location of the
current web page:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope,
$location) {
$scope.myUrl = $location.absUrl();
});

• The $timeout Service
• var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
• The $http Service
• The service makes a request to the server, and lets
your application handle the response.
Frameworks

<!DOCTYPE html><html><script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.m
in.js"></script>
<body><div ng-app="myApp" ng-controller="myCtrl">
<p>
Data : {{content}}</p>
<p>Status : {{statuscode}}</p></div>
<p>The response object has many properties. This example
demonstrate the value of the data, status, and statusText
properties.</p>
<script>var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.html") .then(function(response) { $scope.content
= response.data;
$scope.statuscode = response.status; }); });</script> </body>
</html
Frameworks

AngularJS Routing
Frameworks
• The ngRoute module helps your application to
become a Single Page Application.
• If you want to navigate to different pages in your
application, but you also want the application
to be a SPA (Single Page Application),
• The ngRoute module routes your application to
different pages without reloading the entire
application.

AngularJS Filters
• Filters can be added in AngularJS to format
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.
Frameworks

Example:
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ firstName | lowercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl',
function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
});
</script>
Frameworks

<div ng-app="myApp" ng-controller="costCtrl">
<h1>Price: {{ price | currency }}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
$scope.price = 58;
}); </script>
Frameworks
Price: $58.0

<div ng-app="myApp" ng-controller="namesCtrl">
<p>Looping with objects:</p>
<ul> <li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }} </li> </ul> </div>
<script>
angular.module('myApp', []).controller('namesCtrl',
function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
]; }); </script>
Frameworks
Looping with objects:
•Joe, Denmark
•Birgit, Denmark
•Margareth, England
•Mary, England
•Jani, Norway
•Hege, Norway
•Kai, Norway
•Carl, Sweden
•Gustav, Sweden

Example: Programs on
1. Directives Expression
2. Services
3. Routing
4. Forms
5. Filters
6. Modules, Controllers, & Scope
https://replit.com/@FakhruddinBasha/Angular#index.html
Frameworks

Frameworks

AgularJS basics- angular directives and controllers

More Related Content

Similar to AgularJS basics- angular directives and controllers (20)

Recently uploaded (20)

AgularJS basics- angular directives and controllers