小编Yan*_*aim的帖子

我使用Protractor和Jasmine作为我的移动Angularjs应用程序.我想在特定元素上测试触摸事件(touchStart/touchEnd等...).就像是:

it('should play video', function(){
    var poster = by.css('.video-poster');
    element(poster).??? //Simulate touch event here
});

我正在尝试测试使用外部模板的指令.我没有运气,尝试了以下所有解决方案:

• NG-指令测试

• 如何测试使用templateUrl和控制器的指令？

• AngularJS + Karma + Ng-html2js =>无法实例化模块... html

我创建了一个测试指令(一个简单的div)并使用内联"模板"和外部"templateUrl"对其进行了测试.内联解决方案有效,而外部解决方案不:

   angular.module('AdUnit').directive('actionButton',function($location){
        return{
            scope:{
                actionName: '@'
            },
            restrict: 'E',
            //template: "<div ng-click='click()'>action button</div>",
            templateUrl: '/staticfiles/adunit/html/directives/actionButtonTemplate.html',
            controller: ['$scope', function($scope){
                $scope.click = function(){
                    $scope.$emit('ACTION_CLICK', $scope.actionName);
                }
            }]

        }
    });



    describe("Unit: Testing action button directive", function() {
    var elm, scope, linkFn;
    beforeEach(
        module('AdUnit')
    );

    beforeEach(module('/staticfiles/adunit/html/directives/actionButtonTemplate.html'));

    beforeEach(inject(function($rootScope, $compile) {
        elm = angular.element('<action-button action-name="post-action-0"></action-button>');
        scope = $rootScope;
        linkFn = $compile(elm);
        linkFn(scope);
        scope.$digest(); // have to digest to bring html from templateCache
        console.log('post compile',elm.html());// <== the …

我正在尝试将Angular2添加到我当前的Angular 1.X项目中.我正在使用yo angular启用TypeScript的项目.

我安装了所有东西(使用npm install):

<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="/node_modules/angular2/bundles/http.dev.js"></script>
<script src="/node_modules/angular2/bundles/router.dev.js"></script>

我添加了以下配置:

     <script>
        System.config({
          packages: {
            app: {
              format: 'cjs',
              defaultExtension: 'js'
            }
          },
          paths: {
            'angular2/upgrade': '../node_modules/angular2/upgrade'
          }

        });

         System.import('scripts/bootstrap.js').then(null, console.error.bind(console));

    </script>

现在,在我的Bootstrap.ts中,我使用:

import {UpgradeAdapter} from 'angular2/upgrade';

打字稿知道如何将它转换成我的.tmp:

var upgrade_1 = require('angular2/upgrade');

但是SystemJS不知道如何加载导入.我收到404错误:

GET http://localhost:9000/node_modules/angular2/upgrade 404 (Not Found)

我的目录结构:

root
- .tmp
- node_modules
- app
|-- index.html
|-- scripts

我在这里错过了什么？

我正在将NG 1.X服务转换为NG 2.0.

我的NG 1.X服务承诺链接(简化):

dataService.search = function(searchExp) {
      return this.getAccessToken()
      .then(function(accesstoken) {
        var url = $interpolate('https://my-api-url?q={{search}}&{{accesstoken}}')({search: searchExp, accesstoken: accesstoken});
        return $http({
          url: url,
          method: 'GET',
          cache: true
        });
      }).then(function(response) {
        return response.data;
      });
    };

我想将search服务转换为Angular 2.0服务,使用http和返回Observable.我更喜欢保持getAccessToken服务不变,作为NG 1.X服务,它返回一个承诺.

我正在考虑使用Observable.fromPromise旧的"承诺"服务.

我该怎么做？我该如何将这两个链接起来？

编辑:

只是为了澄清,我希望它是这样的:

dataService.search = function(searchExp) {
 return this.getAccessToken()
        .then(function(accesstoken) {
           //Here I want to use:
           // this.http.get(url).subscribe(() => ...)
          });
        };

我有一个动态背景图像的Angular.js应用程序(应该有URL的数据绑定).我还想使用css媒体查询来检测方向/像素密度等.

我找到的唯一解决方案是使用javascript将URL添加到背景图像,如下所示:

myDiv.css({'background' : 'url('+ scope.objectData.poster +') no-repeat', 'background-size':'auto 100%'});

这样我就必须将所有媒体查询逻辑传递给javascript,就像这样.(我的目的是能够为每个屏幕分辨率/像素密度/方向提供不同的背景图像)

我正在寻找一个更清洁的解决方案来使用CSS媒体查询,仍然能够数据绑定我的图像源.

TNX!

的Yaniv

我喜欢React的/ Redux的智能和哑组件的概念,其中一个哑组件不处理它自己的状态(转储组件对外部世界一无所知,它只是触发事件并根据其输入显示值) .这是微不足道的,因为所有状态都在一个地方处理(主减速器).

在Elm中,每个组件都有自己的"更新"功能(类似于Redux的减速器),因此使用相同的(哑和智能组件模式)似乎并不容易.

使用智能和转储组件是榆树的好习惯吗？如果是这样,我会有没有"更新"方法的组件吗？我想知道如何将数据(props)传递给我的组件,以及如何将事件触发到父组件.

我很想听听你的想法.

我正在从ng1升级到ng2.我添加了Angular 2并成功导入了它的模块:

<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="/node_modules/angular2/bundles/http.dev.js"></script>
<script src="/node_modules/angular2/bundles/router.dev.js"></script>

我添加了以下配置:

 <script>
        System.config({
          packages: {
            app: {
              format: 'cjs',
              defaultExtension: 'js'
            }
          }
        });

        System.import('scripts/bootstrap.js').then(null, console.error.bind(console));

 </script>

现在我正在尝试添加我的第一个ng2组件/模块并导入它:

它使用TypeScript编写的组件:

import {Component} from 'angular2/core';

@Component({
  selector: 'my-component',
  templateUrl: 'app/components/my-component/my-component.html',
  styleUrls: ['app/components/my-component/my-component.css'],
  providers: [],
  directives: [],
  pipes: []
})
export default class MyComponent {

  constructor() {}

}

导入我的组件:

import MyComponent from './components/my-component/my-component';

组件的ES5编译代码是:

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    if (typeof Reflect === …

我正在使用Angular 2.0 Alfa 35.当我导入时FORM_DIRECTIVES(这是formDirectivesAlfa 35 的新名称)我收到了一个Typescript错误:

error TS2305: Module '"angular2/angular2"' has no exported member 'FORM_DIRECTIVES'.

这是ts定义中的错误吗？我可以修复/覆盖它吗？

我有一个节点服务器,我正在代理我的api请求http-proxy-middleware,类似于这篇文章中发生的事情.当我代理到真正的生产服务器时,一切正常,但是当我将代理指向本地服务器时,它只是不起作用.

这是我的代码:

app.use('/_api', proxy({target: 'http://localhost:9000', changeOrigin: true}));

服务器上:

http://localhost:9000/hello 工作(我可以从我的浏览器访问它),但是,当我尝试从我自己的服务器访问它时,像这样:

http://localhost:3000/_api/hello

我正进入(状态:

不能GET/_api /你好

如果我用真正的服务器替换localhost:9000,一切正常......

我正在尝试使用本机节点调试器调试节点子进程.例如,请参阅此回购.

我尝试了所有选项之王,根据:debug1,debug1,debug3(以及我在网上找到的很多其他参考资料).

没有那些选项对我有用..

这是我的示例代码:

index.js:

const spawn = require('child_process').spawn;
const path = require('path');

const ls = spawn('node', [path.resolve('./child.js')], {execArgv: '--debug-brk=4545'});

ls.stdout.on('data', (data) => {
  console.log(`stdout: ${data}`);
});

ls.stderr.on('data', (data) => {
  console.log(`stderr: ${data}`);
});

ls.on('close', (code) => {
  console.log(`child process exited with code ${code}`);
});

child.js:

debugger;
const a = 123;

console.log(a);

然后我跑:

node --debug-brk --inspect=9222 index.js

我打开chrome-devtools://devtools/...镀铬.调试主进程效果很好,我也看到了子进程输出.唯一不起作用的是子过程的调试...

我在这做错了什么？