4.2.6.1. From Controller to Library

Angular Controllers with JS functions can grow substantially. How do we manage growing sources?
Of course, we create libraries.
Here is an extended example of the controller that we had in a previous section. This time we extended the controller with a state and a method - function to provide a full address. We increased the Controller code but minimized our HTML part.









Update text fields.



Street: 


City: 


State: 


Zip: 


Address: {{fullAddress()}}

Let us move all controller code into an external file addressController.js. We will create this file in the js folder of the project and will copy the code between the script tags into the file
addressController.js


var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

    $scope.street= "123 Quiet Ave";

    $scope.city= "Green";

    $scope.state= "AB";

    $scope.zip= "54321";

 $scope.fullAddress = function() {

        return $scope.street + ", " + 

         $scope.city + ", " + $scope.state + 

         " " + $scope.zip;

    }

});

Was it clear so far?

See how small the HTML file is:











Update text fields.



Street: 


City: 


State: 


Zip: 


Address: {{fullAddress()}}

Assignments:
1. In the project 4.2.6.Angular add the file addressController.js to the js folder.
2. Create the file 4.2.6.angular5.html in the html folder and copy the HTML portion to this file.
3. Create another example in the HTML folder with another controller as a library file in the js folder.
4. Create 2 QnA related to the subject and send to dean@ituniversity.us
5. Learn the library for integrating movie clips with Angular:
https://github.com/moviemasher/angular-moviemasher
The library uses moviemasher.js to produce a mix of video clips, for example, with robots
Focus on Angular functions, increase the number of samples that you can create for QnAs and have handy for future interviews.
To make it really work, server side coding is needed. Existing samples of server side are available (so far) in PHP or RB (ruby).

<!DOCTYPE html> <br/><html> <br/><script src= "../js/angular.min.js"></script> <br/><body> <br/><p>Update text fields.</p> <br/><div ng-app="myApp" ng-controller="myCtrl"> <br/>Street: <input type="text" ng-model="street"><br> <br/>City: <input type="text" ng-model="city"><br> <br/>State: <input type="text" ng-model="state"><br> <br/>Zip: <input type="text" ng-model="zip"><br> <br/>Address: {{fullAddress()}} <br/></div> <br/><script> <br/>var app = angular.module('myApp', []); <br/>app.controller('myCtrl', function($scope) { <br/> $scope.street= "123 Quiet Ave"; <br/> $scope.city= "Green"; <br/> $scope.state= "AB"; <br/> $scope.zip= "54321"; <br/> $scope.fullAddress = function() { <br/> return $scope.street + ", " + <br/> $scope.city + ", " + $scope.state + <br/> " " + $scope.zip; <br/> } <br/>}); <br/></script> <br/></body></html> <br/>

<br/>var app = angular.module('myApp', []); <br/>app.controller('myCtrl', function($scope) { <br/> $scope.street= "123 Quiet Ave"; <br/> $scope.city= "Green"; <br/> $scope.state= "AB"; <br/> $scope.zip= "54321"; <br/> $scope.fullAddress = function() { <br/> return $scope.street + ", " + <br/> $scope.city + ", " + $scope.state + <br/> " " + $scope.zip; <br/> } <br/>});

<!DOCTYPE html> <br/><html> <br/><script src= "../js/angular.min.js"></script> <br/><script src= "../js/addressController.js"></script> <br/><body> <br/><p>Update text fields.</p> <br/><div ng-app="myApp" ng-controller="myCtrl"> <br/>Street: <input type="text" ng-model="street"><br> <br/>City: <input type="text" ng-model="city"><br> <br/>State: <input type="text" ng-model="state"><br> <br/>Zip: <input type="text" ng-model="zip"><br> <br/>Address: {{fullAddress()}} <br/></div> <br/></body></html> <br/>

Have a suggestion? - shoot an email
Looking for something special? - Talk to me
Read: IT of the future: AI and Semantic Cloud Architecture | Fixing Education
Do you want to move from theory to practice and become a magician? Learn and work with us at Internet Technology University (ITU) - JavaSchool.com.

Technology that we offer and How this works: English | Spanish | Russian | French

Internet Technology University | JavaSchool.com | Copyrights © Since 1997 | All Rights Reserved
Patents: US10956676, US7032006, US7774751, US7966093, US8051026, US8863234
Including conversational semantic decision support systems (CSDS) and bringing us closer to The message from 2040
Privacy Policy