Post
Ask Question

Create An AngularJS Application With VS Code

This blog shows you how an AngularJS application is run in VS Code with dummy data. Also, download the angular.min js file.

  • Download and install VS Code. Now, create a new application. The application looks as shown below.



  • Add a mainApp.js file to initialize the module and the query looks as shown below.
    1. var mainApp=angular.module("mainApp",[]);  
  • Add another JS file of Controller and the query looks, as shown below.
    1. mainApp.controller("EmployeeController", function($scope) {  
    2.     $scope.employee = {  
    3.         firstnmae: "Jayant",  
    4.         lastName: "Tripathy",  
    5.         Age: 30,  
    6.         Technologies: [{  
    7.             Name: "Asp .Net",  
    8.             Exp: "5 years"  
    9.         }, {  
    10.             Name: "C#",  
    11.             Exp: "5 years"  
    12.         }, {  
    13.             Name: "Sql Server",  
    14.             Exp: "4 years"  
    15.         }, {  
    16.             Name: "Java",  
    17.             Exp: "0 years"  
    18.         }, {  
    19.             Name: "Jquery",  
    20.             Exp: "3 years"  
    21.         }],  
    22.         fullname: function() {  
    23.             var EmployeeObject;  
    24.             EmployeeObject = $scope.employee;  
    25.             return EmployeeObject.firstnmae + " " + EmployeeObject.lastName;  
    26.         }  
    27.     }  
    28. });  
  • Now, simply add a HTML file and add AngularJS cdn or you can download directly from angularjs.org site. HTML looks, as shown below.
    1. <html>  
    2.   
    3. <head>  
    4.     <script src="Script/angular.min.js"></script>  
    5.     <script src="Script/mainApp.js"></script>  
    6.     <script src="Script/EmployeeController.js"></script>  
    7.     <link href="Css/Style.css" rel="stylesheet" type="text/css" />  
    8.   
    9.     <body>  
    10.         <div ng-app="mainApp" ng-controller="EmployeeController">  
    11.             <table>  
    12.                 <tr>  
    13.                     <td>FirstName :</td>  
    14.                     <td><input type="text" ng-model="employee.firstnmae"> </td>  
    15.                 </tr>  
    16.                 <tr>  
    17.                     <td>LastName :</td>  
    18.                     <td><input type="text" ng-model="employee.lastName"> </td>  
    19.                 </tr>  
    20.                 <tr>  
    21.                     <td>Age :</td>  
    22.                     <td><input type="text" ng-model="employee.Age"> </td>  
    23.                 </tr>  
    24.                 <tr>  
    25.                     <td>Name</td>  
    26.                     <td>{{employee.fullname()| uppercase}}</td>  
    27.                 </tr>  
    28.                 </tr>  
    29.                 <tr>  
    30.                     <td>Technologies</td>  
    31.                     <td>  
    32.                         <table>  
    33.                             <tr>  
    34.                                 <th>Subject</th>  
    35.                                 <th>Experience</th>  
    36.                             </tr>  
    37.                             <tr ng-repeat="emp in employee.Technologies">  
    38.                                 <td>{{emp.Name}}</td>  
    39.                                 <td>{{emp.Exp}}</td>  
    40.                             </tr>  
    41.                         </table>  
    42.                     </td>  
    43.                 </tr>  
    44.             </table>  
    45.     </body>  
    46. </head>  
    47.   
    48. </html>  
  • To style the table, I have added Css/Style.css.
    1. table, th , td {  
    2.            border: 1px solid grey;  
    3.            border-collapse: collapse;  
    4.            padding: 5px;  
    5.         }  
    6.           
    7.         table tr:nth-child(odd) {  
    8.            background-color: #f2f2f2;  
    9.         }  
    10.           
    11.         table tr:nth-child(even) {  
    12.            background-color: #ffffff;  
    13.         }  
  • Finally, the result looks as shown below.
Next Recommended Reading AngularJS Quiz Application using MVC