The previous
blog post we setup the AngularJS folder structure and pulled in the necessary dependencies using bower. In this post we are going to add AngularJS to our application. We will app an AngularJS application and controller to our simple banking application.
Here are the steps to setup AngularJS in our application.
1. Create an app.js file in the app/js folder
The source code for the app.js file should look like the following
'use strict';
angular.module('bankApp',['bankController']);
The code above defines the application name 'bankApp', and the modules that the application is dependent on ['bankController'] in this case the application is dependent on the bankController module. In the next step we will create the controller for the bankApp application
2. Add a folder in the "js" folder and call it "controllers" then create a file call "bankController.js" in the "controllers" folder and source code for the file should look like the following
'use strict';
angular.module('shoppingController',[])
.controller('shoppingController',["$scope",function($scope){
$scope.shoppingListName="My Shopping List";
}]);
The code above registers a new module called shoppingList.controller with no dependencies. The controller itself passes in the angular object $scope. The $scope object in angular act as a conduit between the view and the controller. Meaning anything that is defined in the $scope object is accessible in the view (.html) page. In the example above we defined a variable in the $scope object call "shoppingListName". Since it's defined in the controller we can now access the data from our view (index.html) page. Now we are ready to make some changes to our "index.html" page to make this an angularJS SPA application.
3. The source code file "index.html" should look 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>
<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>
The code above provides the plumbing for our SPA application. It's written using the HTML5 template format so that it is HTML5 compliant. The app.css contains all the styles associated with the application, the "angular.js" file contains the angularJS library framework. The "app.js" file contains the JavaScript codes that will be used for this application. The "controller.js" file contains the controller for the application.
AngularJS uses the MVC framework, Model-View-Controller. Basically they all work together to make the application work. In a simple explanation the model is the data, the view is what the users see, and the controller is the flow of the application. The next step is the define our application in the app.js file.
4. 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="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>
All we want to see that our $scope.bankAppName AngularJS variable can be accessed in our index.html file.
5. Now open the index.html file in a browser to see that AngularJS is set up correctly
In this tutorial we've taken care of the plumbing in an AngularJS application. We gave created a module, associate a controller, define a variable in the controller's scope and then display the scope variable in a view. We basically have all of the AngularJS app components working.
