Modules are used to seperate logics and keep the code clean. So we can define modules in separate js file. Here we will create two modules i.e. Controller Module and Application Module.
Controller Module: controller.js
Here we are declaring a controller userController module using myApp.controller function.
myApp.controller("userController", function($scope) { $scope.user = { first_name: "Tim", last_name: "Shawn", full_name: function() { var userObj; userObj = $scope.user; return userObj.first_name + " " + userObj.last_name; } }; });
Application Module : module.js
var myApp = angular.module("myApp", []);
Here we declare myApp module using angular.module function. We are passing an empty array to it. Generally this array contains dependent modules.
Html:
<div ng-app="myApp" ng-controller="userController"> <table border="0"> <tr><td>First name:</td><td><input type="text" ng-model="user.first_name"></td></tr> <tr><td>Last name: </td><td><input type="text" ng-model="user.last_name"></td></tr> <tr><td>Full name: </td><td>{{user.full_name()}}</td></tr> </table> </div>
<html> <head> <title>AngularJS Modules</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src="module.js"></script> <script src="controller.js"></script> </head> <body> <h2>AngularJS Modules</h2> <div ng-app="myApp" ng-controller="userController"> <table border="0"> <tr><td>First name:</td><td><input type="text" ng-model="user.first_name"></td></tr> <tr><td>Last name: </td><td><input type="text" ng-model="user.last_name"></td></tr> <tr><td>Full name: </td><td>{{user.full_name()}}</td></tr> </table> </div> </body> </html>
Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.
Hormonal balance plays a pivotal role in overall well-being, influencing various aspects of health, from…
Dog walking is an excellent way to maintain your furry friend's camaraderie and provides many…
Introduction Businesses understand the diverse requirements of mobile applications, which provide a competitive advantage. There…
The Internet of Things (IoT) has recently changed the world. It links gadgets together and…
NFTs, or Non-Fungible Tokens, are revolutionizing the digital economy. These unique digital assets, authenticated through…
It is safe to say that if you are in need of a good laptop…
View Comments
Thanks for sharing these tips! I am sure your tips really helpful!