First AngularJS Application

admin/ Maggio 15, 2016/ AngularJS, Blog Tecnico

Before we start with creating actual HelloWorld application using AngularJS, let us see what are the actual parts of a AngularJS application. An AngularJS application consists of following three important parts −

  • ng-app − This directive defines and links an AngularJS application to HTML.
  • ng-model − This directive binds the values of AngularJS application data to HTML input controls.
  • ng-bind − This directive binds the AngularJS Application data to HTML tags.

Steps to create AngularJS Application

Step 1 − Load framework

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

<script src = "">

Step 2 − Define AngularJS Application using ng-app directive

<div ng-app = "">

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>

Steps to run AngularJS Application

Use above mentioned three steps in an HTML page.


      <title>AngularJS First Application</title>
      <h1>Sample Application</h1>
      <div ng-app = "">
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
      <script src = ""></script>


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

Leave a Comment

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

* Questa casella GDPR è richiesta



You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>