Scribd
Upload
13 views

Angular Notesday1

Uploaded by

prosenjitdas.its
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

Angular Notesday1

Uploaded by

prosenjitdas.its
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Introduction of AngularJS

AngularJS is a JavaScript open source front end framework mainly use to make
Single Page Applications (SPAs) developed by Google. A framework means “an
essential supporting structure of programming. This framework based on MVC
(Model View Controller).

All modern web browsers support AngularJS. This list includes Safari, Chrome,
Firefox, Opera, IE9 and later versions and mobile browsers, including Android,
Chrome Mobile, and IOS Safari.

It can be added to an HTML page with a <script> tag. Angular JS based on model
view controller(MVC) framework. The MVC pattern is an architectural pattern,
which is realized through a number of other design patterns.

In MVC, there are three components: the Model is the data source, View is the
rendered webpage, and the Controller handles the interaction between the two. A
major purpose of MVC is to separate out responsibilities in the JavaScript code to
keep it clean and easy to follow.

AngularJS is one of the best MVC frameworks available because it makes it very
easy to implement MVC.

Model
The model represents the underlying, logical structure of data in a software
application.
View
A view is the body of code that represents the user interface. All of the things that
the user can see and to which the user can respond on the screen, such as buttons,
dialog boxes, and so on. An application generally has multiple views, and each
view often represents some portion of your model.
Controller
In AngulaJS the controller as the intermediary for the view and the model.
AngularJS application mainly consist with module, directives, expression , scope.

1
 AngularJS extends HTML attributes with Directives
 Binds data to HTML with Expressions
End users benefit from MVC because it leads to a applications that are far less
prone to bugs and much easier to maintain.

Module : It representing components an application of AngularJS. The module


provides a namespace that enables you to reference directives, scopes, and other
components based on model name. This makes it easier to package and reuse parts
of an application. It is controller of MVC. This makes it easier to package and
reuse parts of an application.
Expression : A great feature of AngularJS is the capability to add expressions
inside the HTML template. AngularJS evaluates expressions and then dynamically
adds the result to a web page. Because expressions are linked to the scope. An
expression that utilizes values in the scope and as the model changes so does the
value of the expression.
Directive : This is a convenient way to declaratively call JavaScript functions.
AngularJS uses directives to enhance HTML with extra functionality. AngularJS
directives are HTML attributes with an ng prefix. AngularJS extends HTML
with ng-directives.

Example of directive :
 ng-app directive defines an AngularJS application.

 ng-model directive binds the value of HTML controls (input, select, text
area) to application data.
 ng-bind directive binds application data to the HTML view.
 The ng-init directive initializes AngularJS application variables
Example :
AngularJS Expressions

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

<!DOCTYPE html>
<html>
<script src="C:\Users\User\Desktop\practice\Angular Resource\lib\angular-
1.7.8\angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>

2
</body>
</html>

Output :

Note :

The ng-app directive defines in <div> so it is effective within the <div> to


</div> .
Here ng-app has no name.
{{ 5+5}} is expression, it evaluate the 10.

Example of ng-bind :
The ng-bind directive binds application data to the HTML view.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<div ng-app=" ">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>

3
Output :

Note :
AngularJS starts automatically when the web page has loaded. The ng-
app directive tells AngularJS that the <div> element is the "owner" of an
AngularJS application. The ng-model directive binds the value of the input field
to the application variable name. The ng-bind directive binds the content of the
<p> element to the application variable name.

You might also like