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