English 中文(简体)
AngularJS Tutorial

AngularJS Applications

AngularJS Useful Resources

Selected Reading

AngularJS - First Application
  • 时间：2024-12-22

AngularJS - First Apppcation

Previous Page Next Page  

Before creating actual Hello World ! apppcation using AngularJS, let us see the parts of a AngularJS apppcation. An AngularJS apppcation consists of following three important parts −

    ng-app − This directive defines and pnks an AngularJS apppcation to HTML.

    ng-model − This directive binds the values of AngularJS apppcation data to HTML input controls.

    ng-bind − This directive binds the AngularJS Apppcation data to HTML tags.

Creating AngularJS Apppcation

Step 1: Load framework

Being a pure JavaScript framework, it can be added using <Script> tag.

<script 
   src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.3.14/angular.min.js">
</script>

Step 2: Define AngularJS apppcation using ng-app directive

<span ng-app = "">
   ...
</span>

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

<p>Enter your Name: <input type = "text" ng-model = "name"></p>

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

<p>Hello <span ng-bind = "name"></span>!</p>

Executing AngularJS Apppcation

Use the above-mentioned three steps in an HTML page.

testAngularJS.htm

<html>
   <head>
      <title>AngularJS First Apppcation</title>
   </head>
   
   <body>
      <h1>Sample Apppcation</h1>
      
      <span ng-app = "">
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
      </span>
      
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

Output

Open the file testAngularJS.htm in a web browser. Enter your name and see the result.