Scribd
Upload
4 views

AngularJS_unit II

AngularJS is a JavaScript framework that enhances HTML with directives and binds data using expressions. Key directives include ng-app for initializing applications, ng-model for data binding, and ng-bind for displaying data. AngularJS expressions are written in double braces and can be used to dynamically display data in the HTML view.

Uploaded by

remarkable683
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views

AngularJS_unit II

AngularJS is a JavaScript framework that enhances HTML with directives and binds data using expressions. Key directives include ng-app for initializing applications, ng-model for data binding, and ng-bind for displaying data. AngularJS expressions are written in double braces and can be used to dynamically display data in the HTML view.

Uploaded by

remarkable683
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 19

ANGULAR JS

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 is a JavaScript Framework
• AngularJS is a JavaScript framework written in JavaScript.

• 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/angularjs/1.6.9/angular.mi
n.js"></script>
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.


Example
<!DOCTYPE html>
Example explained:
<html>
<script AngularJS starts automatically when the web
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" page has loaded.
></script>
<body> The ng-app directive tells AngularJS that the
<div> element is the "owner" of an
<div ng-app=""> AngularJS application.
<p>Input something in the input box:</p>
The ng-model directive binds the value of the
<p>Name: <input type="text" ng-model="name"></p> input field to the application variable name.
<p ng-bind="name"></p>
The ng-bind directive binds the content of the
</div>
<p> element to the application variable name.
</body>
</html>
• ng-app: Initializes an AngularJS application.
• ng-model: Binds the value of HTML controls (e.g., input, select, textarea)
to application data.
• ng-bind: Replaces the content of an HTML element with the value of an
expression.
• ng-repeat: Repeats an HTML element for each item in a collection.
• ng-controller: Attaches a controller to the view.
• ng-init: Initializes data for the application.
• ng-style: Dynamically sets CSS styles.
• ng-show/ng-hide: Shows or hides elements based on an expression.
• ng-class: Adds or removes CSS classes dynamically.
AngularJS 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 }}


<!DOCTYPE html>
<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>
AngularJS 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.
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"
></script>
<body>
<div ng-app="" ng-init="firstName='John'">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
</body>
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, you will not use ng-init. You will use a controller or module
instead.

• You will learn more about controllers and modules later.


The ng-model Directive

• 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, dirty, touched, error).
• Provide CSS classes for HTML elements.
• Bind HTML elements to HTML forms.
AngularJS Directives

• As you have already seen, AngularJS directives are HTML attributes


with an ng prefix.

• The ng-init directive initializes AngularJS application variables.


AngularJS Directives

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
<body>
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
</body>
</html>
<span>
<!DOCTYPE html>
<html>
<body>
<h1>The span element</h1>
<p>My mother has <span
style="color:blue;font-weight:bold">blue</span> eyes and my father has
<span style="color:darkolivegreen;font-weight:bold">dark green</span>
eyes.</p>
</body>
</html>
AngularJS Expressions
• AngularJS expressions are written inside double braces:
{{ expression }}.

• AngularJS will "output" data exactly where the expression is written:

• AngularJS expressions bind AngularJS data to HTML the same way as


the ng-bind directive.
<!DOCTYPE html>
<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>
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.

You might also like