HomeProgramAngularJSCreate the first AngularJS application

Create the first 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 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

  • Directive in AngularJSPhoto of Directive in AngularJS
    angularjs directive is used to inherit html. there are special attributes that start with the prefix-.
  • Expression in AngularJSPhoto of Expression in AngularJS
    expression is used to bind application data to html tags. expression is written in {{expression}}. expression has a similar way of operating as the ng-bind directive.
  • Controller component in AngularJSPhoto of Controller component in AngularJS
    an angularjs application works primarily based on the controller component to control the flow of data in the application.
  • HTML DOM element in AngularJSPhoto of HTML DOM element in AngularJS
    the directives below can be used to bind application data to attributes in the html dom element.
  • The Module in AngularJSPhoto of The Module in AngularJS
    angularjs supports module-oriented approach. the module is used to distinguish the logic, service and application processing ... and make the code clear.
  • Form in AngularJSPhoto of Form in AngularJS
    angularjs complements the form of filling and validation features. you can use ng-click directive to handle the event by clicking on the button and using the flags $ dirty and $ invalid to make it effective. use novalidate with the form declaration to disable the valicate feature of the form. the control section of the form uses an effective set of angularjs events.

AngularJS