HomeProgramAngularJS

Create the first AngularJS application

To start, we start with creating the actual XinChao application by using AngularJS, we will show you the specific parts of an AngularJS application.

Before starting the XinChao application with AngularJS, let's look at the actual parts of what an AngularJS application is. An AngularJS application consists of the following three important parts:

  1. ng-app : This Directive defines and binds an AngularJS application to an HTML page.
  2. ng-model : This directive binds the values ​​of AngularJS application data to HTML input controls.
  3. ng-bind : This directive binds AngularJS application data to HTML tags.

Steps to create an AngularJS application

Step 1: Download the framework

As a pure JavaScript framework, the AngularJS library can be added by using tags

or with the link to the AngularJS library you downloaded in the Instructions for installing AngularJS:

  src = "D:angular.min.js" >

Step 2 : Define the AngularJS application using the ng-app directive.

 ng-app = "" > .

Step 3 : Define a model name using ng-model directive.

 Member:  type = "text" ng-model = "ten" >

Step 4 : Mount the value of the model defined above using the ng-bind directive.

 Please  ng-bind = "ten" > !

Steps to run an AngularJS application

Use the steps above to create an HTML page.

testAngularJS.jsp

 Use AngularJS first

 

 Cavalier XinChao in AngularJS 
  ng-app = "" > 
 Member:  type = "text" ng-model = "ten" > 
 Please  ng-bind = "ten" > ! 
  src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" >

Result

Open the XinChao.html page on your browser, enter your name and see the results.

Create the first AngularJS application Picture 1Create the first AngularJS application Picture 1

The way AngularJS integrates with HTML

ng-app directive declaration to start an AngularJS application.

ng-model directive then create the model variable named "ten" used in the HTML website and in the div tag with the ng-app directive.

ng-bind then uses the model name to display in the HTML span tag whenever the user enters something into the text box.

Close tag to notify the end of an AngularJS application.

According to Tutorialspoint

Previous article: MVC structure in AngularJS

Next lesson: Directive in AngularJS

4 ★ | 1 Vote

You should read it

May be interested

AngularJS