AngularJs - First Web Page

AngularJs First Web Page

First AngularJS Web Page :

Let us now look at our first angular web page.

First AngularJS Web Page

Highlights:

Design first angular web page

Including ng-app, ng-model and angular expression.

Demosteps:

The first angular web page will look like below on page load.

On entering a value in the textbox the value is updated.

Environment set up:

Create a web application named ‘Angular_Demos’ using any IDE like netbeans.

Create lib/Angular folder inside WebPages folder of the web application.

Add angular.js file to lib/Angular folder.

Design the html page 1-MyFirstAngularWebPage.html.

Run the html on a web server.

Let us now create the page FirstAngularWebPage.html.

CODE/PROGRAM/EXAMPLE

<html ng-app>  
<head>   
   <script src="lib/Angular/angular.js"></script>
</head>
<body>   
    <h2 id="heading">{{"My "+"First "+"Angular "+"Web Page"}}</h2>
    <table>    
        <tr>
                <td>
                         <label for="username">Hello:</label>      
                </td>
                <td>
                         <input type="text" name="username" ng-model="username" />
                </td>
                <td>
                         <span id="result"> Hello <b>{{ username }}</b> </span>
                </td>
      </tr>     
   </table>
</body>
</html>

#First_AngularJS_Web_Page #hello_world_in_angular #hello_world_in_angularjs #simple_program_in_angular #simple_program_in_angularjs

(New page will open, for Comment)

Not yet commented...