title: Angularjs: Error: [ng:areq] Argument 'HomeController' is not a function, got undefined
body: <p>This is my demo using angularjs, for creating a service file, and adding service to a controller.</p>
  
  <p>I have two problems with my demo:</p>
  
  <ul>
  <li>One is when I put <code>&lt;script src="HomeController.js"&gt;</code> before <code>&lt;script src="MyService.js"&gt;</code> I get this error,</li>
  </ul>
  
  <blockquote>
    <p>Error: [ng:areq] Argument 'HomeController' is not a function, got undefined</p>
  </blockquote>
  
  <ul>
  <li>The other is when I put <code>&lt;script src="MyService.js"&gt;</code> before <code>&lt;script src="HomeController.js"&gt;</code> I get the following error,</li>
  </ul>
  
  <blockquote>
    <p>Error: [$injector:unpr] Unknown provider: MyServiceProvider &lt;- MyService</p>
  </blockquote>
  
  <p>My source:</p>
  
  <p>File <code>Index.html</code>:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html &gt;
      &lt;head lang="en"&gt;…&lt;/head&gt;
      &lt;body ng-app="myApp"&gt;
          …
          &lt;div ng-controller="HomeController"&gt;
              &lt;div ng-repeat="item in hello"&gt;{{item.id + item.name}}&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;script src="Scripts/angular.js"&gt;&lt;/script&gt;
          &lt;script src="Scripts/angular-route.js"&gt;&lt;/script&gt;
  
          &lt;!-- App libs --&gt;
          &lt;script src="app/app.js"&gt;&lt;/script&gt;    
          &lt;script src="app/services/MyService.js"&gt;&lt;/script&gt;
          &lt;script src="app/controllers/HomeController.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>File <code>HomeController.js</code>:</p>
  
  <pre><code>(function(angular){
      'use strict';
  
      var myApp = angular.module('myApp',[]);
  
      myApp.controller('HomeController',function($scope,MyService){    
          $scope.hello=[];
          $scope.hello = MyService.getHello();
      });
  })(window.angular);
  </code></pre>
  
  <p>File <code>MyService.js</code>:</p>
  
  <pre><code>(function(angular){
      'use strict';
  
      var myApp = angular.module('myApp',[]);
  
      myApp.service('MyService', function () {
          var hello =[  {id:1,name:'cuong'},
              {id:2,name:'nguyen'}];
          this.getHello = function(){
              return hello;
          };
      });
  
  })(window.angular);
  </code></pre>