Home » Angular JS

Overview of AngularJS

AngularJS is a JavaScript framework used to build web applications. In this tutorial, we will learn about AngularJS, its basics, and a bit of what it looks like using an angular code in your webpage.
Submitted by Shivang Yadav, on July 17, 2019

AngularJS Overview

AngularJS (Angular 4) is a JavaScript framework. It is a JavaScript framework that is used for building single-page web applications. IT can be easily embedded to web pages using the <script> Tag. Angular 4 used HTML, JavaScript, and TypeScript to make wonderful web applications.

AngularJS uses ng-directives to extend JavaScript in HTML WebPages. There are 3 basic directives that are most commonly used in angular 4. They are,

ng-app

This directive defines that the control is given to angular. The tag (div, p, header, etc) that has ng-app attribute has the control of the angular code.

ng-model

This directive binds value of html control tags to the application data. It initialises variables with the html input fields.

ng-bind

This directive binds the application data with the html view elements. The value of the variables are fed in the html tags that define the view.

Sample Angular 4 Code

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Angular Js</title>
    <script src="scripts/angular.min.js"></script>
</head>

<body>
    <div>
        <h2>Without Using Angular Js : Local </h2>
        <hr /> {{12+5}}
        <br>
        <br>
        <hr>
        <hr>
    </div>
    <div ng-app>
        <h2>Using Angular Js : Local </h2>
        <hr /> {{12+5}}
        <div>
</body>

</html>

Output

AngularJS example 1

Code explanation:

This is a simple Html code that you are used to and have been practicing for long so no need to explain that. So we have to similar div that have the same code one heading (H2) and one simple element {{12+5}} that is treated as plain text in html. Whereas in the second div we have define the ng-app directive that defines that the code is angular code which treats {{12+5}} as an expression which is evaluated as 17 in the angular code.







Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.





Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.