AngularJs -First Example for beginners
Published August 13, 2022Let's examine the components of an AngularJS application before developing a basic example. The essential elements of an AngularJS application are as follows:
-
ng-app: The directive defines and links an HTML page with an AngularJS application.
-
ng-model: The directive ties AngularJS data to HTML input controls.
-
ng-bind: The directive connects the HTML tag and the application's data.
-
ng-controller: the directive uses to create an MVC application using AngularJS.
How to create AngularJS Application
The AngularJS technology is used below steps to create basic examples of the web application.
Step1: Create the HTML page.
The following basic html page uses to create web applications
|
<!DOCTYPE html> <html> <head> //load file here. </head> <body> //use angularjs directive and html tag. </body> </html>
|
Step2: Load AngularJS file with script tag
The following AngularJS online link uses in the head section
|
<head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> </head>
|
Step3: Use ng-app directive to define AngularJS framework.
The "ng-app" directive defines angularjs framework in the html page
|
<body> <div ng-app=""> //write UI and logical code here! </div> </body>
|
Step4: use required directives in the UI with the Html tag.
The basic directives use for the HTML tag.
-
Use the ng-model directive in the HTML input tag.
The "ng-model" directive to connect user input data with display data
| <p> UserName : <input type = "text" ng-model = "username" placeholder = "Enter Username here"></p> |
-
Use ng-bind directive to bind data with html tag.
The "ng-bind" directive bind the html input data with the AngularJS application data.
|
<h4> Welcome <span ng-bind = "username"></span> !</h4> |
The controller directive uses for the MVC application.
-
Use ng-controller directive in the html tag with script tag.
The "ng-controller" directive connects script function with the html tag
|
<div ng-controller = "functionName"> </div> |
Example #1
The basic AngularJS example and its output shows below.
File name: index.html
|
<!DOCTYPE html> <html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> </head> <body> <div ng-app=""> <b> Basic Example of AngularJS. </b> <p> Tutorial : <input type = "text" ng-model = "userdata" placeholder = "Enter Username here"></p> <h4> Welcome to <span ng-bind = "userdata"></span> !</h4> </div> </body> </html>
|
Output:
 |
Example #2
The AngularJS - MVC application example and its output shows below.
File name: index.html
|
<!DOCTYPE html> <html lang="en"> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> </head> <body ng-app = "firstapp"> <div ng-controller = "UserController" > <h2> Welcome To {{first.title}} !</h2> </div> <script> angular.module("firstapp", []) .controller("UserController", function($scope) { $scope.first = {}; $scope.first.title = "AngularJS Tutorial"; } ); </script> </body> </html>
|
Summary
The AngularJS creates applications using directives, functions, and HTML tags. We can design UI and logical programs on a single page. The AngularJS creates MVC and basic applications easily
|
Article Contributed By :
|
|
|
|
|
170 Views |
|