标签: angular-services

我正在使用AngularJS Seed,我希望看到一个Web Worker的工作实现.

我想让一个简单的Web Worker工作,以便理解它,但我遇到了一个功能问题.

我在services.js中有Web Worker代码,如下所示:

'use strict';

/* Services */
var app = angular.module('myApp.services', []).

app.factory("HelloWorldService",['$q',function($q){

    var worker = new Worker('js/doWork.js');
    var defer;
    worker.addEventListener('message', function(e) {
      console.log('Worker said: ', e.data);
      defer.resolve(e.data);
    }, false);

    return {
        doWork : function(myData){
            defer = $q.defer();
            worker.postMessage(myData); // Send data to our worker. 
            return defer.promise;
        }
    };

}]);

在js文件夹中,我有一个文件doWork.js,其内容是:

self.addEventListener('message', function(e) {
  self.postMessage(e.data);
}, false);

我的controllers.js文件是空的,看起来像这样:

'use strict';

/* Controllers */
var app …

在我的项目中,我必须使用动态工厂名称在角度js中创建动态工厂,如下所示

  function createDynamicFactory(modId) {
     return myModule.factory(modId + '-existingService', function (existingService) {
        return existingService(modId);
    }); 
}

当我调用此函数时,我想获得具有动态名称的新工厂.不幸的是,这不起作用.我怎么能实现这个目标？以及如何动态注入我的控制器或指令？

我有一个基类,我想在服务中扩展,以帮助将数据输入到角度范围.我在网上寻找解决方案,但没有找到我喜欢的解决方案.我有一个基类,用于访问设备的文件系统

班级结构:

var cOfflineStorageBase = Class.extend({
   init: function(){
   },
   CreateFolderDir: function(){
   },
   DeleteAll: function(){
   },
   DeleteDirectories: function(){
   },
   DeleteItem: function(){
   },
   GetFiles: function(){
   },
   FileExists: function(){
   }, 
   GetPath: function(){
   },
   GetObject: function(){
   },
   SaveObject: function(){
   },   
});

我希望能够在几个不同的角度服务(即offlineCart,offlineCustomLists等)中扩展此类,其中每个服务都能够使用存储库来存储各种不同的数据类型.我正在寻找最好,最合适的方式来做角度.在vanilla JavaScript中,你可以这样做:

var newClass = cOfflineStorageBase.extend({
   //add new stuff here
});

但我想以棱角分明的方式做同样的事情.

我一直在考虑的方法是使用angular.extend功能,但我不确定这是否合适,或者这样的事情是更合适的方法:

app.factory('someChild', ['$http' , 'cOfflineStorageBase', 
            function($http, cOfflineStorageBase){
  var SomeClass = cOfflineStorageBase.extend({
     init: function(){
        this._super.init()
     },
     //Add more stuff here
  });
  return SomeClass;
}]);

如果这些方法是正确的,或者如果可能有另一个对我想要完成的事情更好,我想要一些建议.我还想或者更愿意在大部分代码中使用promises,因为它会是异步的.

• a)$http和之间有什么区别$q？
• b)什么时候应该$q实施$http,反之亦然？
• c)在和实施最佳做法$http,并$q在同一时间？

我想创建一个服务,以便在几个角度应用程序中重复使用.

我正在使用angular-cli.

我希望服务是可配置的.换句话说,使用DI为每个应用程序提供使用不同配置参数实例化服务的能力.

该服务将位于共享库中,因此无法从父应用程序导入特定文件路径以获取配置参数,它必须通过DI获取它们.

我尝试按照这里的说明进行操作,因为文章描述了我面临的问题,但是我收到了一个错误:

ERROR Error: No provider for String!
at injectionError (core.es5.js:1169)
at noProviderError (core.es5.js:1207)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
at resolveNgModuleDep (core.es5.js:9533)
at _createClass (core.es5.js:9572)
at _createProviderInstance$1 (core.es5.js:9544)
at resolveNgModuleDep (core.es5.js:9529)

另外,来自zone.js:

zone.js:643 Unhandled Promise rejection: No provider for String! ; Zone: <root> ; Task: Promise.then ; Value: Error: No provider for String!

这是我的相关代码:

main.ts:

...
import { provideAuthService } from 'shared-library';
...
platformBrowserDynamic().bootstrapModule(AppModule, [provideAuthService('Good Day')]);

app.module.ts:

... …

对 Angular 服务的生命周期有一些疑问。我目前的理解是，如果你将服务注入到一个组件中，并且该服务是在该组件的providers数组中提供的，那么当该组件被销毁时，该服务也会被销毁。

这是一个不太抽象的例子：

@Component({
  selector: 'app-offline-header',
  templateUrl: './offline-header.component.html',
  styleUrls: ['./offline-header.component.css'],
  providers: [WebsocketService]
})

export class OfflineHeaderComponent{ 
  constructor(private socket: WebsocketService) {}
}

在上面的示例中，是WebsocketService在此组件的级别上注入的，而不是在 app.module（或其他模块）上注入的。那么如果这个组件被销毁，服务实例也会被销毁吗？

问题：

1. 当这个组件被销毁时，WebsocketService实例是否也被销毁？

2. 如果我们在根模块（）中提供此服务app.module，那么服务是单例吗？如果是这种情况并且服务是单例，那么这个单例是何时创建的？

我正在尝试使用存储经过身份验证的用户详细信息的应用程序范围的服务(UserService).我已经设置了一些路由,但发现UserService是按路由实例化的.我希望他们共享相同的UserService.

我创建了一个包含TestService作为提供程序的CoreModule,并将其导入AppModule.

core.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TestService } from '../test.service';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [],
  providers: [
    TestService
  ]
})
export class CoreModule { }

test.service.ts:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TestService {
  constructor() { console.log('testService constructor called');}
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { …

如何在 Angular 5 组件中使用 AngularJS 服务？

我有 AngularJS 应用程序，我正在尝试制作混合应用程序，但无法使用 AngularJS 服务洞察 Angular 组件：出现错误

ERROR 错误：尝试在设置之前获取 AngularJS 注入器。

我的 main.ts 是

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

应用程序模块：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, InjectionToken } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
import { AppComponent } from './app.component';
import { SignInComponent } from "./modules/login/components/sign-in/sign-in.component";
import { authServiceProvider } from './shared/angularJS-upgraded-providers';



@NgModule({
    declarations: …

因此，我有一个组件“motions”，它在通过一些用户输入单击按钮后执行MotionService 。然后，该服务需要根据输入将数据传递给 DebateComponent 的特定 CaucusService实例（我们将其称为服务 A）或 DiscussComponent 的 CaucusService 实例 B。
但是，到目前为止，我似乎在 MotionService 中有一个 CaucusService 的新实例。DebateComponent 和 DiscussComponent 需要 CaucusService 的不同实例，因此我在每个 @Component 中提供了它

基本上，我的 MotionService 需要在给定特定用户输入的情况下将数据传递给 A 或 B 我应该如何解决这个问题？

我有一个像这样导航的组件

this.router.navigate(['results'], { state });

一旦到了那里，我就获取了构造函数中的数据

constructor(private router: Router) { 
  const { state } = this.router.getCurrentNavigation().extras;
}

我想放置一个警卫来检查此数据是否存在，否则导航到其他地方

@Injectable()
export default class RouteHasDataGuard implements CanActivate { 
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        return !!state.root.data;
    } 
}

但这不起作用。你能帮我吗？