Angularjs Component reusable


<!DOCTYPE html>
<html >
  <head>
    <link rel="stylesheet" href="style.css">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
     <script src="app.js"></script>
     <script src="data.service.js"> </script>
     <script src="address.component.js"></script>
     <script src="customer/customer.js"></script>
     <script src="employee/employee.js"></script>
     <script src="supplier/supplier.js"></script>
  </head>

  <body ng-app="myapp">
    <div class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="http://www.advancesharp.com/blog/1223/angularjs-component-vs-directive-with-demo" class="navbar-brand">Main Article</a>
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse" id="navbar-main">
          <ul class="nav navbar-nav">            
            <li ui-sref-active="active"><a ui-sref="customer" >Customer</a></li>           
            <li ui-sref-active="active"><a ui-sref="employee">Employee</a></li>           
            <li ui-sref-active="active"><a ui-sref="supplier">Supplier</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class='container'>
      <ui-view></ui-view>
    </div>
  </body>
</html>


  var app = angular.module('myapp',['ui.router']);
  
  app.config(function($stateProvider, $urlRouterProvider){
    $stateProvider
     .state('customer',{
       url: '/',
       templateUrl: 'customer/customer.html'
     })
     .state('employee',{
       url:'/employee',
       templateUrl: 'employee/employee.html'
     })
     .state('supplier',{
       url:'/supplier',
       templateUrl: 'supplier/supplier.html'
     });
     $urlRouterProvider.otherwise('/');
  })

.form-control{
  border-radius: 0 !important;
  padding: 3px 7px !important;
  height: 30px !important;
  margin-bottom: 7px;
}

.btn{
  border-radius: 0 !important;
}

input[type="text"].ng-invalid,
input[type="password"].ng-invalid,
input[type="date"].ng-invalid,
input[type="number"].ng-invalid,
select.ng-invalid{
    border-left: 2px solid #ff0000;
}


input[type="text"].ng-valid,
input[type="password"].ng-valid,
input[type="date"].ng-valid,
input[type="number"].ng-valid,
select.ng-valid{
    border-left: 2px solid #088b0b;
}


  var app = angular.module('myapp');
  app.component('addressComponent', {
    templateUrl: 'address.component.html',
    controller: addressCtrl,
    controllerAs: 'ctrl',
    bindings:{
      address: '='
    }
  })
  
  function addressCtrl(dataService){
    var ctrl = this;
    ctrl.$onInit = function(){
     ctrl.countries = dataService.getCountry();
    }
    
    ctrl.getCountryStates = function(){
      ctrl.states = dataService.getCountryState(ctrl.address.country);
      ctrl.cities =[];
    }
    
    ctrl.getStateCities = function(){
       ctrl.cities = dataService.getStateCity(ctrl.address.state);
    }
  }



<div >
  
  <div class="row">
    <div class="col-md-6">
      <input type="text" class="form-control" ng-required="true"
             ng-model="ctrl.address.street1" 
             placeholder="Street Address 1"/>
    </div>
    <div class="col-md-6">
      <input type="text" class="form-control"
             ng-model="ctrl.address.street2"
             placeholder="Street Address 2" />
    </div>
  </div>
  
  <div class="row">
    <div class="col-md-6">
      <select ng-model="ctrl.address.country"                
          ng-options="obj.id as obj.country for obj in ctrl.countries"
          ng-change="ctrl.getCountryStates()"
          class="form-control" 
          ng-required="true"
          id="country">
        <option value="">Choose Country</option>
      </select>
    </div>
    <div class="col-md-6">
      <select ng-model="ctrl.address.state"                
          ng-options="obj.id as obj.state for obj in ctrl.states"
          ng-change="ctrl.getStateCities()"
          class="form-control" 
          ng-required="true"
          id="country">
        <option value="">Choose State</option>
      </select>
    </div>
  </div>


  <div class="row">
    <div class="col-md-6">
      <select ng-model="ctrl.address.city"                
          ng-options="obj.id as obj.city for obj in ctrl.cities"
          class="form-control" 
          ng-required="true"
          id="country">
        <option value=""> Choose City</option>
      </select>
    </div>
    <div class="col-md-6">
      <input type="text" class="form-control"  ng-required="true"
            ng-model="ctrl.address.zipcode"
            placeholder="Zip Code" />
    </div>
  </div>
  
</div>


var app = angular.module('myapp');

