AngularJS Modules whith example and demo

AngularJS Modules whith example and demo

AngularJS Modules whith example and demo,AngularJS supports modular approach. Modules are used to seperate logics say services, controllers, application etc. In this we create seperate file like model view and controller and keep the code clean. We define modules in seperate js files and name them as per the module.js file. In this example we’re going to create two modules.

Application Module – to initialize an application with controller(s).

Controller Module – to define the controller.

Application Module

Create file mainApp.js

Here we’ve declared an application mainApp module using angular.module function. We are passed an empty array to it. This array generally dependent modules.

	var mainApp = angular.module("mainApp", []);

Controller Module

Create file userController.js

Here we’ve declared a controller userController module using mainApp.controller function.

	mainApp.controller("userController", function($scope) {
   $scope.user = {
      name: "Pramod",
      email: "Kumawat.pramodkumar6@gmail.com",
      fees:500,
      subjects:[
         {name:'Physics',marks:70},
         {name:'Chemistry',marks:80},
         {name:'Math',marks:65},
         {name:'English',marks:75},
         {name:'Hindi',marks:67}
      ],
      mydetial: function() {
         var userObject;
         userObject = $scope.user;
         return userObject.name + " " + userObject.email;
      }
   };
});

Test example of Angular Seperate file

Create file index.html

Here we’ve declared a controller userController module using mainApp.controller function.

        <html>
        <head>
        <title>Angular JS Modules</title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script src="mainApp.js"></script>
        <script src="userController.js"></script>
        <style>
               table, th , td {
                  border: 1px solid #FF3300;
                  border-collapse: collapse;
                  padding: 5px;
                }
                table tr:nth-child(odd) {
                  background-color: #FF66FF;
                }
                table tr:nth-child(even) {
                  background-color: #FFCCFF;
                }
        </style>
        </head>
        <body>
        <h2>AngularJS Sample Application</h2>
        <div ng-app="mainApp" ng-controller="userController">
        <table border="0">
        <tr><td>Enter  name:</td><td><input type="text" ng-model="user.name"></td></tr>
        <tr><td>Enter  email: </td><td><input type="text" ng-model="user.email"></td></tr>
        <tr><td>Name: </td><td>{{user.mydetial()}}</td></tr>
        <tr><td>Subject:</td><td>
        <table>
           <tr>
              <th>Name</th>
              <th>Marks</th>
           </tr>
           <tr ng-repeat="subject in user.subjects">
              <td>{{ subject.name }}</td>
              <td>{{ subject.marks }}</td>
           </tr>
        </table>
        </td></tr>
        </table>
        </div>
        </body>
        </html>

Create file name app.js and insert the following code

var mainApp = angular.module("mainApp", []);

usertController.js

       mainApp.controller("usertController", function($scope) {
        $scope.usert = {
          name: "Pramod",
          email: "kumawat.pramodkumar6@gmail.com",
          fees:2500,
          subjects:[
             {name:'Physics',marks:85},
             {name:'Chemistry',marks:80},
             {name:'Math',marks:87},
             {name:'English',marks:98},
             {name:'Hindi',marks:66}
          ],
          mydetial: function() {
             var usertObject;
             usertObject = $scope.usert;
             return usertObject.firstName + " " + usertObject.lastName;
          }
        };
        });

angularjstabledisplay

Share Button

About admin

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Author: pramod kumar kumawat Mob: 9269727062
Free WordPress Themes - Download High-quality Templates