javascript - Angular js: an arrray from one file to another -

i new angular js.i have included 2 files , both files works fine separately - can add names array , delete or update them, idea able array 1 file , other dynamically. because when swich views arrays still stored (until refresh) how can connect 2 .js files because 2 modules in 2 separate files , 2 views make both array string names. want call function(getalldepartments) employee module , array of names of departments department module. , know cant use require or include don't need save data database best other approach here? have code:

p.s. i've tried dependency inject department factory in employee module since doesn't know factory comes useless - , can't reference script inside script...

employees.js

'use strict';  angular.module('myapp.employees', ['ngroute'])  .config(['$routeprovider', function($routeprovider) {   $routeprovider.when('/employees', {     templateurl: 'employees/employees.html',     controller: 'view2ctrl',     controlleras:"view2"   }); }])   .factory('employeeservice', function() {     var employees = [];  return {     deleteemployee: function(employee) {         var index  = employees.indexof(employee);         if(index > -1)         {             employees.splice(index,1);         }     },     addemployee: function(employee) {         employees.push(employee);     },     getallemployee: function()     {         return employees;     },     getalldepartment: function()     {         console.log("fdfs");         //console.log(departmentservice.getalldepartments())         return departmentservice.getalldepartments();     },     updateemployee: function(employee,newname) {         var index  = employees.indexof(employee);         if(index > -1)         {             employees[index] = newname;              }     } }  })   .controller('view2ctrl', function(employeeservice) {     var vm = this;     vm.employees = employeeservice.getallemployee();      vm.addemployee = function(employee) {         employeeservice.addemployee(employee);     }      vm.deleteemployee = function(employee) {         employeeservice.deleteemployee(employee);     }      vm.selectemployee = function(employee) {         vm.employeeselected = true;         vm.updateemployeename = employee;     }      vm.updateemployee = function(employee) {         employeeservice.updateemployee(vm.employee,vm.updateemployeename);     }      //vm.check = function()     //{     //  employeeservice.getalldepartment();     //}  });      'use strict';  angular.module('myapp.departments', ['ngroute'])   .config(['$routeprovider', function($routeprovider) {   $routeprovider.when('/departments', {     templateurl: 'departments/departments.html',     controller: 'view1ctrl',     controlleras: "view1"    });  }])   .factory('departmentservice', function() {     var departments = [];  return {     deletedepartment: function(department) {         var index  = departments.indexof(department);         if(index > -1)         {             departments.splice(index,1);         }     },     adddepartment: function(department) {         departments.push(department);     },     getalldepartments: function()     {         return departments;     },     updatedepartment: function(department,newname) {         var index  = departments.indexof(department);         if(index > -1)         {             departments[index] = newname;            }     } }  })  .controller('view1ctrl', function(departmentservice) {     var vm = this;     vm.departments = departmentservice.getalldepartments();      vm.adddepartment = function(department) {         departmentservice.adddepartment(department);     }      vm.deletedepartment = function(department) {         departmentservice.deletedepartment(department);     }      vm.selectdepartment = function(department) {         vm.departmentselected = true;         vm.updatedepartmentname = department;     }      vm.updatedepartment = function(department) {         departmentservice.updatedepartment(vm.department,vm.updatedepartmentname);     } }); 

and employees.html

<table <p></p> <h1>update</h1> <input ng-model="view2.updateemployeename" ng-disabled="!view2.employeeselected"> <button ng-click="view2.updateemployee(view2.employeeselected)">updateemployee</button> <hr>       <table border="1px" style="width: 200px" ng-repeat="employee in view2.employees">       <tr>       <td>{{employee}}</td>       <td><button ng-click="view2.deleteemployee(employee)">delete</button></td>       <td><button ng-click="view2.selectemployee(employee)">update</button></td>       <td><button ng-click="view2.check()">check</button></td>           </tr>        </table> <hr> <h1>create</h1>  <input ng-model="view2.employee"> <button ng-click="view2.addemployee(view2.employee)">addemployee</button> 

factories can used in different modules, don't need declared dependencies of modules (like you're doing 'ngroute').

you're injecting department service in department controller.

.controller('view1ctrl', function(departmentservice) { 

you can same in employee controller, , copy on line need department controller:

.controller('view2ctrl', function(employeeservice, departmentservice) {      var vm = this;     vm.employees = employeeservice.getallemployee();     vm.departments = departmentservice.getalldepartments();      ... 

except won't work out of box if they're in different files. in case, need use $inject provider. suggest refactor .controller declaration make second argument named function:

.controller('view2ctrl', view2ctrl)  function view2ctrl(employeeservice, departmentservice) {     ... } 

and can add line (outside view2ctrl function, anywhere in same file):

view2ctrl.$inject = ['employeeservice', 'departmentservice'] 

the order in list services inject need same both in function arguments , in array of strings you're defining view2ctrl.$inject as.

the other way of doing wrap controller function in square brackets, (effectively declaring array), , listing services strings in array:

.controller('view2ctrl', ['employeeservice', 'departmentservice', function(employeeservice, departmentservice) {     var vm = this;     vm.employees = employeeservice.getallemployee();     vm.departments = departmentservice.getalldepartments();      ...  }]);  

in both cases, you'll able use every method of both factories inside controller.