Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Create a HelloWorld application using angularJS

    @mayuri.saini
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 321
    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:

     

     

     

     

    html AngularJS
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           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: