The previous
blog we setup the Angular-Seed boilerplate template for our SPA application. In this blog we are going to prepare the Angular-Seed template for our SPA application which is going to be a simple shopping list application. The steps below describes the steps to clean up some of the pages in the angular-seed template for our application.
1. Delete the content of the "index.html" page in the angular-seed main folder. It is located in the main folder of the angular-seed template "/angular-seed
2. 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.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/shoppingController.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.
3. Move the file the "app.js" into the "js" folder then open the file in your favorite text editor
4. The source code for the app.js file should look like the following
'use strict';
angular.module('shoppingList',['shoppingController']);
The code above defines the application name 'shoppingList', and the modules that the application is dependent on ['shoppingController'] in this case the application is dependent on the shoppingController module. In the next step we will create the controller for the shoppingList application
5. Add a folder in the "js" folder and call it "controllers" then create a file call "shoppingController.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.
6. 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>
7. In the command line where the root folder is type in "npm start"
8. 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 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 compnents working.
Posts In The AngularJS SPA Application Series:
