Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Create a HelloWorld application using angularJS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 318
    Comment on it

    Generally any angularjs application requireds a following components:
    1. ng-app - This component is required to make a links between the AngularJS application and the HTML.
    2. ng-model - This component is required to bind the values of AngularJS application to the HTML input controls.
    3. ng-bind - This componemts is required to binds the AngularJS Application data to HTML tags.


    Follow the below steps to create a HelloWorld application using angularjs:

    1. Firstly we need to Load AngularJS framework by adding the below code:
           <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
    </script>

    2. Then define the angularJS Application by adding the below code:
                  <div ng-app = "MyApp">
                            ...
                                </div>
    3. Create  the model name using ng-model
             <h6>Enter your Name: <input type = "text" ng-model = "YourName"></h6>


    4. Bind the value of defined model using ng-bind directive.
           <p>HelloWorld<span ng-bind = "YourName"></span>!</p>

    A sample application to create a HellowWorld application using angularJS

    <html>
       <head>
          <title>HelloWorld Application</title>
       </head>
        <body>
          <h1>HelloWorld Application</h1>
           <div ng-app = "MyApp">
                     <h4>Enter Name: <input type = "text" ng-model = "YourName"></h4>
                     <p>HelloWorld<span ng-bind = "YourName"></span>!</p>
          </div>
          <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
     </body>
    </html>
    

     

    Output:

     

     

     

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: