In the previous blog post we got AngularJS to work with a module and a controller. However, we put everything in the global scope. The problem with that is that there are many JavaScript libraries that might be using the same variables as we are, or if we are working with other developers, there might be some unforeseen conflicts. The way we can mitigate this problem is to wrap our modules and controllers in an anonymous function. Think of an anonymous function as a wrapper or a container to hold our modules and controllers. Another term developers like to refer to anonymous function is an IIFE. Whatever it's called it's always good practice to avoid putting things in the global environment if it can be avoided.
Here are the steps to take the modules and controllers out of the global environment:
1. First let's wrap the module in an anonymous function. The source code for the app.js file should look like the following
The code above wraps the application in anonymous function and assigned to the variable call "app"
2. Now open the "bankController.js" in the "controllers" folder and wrap the "bankController" in anonymous function, the source code for the file should look like the following
3. Open up the "index.html" file and make sure the source code looks like the following.
4.If you open the file you will see that application still works
In this tutorial we've taken some steps to future proof our application so that we are not working in the global environment
Posts In The AngularJS SPA Application Series:
1. First let's wrap the module in an anonymous function. The source code for the app.js file should look like the following
(function(){
'use strict';
var app = angular.module('bankApp',['bankController']);
})();
The code above wraps the application in anonymous function and assigned to the variable call "app"
2. Now open the "bankController.js" in the "controllers" folder and wrap the "bankController" in anonymous function, the source code for the file should look like the following
(function(){
'use strict';
angular.module('bankController',[])
.controller('bankController',["$scope",function($scope){
$scope.bankAppName="My Bank Application";
}]);
})();
3. Open up the "index.html" file and make sure the source code looks like the following.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bank Application</title>
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body ng-app="bankApp" ng-controller="bankController">
{{bankAppName}}
<script type="text/javascript" src="js/lib/angular/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/bankController.js"></script>
</body>
</html>
4.If you open the file you will see that application still works
Posts In The AngularJS SPA Application Series:
- Setting Up Angular-Seed
- AngularJS - Setting up ACME Bank
- Refactor Code to Not Use Global Variables (Shopping List App)
- Installing MongoDB
- Create a MongoDB Configuration FIle
- Install mongoDB as a Windows Service
- Installing Express generator
- Installing ExpressJS Application Server
- Creating The SPA Project Folder Structure
- Setup Express To Serve Static Files
- Setup The Shopping Application For Heroku And Testing It Locally
- Deploy Shopping List Application To Heroku
- Install RoboMongo GUI for MongoDB
Js has really been helpful 🙌🙌 thanks a lot
ReplyDeleteThank you! I tried to be as clear as possible. Sometimes books can be dry :)
DeleteWe share this js coding is really helpful to me. And it's this site content is good very useful to me.
ReplyDeleteThank you!
DeleteОтличная led лента находится только у Ekodio, даже не сомневайтесь в этом, я лично проверял.
ReplyDeleteThanks for this informative blog please keep posting more often as it might help someone who is looking to gain more knowledge.
ReplyDeleteSelenium Training in chennai | Selenium Training in anna nagar | Selenium Training in omr | Selenium Training in porur | Selenium Training in tambaram | Selenium Training in velachery
Wow it is really wonderful and awesome thus it is very much useful for me to understand many concepts and helped me a lot.
ReplyDeleteData Science certification Online Training in bangalore
Data Science certification courses in bangalore
Data Science certification classes in bangalore
Data Science certification Online Training institute in bangalore
Data Science certification course syllabus
best Data Science certification Online Training
Data Science certification Online Training centers
Very interesting blog Thank you for sharing such a nice and interesting blog and really very helpful article.
ReplyDeleteSAP PP Training in Bangalore
Best SAP PP Training Institutes in Bangalore
Thank you for excellent article.You made an article that is interesting.
ReplyDeleteSAP HCM Online Training
SAP HCM Classes Online
SAP HCM Training Online
Online SAP HCM Course
SAP HCM Course Online
I have recently visited your blog profile. I am totally impressed by your blogging skills and knowledge.
ReplyDeleteSAP HANA Online Training
SAP HANA Classes Online
SAP HANA Training Online
Online SAP HANA Course
SAP HANA Course Online
Hi Frankcompressors here, Blog is very interesting, thanks for sharing.
ReplyDeleteNice Blog.
ReplyDeleteI recently visited your blog profile. I was really impressed with blogging skills and knowledge.
ReplyDeleteVist our website too, We are Screw Dilator suppliers.
Really amazing experience to visit your blog, thanks a lot for sharing with us. Visit Ogen Infosystem for creative website designing and ppc services at best price in Delhi.
ReplyDeleteWeb Designing Company
Water bodies are the main source of transportation for international freight forwarding. Due to this, sea freight company in Delhi,
ReplyDeletevisit
Freight Forwarder in Vietnam
Shipping Company In India
visit here
ReplyDeleteiso certification in delhi
iso certification in noida
iso certification in gurgaon
iso certification in faridabad