In the previous blog we got Angular-Seed 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. 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 "shoppingController.js" in the "controllers" folder and wrap the "shoppingController" 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. In the command line where the root folder is type in "npm start"
5. Type int the following URL in your browser http://localhost:8000/ and you will see the following
Note: In order to see the application in your browser you must first run the "npm start" in your angular-seed folder first
In this tutorial we've taken some steps to future proof our application so that we are not working in 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
(function(){
'use strict';
var app = angular.module('shoppingList',['shoppingController']);
})();
The code above wraps the application in anonymous function and assigned to the variable call "app"
2. Now open the "shoppingController.js" in the "controllers" folder and wrap the "shoppingController" in anonymous function, the source code for the file should look like the following
(function(){
'use strict';
angular.module('shoppingController',[])
.controller('shoppingController',["$scope",function($scope){
$scope.shoppingListName="My Shopping List";
}]);
})();
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>Shopping List App</title>
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body ng-app="shoppingList" ng-controller="shoppingController">
{{shoppingListName}}
<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/shoppingController.js"></script>
</body>
</html>
4. In the command line where the root folder is type in "npm start"
5. Type int the following URL in your browser http://localhost:8000/ and you will see the following
Note: In order to see the application in your browser you must first run the "npm start" in your angular-seed folder first
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:
- Setting Up Angular-Seed
- Preparing Angular-Seed For The Shopping List Application
- 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
ReplyDeleteWe share this js coding is really helpful to me. And it's this site content is good very useful to me.
ReplyDelete