angularjs – 在Angular 1.5组件中注入服务的示例

发布时间：2020-12-17 17:39:34 所属栏目：安全来源：网络整理

导读：任何人都可以举例说明使用Angular 1.5组件的服务吗？我正在尝试在Angular 1.5组件中注入服务,但它不起作用. 我有一个像这样的登录组件： class Login { constructor($scope,$reactive,$state,myService) { console.log(myService.somevariable); //doesn't

任何人都可以举例说明使用Angular 1.5组件的服务吗？

我正在尝试在Angular 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';
});

我似乎无法在组件中注入服务.我做错了什么？

解：

在sebenalern的帮助下,我得到了它的工作.

我需要一项服务来使用正则表达式验证电子邮件地址.我是这样做的：

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

希望这可以帮助：)

解决方法

所以我看到的一个问题是你应该在构造函数中使用关键字this

this.$scope = $scope;

另一件事可能更容易远离类和使用函数：

class Login {
constructor($scope,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
});

这就是它在javascript方面.

这是我的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>

我希望这有帮助！！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!