AngularJS Basic First Application and examples

AngularJS Basic First Application and examples

AngularJS Basic First Application and examples, Before we start with creating actual Welcome application using AngularJS, let us see what are the actual parts of a AngularJS application. An AngularJS application three important parts

1- ng-app : This directive defines and links an AngularJS application to HTML.

2- ng-model : This directive binds and connect the values of AngularJS application data to HTML input controls.

3-ng-bind : This directive bidns and display the AngularJS Application data to HTML tags.

        <html>
        <title>AngularJS Basic First Application</title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <body>
        <h1>Simple Application</h1>
        <div ng-app="">
        <p>Enter your Name: <input type="text" ng-model="name"></p>
        <p>Welecome--<span ng-bind="name"></span>!</p>
        </div>
        
        </body>
        </html>

Steps to create AngularJS Application

Step 1: Load framework by adding angularjs libary file.

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

Step 2: Define AngularJS Application using ng-app directive and create Angular Envirment.

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

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

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

Step 4: Bind the value of above model defined using ng-bind directive and display in html.

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

angularjsfirst

Share Button

About admin

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Author: pramod kumar kumawat Mob: 9269727062
Free WordPress Themes - Download High-quality Templates