app.factory("dataService", ['$filter', function($filter){
  var service = {};
  
  
  service.getCountry = function(){    
    return countrylist;
  };
  
  service.getCountryState = function(countryId){
    var states = ($filter('filter')(statelist, {countryId: countryId}));
    return states;
  };
  
  
  service.getStateCity = function(stateId){    
   
    var items = ($filter('filter')(citylist, {stateId: stateId}));      
    return items;
  };
  
  var addressViewModel = {
    street1: null,
    street2: null,
    city:null,
    country: null,
    state: null,
    zipcode: null
  };
  
  service.customerViewModel = {
    firstName: null,
    lastName: null,
    address: addressViewModel,
    phone: null,
    fax:null
  }
  
  service.employeeViewModel = {
    firstName: null,
    lastName: null,
    address: addressViewModel,
    dob: null,
    joining: null
  }
  
  
  service.supplierViewModel = {
    supplier: null,
    companyName: null,
    address: addressViewModel,
    phone: null,
    fax:null
  }
  
  
  
  var countrylist = [
            { "id": 1, "country": "USA" },
            { "id": 2, "country": "Canada" },
            { "id": 3, "country": "India" },
    ];
    
    
  var statelist = [
    {"id":1, "state":"Alaska", "countryId": 1},
    {"id":2, "state":"California", "countryId": 1},
    {"id":3, "state":"New York", "countryId": 1},
    {"id":4, "state":"New Brunswick", "countryId": 2},
    {"id":5, "state":"Manitoba", "countryId": 2},
    {"id":6, "state":"Delhi", "countryId": 3},
    {"id":7, "state":"Bombay", "countryId": 3},
    {"d":8, "state":"Calcutta", "countryId": 3}
  ];
  
  
  var citylist = [
    {"id":1, "city":"Anchorage", "stateId": 1},
    {"id":2, "city":"Fairbanks", "stateId": 1},
    {"id":3, "city":"Lakes", "stateId": 1},
    {"id":4, "city":"Palmer", "stateId": 1},
    {"id":5, "city":"Adelanto", "stateId": 2},
    {"id":6, "city":"Artesia", "stateId": 2},
    {"id":7, "city":"Benicia", "stateId": 2},
    {"id":8, "city":"Clovis", "stateId": 2},
    {"id":9, "city":"Dublin", "stateId": 2},
    {"id":10, "city":"Manhattan", "stateId": 3},
    {"id":11, "city":"Bronx", "stateId": 3},
    {"id":12, "city":"Brooklyn", "stateId": 3},
    {"id":13, "city":"Queens", "stateId": 3},
    {"id":14, "city":"Staten Island", "stateId": 3},
    {"id":15, "city":"Bathurst", "stateId": 4},
    {"id":16, "city":"Campbellton", "stateId": 4},
    {"id":17, "city":"Dieppe", "stateId": 4},
    {"id":18, "city":"Edmundston", "stateId": 4},
    {"id":19, "city":"Fredericton", "stateId": 4},
    {"id":20, "city":"Miramichi", "stateId": 4},
    {"id":21, "city":"Moncton", "stateId": 4},
    {"id":22, "city":"Brandon", "stateId": 5},
    {"id":23, "city":"Dauphin", "stateId": 5},
    {"id":24, "city":"Flin Flon", "stateId": 5},
    {"id":25, "city":"Morden", "stateId": 5},
    {"id":26, "city":"Portage la Prairie", "stateId": 5},
    {"id":27, "city":"Selkirk", "stateId": 5},
    {"id":28, "city":"Steinbach", "stateId": 5},
    {"id":29, "city":"Thompson", "stateId": 5},
    {"id":30, "city":"Winkler", "stateId": 5},
    {"id":31, "city":"South Delhi", "stateId": 6},
    {"id":32, "city":"North Delhi", "stateId": 6},
    {"id":33, "city":"East Delhi", "stateId": 6},
    {"id":34, "city":"West Delhi", "stateId": 6},
    {"id":35, "city":"Old Delhi", "stateId": 6},
    {"id":36, "city":"New Delhi", "stateId": 6},
    {"id":37, "city":"Yamuna Paar", "stateId": 6},
    {"id":38, "city":"Chembur", "stateId": 7},
    {"id":39, "city":"Borivali West", "stateId": 7},
    {"id":40, "city":"Ghatkopar West", "stateId": 7},
    {"id":41, "city":"Juhu", "stateId": 7},
    {"id":42, "city":"Mira Road", "stateId": 7},
    {"id":43, "city":"Powai", "stateId": 7},
    {"id":44, "city":"Virar West", "stateId": 7},
    {"id":45, "city":"Rajarhat", "stateId": 8},
    {"id":46, "city":"Park Street", "stateId": 8},
    {"id":47, "city":"Golpark", "stateId": 8},
    {"id":48, "city":"Chandan Nagar", "stateId": 8}
];


  return service;
  
}])

