dileeph · June 9, 2017 18:19
diff --git a/full-app-ng-view.htm b/full-app-ng-view.htm
 ===== index.html================

 <html>
    <head>
        <script src="angular-1.4.8.js"></script>
        <script src="angular-route-1.4.8.js"></script>
        <script src="app1-main.js"></script>
        <script src="app1-claim.js"></script>
    </head>
    <body>
        <div ng-app="app1">
           <ul>
                <li><a href="#/">Home</a> </li>
                <li><a href="#viewClaim">View Claims</a></li> 
                <li><a href="#createClaim">Create Claim</a></li> 
            </ul> 
            <div ng-view></div>
        </div>
    </body>
 </html>

 ============app1-home.htm ========================

 <div>
    <h1>Welcome to Claims App.</h1>
 </div>


 ==========app1-view-claim.htm =========================

 <div ng-controller="viewClaimController">
 <h2> Your claims</h2>
 <table>
    <tr ng-repeat="claim in claims track by $index">
        <td>{{claim.description}}</td><td>{{claim.date}}</td>
    </tr>
 </table>
    
    
 </div>

 =============app1-create-claim.htm ============

 <div ng-controller="createClaimController">
    <form name="form" class="css-form" > Date:
        <input type="date" ng-model="claim.date" name="claimdate" required/> <br/>
        <div ng-show="form.$submitted || form.claimdate.$touched">
            <div ng-show="form.claimdate.$error.required"> Enter date of incident</div>
            <div ng-show="form.claimdate.$error.date"> Enter valid date</div>
        </div><br/>
        Description:
        <input type="text" ng-model="claim.description" name="claimdescription" required/> <br/>
        <div ng-show="form.$submitted || form.claimdescription.$touched">
            <div ng-show="form.claimdescription.$error.required"> Enter description of incident</div>
            
        </div>   
        <input type="button" ng-click="reset(form)" value="Reset" />
        <input type="submit" ng-click="update(claim)" value="Save" />
    </form>
    <pre>claim = {{claim | json}}</pre>
    <pre>master = {{master | json}}</pre>
 </div>

 <style type="text/css">
  .css-form input.ng-invalid.ng-touched {
    background-color: #FA787E;
  }

  .css-form input.ng-valid.ng-touched {
    background-color: #78FA89;
  }
 </style>


 ======== app1-main.js=========================

 var app1 = angular.module("app1", ["ngRoute", "claimModule"]);

 app1.config(function($routeProvider){
   $routeProvider
       .when("/", {templateUrl: "app1-home.htm"})
       .when("/viewClaim", {templateUrl: "app1-view-claim.htm"})
       .when("/createClaim", {templateUrl: "app1-create-claim.htm"});
    
    
 });

 ===== app1-claim.js ===================
 var claimModule = angular.module("claimModule",[]);

 claimModule.controller("createClaimController", function($scope, claimFactory, claimService){
    $scope.master = {};
    
    $scope.update = function(claim) {
        $scope.master = angular.copy(claim);
        claimFactory.update($scope.master);
    };
    
    $scope.reset = function(form) {
        
        $scope.claim = angular.copy($scope.master);
    }
    
    $scope.reset();
 });

 claimModule.controller("viewClaimController", function($scope, claimFactory, claimService){
    $scope.claims = claimFactory.list();
 });

 claimModule.factory("claimFactory", function(){
    

        var claimList = [];
    
        var thisService = {};
        
        thisService.update = function(claim){

            claimList.push(claim);
        } 
        
        thisService.list = function(){
            return claimList;
        }
        
        return thisService;

 });

 claimModule.service("claimService", function(){    

        var claimList = [];
        
        this.update = function(claim){

            claimList.push(claim);
        } 
        
        this.list = function(){
            return claimList;
        }

 });
	===== index.html================

	<html>
	<head>
	<script src="angular-1.4.8.js"></script>
	<script src="angular-route-1.4.8.js"></script>
	<script src="app1-main.js"></script>
	<script src="app1-claim.js"></script>
	</head>
	<body>
	<div ng-app="app1">
	<ul>
	<li><a href="#/">Home</a> </li>
	<li><a href="#viewClaim">View Claims</a></li>
	<li><a href="#createClaim">Create Claim</a></li>
	</ul>
	<div ng-view></div>
	</div>
	</body>
	</html>

	============app1-home.htm ========================

	<div>
	<h1>Welcome to Claims App.</h1>
	</div>


	==========app1-view-claim.htm =========================

	<div ng-controller="viewClaimController">
	<h2> Your claims</h2>
	<table>
	<tr ng-repeat="claim in claims track by $index">
	<td>{{claim.description}}</td><td>{{claim.date}}</td>
	</tr>
	</table>


	</div>

	=============app1-create-claim.htm ============

	<div ng-controller="createClaimController">
	<form name="form" class="css-form" > Date:
	<input type="date" ng-model="claim.date" name="claimdate" required/> <br/>
	<div ng-show="form.$submitted \|\| form.claimdate.$touched">
	<div ng-show="form.claimdate.$error.required"> Enter date of incident</div>
	<div ng-show="form.claimdate.$error.date"> Enter valid date</div>
	</div><br/>
	Description:
	<input type="text" ng-model="claim.description" name="claimdescription" required/> <br/>
	<div ng-show="form.$submitted \|\| form.claimdescription.$touched">
	<div ng-show="form.claimdescription.$error.required"> Enter description of incident</div>

	</div>
	<input type="button" ng-click="reset(form)" value="Reset" />
	<input type="submit" ng-click="update(claim)" value="Save" />
	</form>
	<pre>claim = {{claim \| json}}</pre>
	<pre>master = {{master \| json}}</pre>
	</div>

	<style type="text/css">
	.css-form input.ng-invalid.ng-touched {
	background-color: #FA787E;
	}

	.css-form input.ng-valid.ng-touched {
	background-color: #78FA89;
	}
	</style>


	======== app1-main.js=========================

	var app1 = angular.module("app1", ["ngRoute", "claimModule"]);

	app1.config(function($routeProvider){
	$routeProvider
	.when("/", {templateUrl: "app1-home.htm"})
	.when("/viewClaim", {templateUrl: "app1-view-claim.htm"})
	.when("/createClaim", {templateUrl: "app1-create-claim.htm"});


	});

	===== app1-claim.js ===================
	var claimModule = angular.module("claimModule",[]);

	claimModule.controller("createClaimController", function($scope, claimFactory, claimService){
	$scope.master = {};

	$scope.update = function(claim) {
	$scope.master = angular.copy(claim);
	claimFactory.update($scope.master);
	};

	$scope.reset = function(form) {

	$scope.claim = angular.copy($scope.master);
	}

	$scope.reset();
	});

	claimModule.controller("viewClaimController", function($scope, claimFactory, claimService){
	$scope.claims = claimFactory.list();
	});

	claimModule.factory("claimFactory", function(){


	var claimList = [];

	var thisService = {};

	thisService.update = function(claim){

	claimList.push(claim);
	}

	thisService.list = function(){
	return claimList;
	}

	return thisService;

	});

	claimModule.service("claimService", function(){

	var claimList = [];

	this.update = function(claim){

	claimList.push(claim);
	}

	this.list = function(){
	return claimList;
	}

	});