Пример инъекционных услуг в компонентах Angular 1.5

Может ли кто-нибудь привести пример использования услуг с компонентами Angular 1.5?Пример инъекционных услуг в компонентах Angular 1.5

Я пытаюсь внедрить сервис в компонент с угловым 1.5, но он не работает.

У меня Войти компонент следующим образом:

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 
});

Моя служба выглядит следующим образом:

angular.module(name).service("myService", function() { 
    this.somevariable = 'somevalue'; 
});

Я просто не могу показаться, чтобы иметь возможность получить услугу впрыскивается в component.What утра Я делаю неправильно?

РЕШЕНИЕ:

С помощью sebenalern «s, я получил это работает.

Мне нужна была служба для проверки адреса электронной почты с использованием регулярного выражения. Я сделал это так:

import angular from 'angular'; 
import angularMeteor from 'angular-meteor'; 
class Validator { 
    validateEmail(email) { 
     var re = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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);

Я впрыскивается обслуживание как так:

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 
})

Надеется, что это помогает :)

источник

2016-04-16 lostsoul29

Что вы имеете в виду компонентом? – sebenalern

Я обновил вопрос. Я использую компонент Angular 1.5, и я понятия не имею, как вводить в него Угловое обслуживание. Поскольку Angular 1.5 является новым, я не мог найти никакой документации. – lostsoul29

Вы получили сообщение об ошибке? – sebenalern

Так одна проблемы, которую я вижу это, вы должны использовать ключевое слово это внутри конструктора

this.$scope = $scope;

Другое дело, что это p robably легче держаться подальше от классов и функций использования:

class Login { 
constructor($scope, $reactive, $state, myService) { 
    console.log(myService.somevariable); //doesn't work 
    } 
}

становится:

angular 
.module('name') 
.service('myService', myService); 

function myService() { 
    this.somevariable = 'somevalue'; 
}

мне кажется, намного ровнее. Кроме того, еще одна вещь, о классах ES6 является

ES6 Classes are not hoisted, which will break your code if you rely on hoisting

Для получения дополнительной информации см link.

Теперь вот рабочий код, который я придумал:

Сначала мы объявляем модуль:

angular.module('name', []);

Далее мы регистрируем наш сервис, а затем создаем сервисное определение:

angular 
    .module('name') 
    .service('myService', myService); 

function myService() { 
    this.somevariable = 'somevalue'; 
}

Далее мы выполняем ту же процедуру для нашего контроллера, а также вводим в нее $ scope и наш сервис.

angular 
    .module('name') 
    .controller('Login', Login); 

function Login($scope, myService) { 
    $scope.someVar = myService.somevariable; 
}

Последним Я зарегистрировал наш компонент:

angular 
    .module('name') 
    .component('my-html', { 
    templateUrl: 'my-html.html', 
    controller: Login 
});

И это его на яваскрипте стороны.

Вот мой HTML-код:

<!DOCTYPE html> 
<html lang="en-us" ng-app='name'> 
    <head> 
     <script src="//code.angularjs.org/1.5.0-rc.1/angular.js"></script> 
     <script src="controller.js"></script> 
    </head> 
    <body > 
     <h ng-controller="Login">{{ someVar }}</h> 
    </body> 
</html>

Я надеюсь, что это помогает !!

источник

2016-04-16 00:33:13 sebenalern

Не работает в Angular 1.5. Я обновил вопрос. Я получаю сообщение об ошибке «Ошибка: myService не определен». – lostsoul29

С вашей помощью я смог заставить мой код работать, но несколько иначе. Я отправил свое решение и принял ваш ответ. Благодаря! – lostsoul29

Вот как я это делаю и хорошо работает. Он отлично работает с классами. Я предполагаю, что вы используете TypeScript.

class AdminHomeService { 
    consignment: IConsignment; 

    get:() => IConsignment; 

    constructor() { 
     this.consignment = new Consignment(); 
     this.consignment.id = 10; 
     this.consignment.customer = "Customer3"; 
     this.consignment.customerList = [{ id: 1, name: "Customer1" }, { id: 2, name: "Customer2" }, { id: 3, name: "Customer3" }]; 
     this.consignment.shipperList = [{ key: "1", value: "Shipper1" }, { key: "2", value: "Shipper2" }, { key: "3", value: "Shipper3" }]; 
     this.consignment.consigneeList = [{ key: "1", value: "Consignee1" }, { key: "2", value: "Consignee2" }, { key: "3", value: "Consignee3" }]; 
     this.consignment.billingList = [{ key: "1", value: "Billing1" }, { key: "2", value: "Billing2" }, { key: "3", value: "Billing3" }]; 
     this.consignment.carrierList = [{ key: "1", value: "Carrier1" }, { key: "2", value: "Carrier2" }, { key: "3", value: "Carrier3" }]; 

     this.get =() => { 
      return this.consignment; 
     } 
    } 
} 

class AdminHomeComponentController { 
    consignment: IConsignment; 
    selectedCustomer: any; 

    static $inject = ["adminHomeService"]; 

    constructor(private adminHomeService: AdminHomeService) { 
     this.consignment = new Consignment(); 
     this.consignment = this.adminHomeService.get(); 

     this.selectedCustomer = {}; 
     this.selectedCustomer.selected = { "name": this.consignment.customer }; 
    } 

    customerAddClick(): void { 

    } 
} 

class AdminHomeComponent implements ng.IComponentOptions { 
    bindings: any; 
    controller: any; 
    templateUrl: string; 
    $routeConfig: angular.RouteDefinition[]; 

    constructor() { 
     this.bindings = { 
      textBinding: "@", 
      dataBinding: "<", 
      functionBinding: "&" 
     }; 
     this.controller = AdminHomeComponentController; 
     this.templateUrl = "templates/admin.home.html"; 

     //this.$routeConfig = [ 
     // { path: "/admin", name: "AdminHome", component: "adminHome", useAsDefault: true } 
     //]; 
    } 
} 

angular.module("adminHome", []) 
    .component("adminHome", new AdminHomeComponent()) 
    .service("adminHomeService", AdminHomeService);

Это сообщение помогло мне: http://almerosteyn.com/2016/02/angular15-component-typescript

источник

2016-04-19 05:22:34 vincentw56

Пример инъекционных услуг в компонентах Angular 1.5

ответ

Смежные вопросы