任何人都可以举例说明使用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>
我希望这有帮助!!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。