title: Example of injecting services in Angular 1.5 components
body: <p>Can anyone give an example on using services with Angular 1.5 components?</p>
  
  <p>I'm trying to inject a service in an Angular 1.5 component, but it doesn't work.</p>
  
  <p>I have a login component like so: </p>
  
  <pre><code>class Login {
      constructor($scope, $reactive, $state, myService) {
          console.log(myService.somevariable); //doesn't work
      }
  }
  
  // create a module
  export default angular.module(name, [
      angularMeteor
  ]).component(name, {
      templateUrl: 'imports/ui/components/${name}/${name}.html',
      controllerAs: name,
      controller: Login
  });
  </code></pre>
  
  <p>My service looks like this:</p>
  
  <pre><code>angular.module(name).service("myService", function () {
      this.somevariable = 'somevalue';
  });
  </code></pre>
  
  <p>I just cant seem to be able to get the service injected in the component.What am I doing wrong?</p>
  
  <p><strong>SOLUTION:</strong></p>
  
  <p>With <a href="https://stackoverflow.com/users/3103677/sebenalern">sebenalern</a>'s help, I got it working.</p>
  
  <p>I needed a service to validate an email address using a regular expression. I did it like this:</p>
  
  <pre><code>import angular from 'angular';
  import angularMeteor from 'angular-meteor';
  class Validator { 
      validateEmail(email) {
          var re = /^(([^&lt;&gt;()\[\]\\.,;:\s@"]+(\.[^&lt;&gt;()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
          return re.test(email);
      }
  }
  
  const name = 'validator';
  
  // create a module
  export default angular.module(name, [
      angularMeteor
  ])
  
  .service("Validator", Validator);
  </code></pre>
  
  <p>I then injected the service like so:</p>
  
  <pre><code>import {name as Validator} from '../../../api/services/validator'
  
  class Login {
      constructor($scope, $reactive, $state, Validator) {
          'ngInject';
          this.$state = $state;
  
          $reactive(this).attach($scope);
          this.Validator = Validator;
      }
  
      login() {
          if(this.Validator.validateEmail(this.credentials.email)) {
              // email is valid. 
          }
      }    
  }
  
  const name = 'login';
  
  export default angular.module(name, [
      angularMeteor,
      Validator
  ]).component(name, {
      templateUrl: `imports/ui/components/${name}/${name}.html`,
      controllerAs: name,
      controller:Login
  })
  </code></pre>
  
  <p>Hope this helps :)</p>