<div  ng-controller='customerCtrl as vm'>
  <fieldset>
    <legend>Customer </legend>
    <form name="vm.frmCustomer" novalidate>
         <div class="row">
           <div class="col-md-6">
              <input type="text" class="form-control"  ng-required="true" 
                   ng-model="vm.model.firstName" 
                   placeholder="First Name"/>
           </div>
           
           <div class="col-md-6">
              <input type="text" class="form-control" ng-required="true" 
                   ng-model="vm.model.lastName" 
                   placeholder="Last Name"/>
           </div>
         </div>
         <address-component address="vm.model.address"></address-component>
         
         <div class="row">
           <div class="col-md-6">
              <input type="text" class="form-control"  ng-required="true" 
                   ng-model="vm.model.phone" 
                   placeholder="Customer Phone #"/>
           </div>
           
           <div class="col-md-6">
              <input type="text" class="form-control" 
                   ng-model="vm.model.fax" 
                   placeholder="Customer Fax #"/>
           </div>
         </div>
         
         <div class="row">
           <div class="col-md-12">
             <button type="submit" ng-click="vm.save()" class="btn btn-primary" ng-disabled="vm.frmCustomer.$invalid">Save</button>
             <button type="button" ng-click="vm.clear()" class="btn btn-warning">Clear</button>
           </div>
         </div>
         <pre>{{vm.model | json}}</pre>
    </form>
   </fieldset>
</div>


var app = angular.module('myapp');

app.controller('customerCtrl', function(dataService){
    var vm = this;
    vm.model = angular.copy(dataService.customerViewModel);
    
    vm.save = function(){
      //code to save the data
    }
    
    vm.clear = function(){
      alert('clear');
      vm.model = angular.copy(dataService.customerViewModel);
    }
    
})

var app = angular.module("myapp");

app.controller("employeeCtrl", function(dataService){
    var vm = this;
    vm.model= angular.copy(dataService.employeeViewModel);
    vm.save = function(){
      // code to save employee
    }
    vm.clear = function(){
      vm.model= angular.copy(dataService.employeeViewModel);
    }
    
})

<div  ng-controller='employeeCtrl as vm'>
  
  <fieldset>
    <legend>Employee </legend>
 
    <form name="vm.frmEmployee" novalidate>
         <div class="row">
           <div class="col-md-6">
              <input type="text" class="form-control"  ng-required="true" 
                   ng-model="vm.model.firstName" 
                   placeholder="First Name"/>
           </div>
           
           <div class="col-md-6">
              <input type="text" class="form-control" ng-required="true" 
                   ng-model="vm.model.lastName" 
                   placeholder="Last Name"/>
           </div>
         </div>
         <address-component address="vm.model.address"></address-component>
         
         <div class="row">
           <div class="col-md-6">
              <input type="text" class="form-control"  ng-required="true" 
                   ng-model="vm.model.dob" 
                   placeholder="Date Of Birth"/>
           </div>
           
           <div class="col-md-6">
              <input type="text" class="form-control" ng-required="true" 
                   ng-model="vm.model.joining" 
                   placeholder="Joining Date"/>
           </div>
         </div>
         
         <div class="row">
           <div class="col-md-12">
             <button type="submit" class="btn btn-primary" ng-disabled="vm.frmEmployee.$invalid">Save</button>
             <button type="submit" class="btn btn-warning">Cancel</button>
           </div>
         </div>
         <pre>{{vm.model | json}}</pre>
    </form>
   </fieldset>
</div>

<div  ng-controller='supplierCtrl as vm'>
  <fieldset>
    <legend>SUPPLIER</legend>
    <form name="vm.frmCustomer" novalidate>
         <div class="row">
           <div class="col-md-6">
              <input type="text" class="form-control"  ng-required="true" 
                   ng-model="vm.model.supplier" 
                   placeholder="Supplier Name"/>
           </div>
           
           <div class="col-md-6">
              <input type="text" class="form-control" ng-required="true" 
                   ng-model="vm.model.companyName" 
                   placeholder="company Name"/>
           </div>
         </div>
         <address-component address="vm.model.address"></address-component>
         
         <div class="row">
           <div class="col-md-6">
              <input type="text" class="form-control"  ng-required="true" 
                   ng-model="vm.model.phone" 
                   placeholder="Supplier Phone #"/>
           </div>
           
           <div class="col-md-6">
              <input type="text" class="form-control" 
                   ng-model="vm.model.fax" 
                   placeholder="Supplier Fax #"/>
           </div>
         </div>
         
         <div class="row">
           <div class="col-md-12">
             <button type="submit" ng-click="vm.save()" class="btn btn-primary" ng-disabled="vm.frmCustomer.$invalid">Save</button>
             <button type="button" ng-click="vm.clear()" class="btn btn-warning">Clear</button>
           </div>
         </div>
         <pre>{{vm.model | json}}</pre>
    </form>
   </fieldset>
</div>

var app = angular.module("myapp");

app.controller("supplierCtrl", function(dataService){
    var vm = this;
    vm.model= angular.copy(dataService.supplierViewModel);
    vm.save = function(){
      // code to save employee
    }
    vm.clear = function(){
      vm.model= angular.copy(dataService.supplierViewModel);
    }
})