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.


X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now