On Code Generation and More: Making my SPA application in AngularJS

Ok, now that I have some pages and a basic understanding, the possibility of a SPA (Single Page Application) seems the next challenge. A SPA consist of an entry page with somewhere in the middle a ng-view tag, just like this :


<div ng-view>

</div>

In between the two divs you will replace the content with the help of a routing mechanism. To use routing you need to include the angular-route.min.js script in your html page. To load pages into you ng-view use a way with buttons or links that will navigate to another page: My Example:

<div class="container">
<div class="row">
<table>
<tr>
<td><a id="Menubutton" href="#/Contracts"> Contracts </a></td>
<td><a id="Menubutton" href="#/Companies"> Companies </a></td>
<td><a id="Menubutton" href="#/About"> About </a></td>
</tr>
</table>
<div ng-view></div>

You will need routing set up in you app module: Here is an example (my app.js):

var ContractsApplication = angular.module('ContractsApp', ['ngRoute','ngResource','Contracts','Companies']);

ContractsApplication.config(['$routeProvider',
                  function($routeProvider,$routeParams) {
 $routeProvider.
 when('/AddNewOrder', {
  templateUrl: 'add-order.html'

 }).
 when('/Home', {
  templateUrl: 'index.html'

 }).
 
 when('/About', {
  templateUrl: 'About.html'
 }).
 when('/NewContract', {
  controller: 'ContractsFrm',
  templateUrl: 'NewContract.html'
 }).
 
 when('/NewCompany', {
  controller: 'CompaniesFormCtrl',
  templateUrl: 'NewCompany.html'
 }).
 when('/EditCompany/:Companyid', {
  controller: 'CompaniesFormCtrl',  
  templateUrl: 'EditCompany.html'
 }).

 when('/Companies', {
  controller: 'CompaniesCtrl',  
  templateUrl: 'Companies.html'
 }).
 
 when('/Contracts', {
  controller: 'ContractsCtrl',  
  templateUrl: 'Contracts.html'

 });
}]);

As you can see the:

#/Companies
matches
/Companies

in the when part of the router. You will have to pass the template that gets loaded.
The template is not a full HTML page but a html partial. You can also pass a controller to be used in the page partial that gets loaded. You do not have a controller in the page itself.

For instance my About.html looks as following:

<h2>About</h2>
Contract application Version 1.01 Date : 14-aug-2014

A small snip-it indeed !
Do not forget to add the scripts you need in the index.html.
Here is my complete index.html:

<!DOCTYPE html>
<html lang="en">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<head>
<title>Contracts</title>
</head>

<body ng-app="ContractsApp">

 <div class="container">
  <div class="row">
   <table>
    <tr>
     <td><a id="Menubutton" href="#/Contracts"> Contracts </a></td>
     <td><a id="Menubutton" href="#/Companies"> Companies </a></td>
        <td><a id="Menubutton" href="#/About"> About </a></td>
    </tr>
   </table>
   <div ng-view></div>

  </div>
 </div>
 <script src="Scripts/angular.min.js"></script>
 <script src="Scripts/angular-route.min.js"></script>
 <script src="Scripts/angular-resource.min.js"></script>
 <script src="Scripts/app.js"></script>
 <script src="Scripts/ContractCRUD.js"></script>
 <script src="Scripts/Contract_Utils.js"></script> 
 <script src="Scripts/Form.js"></script>
 <script src="Scripts/CompanyCRUD.js"></script>
 <script src="Scripts/CompanySrv.js"></script>
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

</body>
</html>

On Code Generation and More

Sunday, August 17, 2014

Making my SPA application in AngularJS

No comments:

Blog Archive