小编Gra*_*ham的帖子

将装饰器(@Component + @View)转换为es5时,Babel会出错.我在gulp文件中遗漏了什么或者我怎么能让它工作？

ES2015文件(App.es6)

import {Component, View, bootstrap} from 'angular2/angular2';

@Component({
  selector: 'my-app'
})
@View({
  template: '<h1>Hello {{ name }}</h1>'
})
// Component controller
class MyAppComponent {
  name: string;
  constructor() {
    this.name = 'Alice';
  }
}

bootstrap(MyAppComponent);

Gulp文件

var gulp = require('gulp');
var babel = require('gulp-babel');

gulp.task('default', function () {
    return gulp.src('App.es6')
        .pipe(babel())
        .pipe(gulp.dest('dist'));
});

在Angular 2的官方教程中,他们使用Promise.resolve(HEROES)来获取HEROES数组.

我尝试按照Http客户端教程,但遇到一些问题.我可以发出请求,但是当我导航到其他页面时,它会再次发出get请求.不同的组件正在使用他们自己的一套HEROES.

我想知道他们为什么会有不同的表现.如果我想与服务器进行通信并仍然使组件使用相同的HEROES,我该怎么办？

教程实例:(https://angular.io/resources/live-examples/toh-5/ts/plnkr.html)

我的试用版:(http://plnkr.co/edit/mPgpt2snK2OY6o8sq6YK?p=preview)

我与众不同的是......

(1)Angular Official的app/hero.service.ts版本

import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { Injectable } from 'angular2/core';

@Injectable()
export class HeroService {
  getHeroes() {
    return Promise.resolve(HEROES);
  }

  getHero(id: number) {
    return Promise.resolve(HEROES).then(
      heroes => heroes.filter(hero => hero.id === id)[0]
    );
  }
}

(2)我的app/hero.service.ts版本

import {Http, Response} from 'angular2/http';
import {Headers, RequestOptions} from 'angular2/http';
import {Observable}     from 'rxjs/Observable';
import { Hero …

我的目标是将内存Web API与真实后端互换使用。

如《 Angular 2（或4）英雄之旅》教程https://angular.io/tutorial/toh-pt6#extracting-the-data-in-the-then-callback所述：

注意服务器返回的数据的形状。这个特定的内存Web API示例返回一个具有数据属性的对象。您的API可能会返回其他内容。调整代码以匹配您的Web API。

模拟的Web api服务返回包装在data属性中的对象。问题是我的后端没有以这种格式返回数据，它没有“数据”属性。

.then(response => response.json().data as Hero[])

应该

.then(response => response.json() as Hero[])

并希望它能工作。如果我将其更改为第二个版本，则内存中的api不再起作用...

有没有一种方法可以更改in-memory-web-api来真正删除该数据属性？

可能重复:
在线PHP IDE

在PHP中,可以运行代码并在线获取结果吗？

这是一个我想与ng-repeat一起使用的对象,但是它无法看到内部firstlang属性:

$scope.school{
  name  : "stackoverflow",
  sub   :{
    firstlang : "kannada"
  }
}

这是我的重复:

<ul>
    <li ng-repeat="index in school.sub">
        first language is = {{index.firstlang}}
   </li>
</ul>

期望的结果是: first language is = kannada

我使用这些宝石使用AngularJS进行Rails 4应用程序:

• 宝石'angularjs-rails'
• 宝石'angular-rails-templates'
• 宝石'asset_sync'

它适用于这样的模板:

    <img ng-controller='LikePostController'  
       ng-dblclick='like(post);' 
       ng-src='{{post.photo.standard}}' 
       class='lazy post_photo pt_animate_heart'
       id='post_{{post.id}}_image'
     />

图像渲染正确.但是在我的其他js

petto.directive('ptAnimateHeart', ['Helper', function(Helper){
    linkFunc = function(scope, element, attributes) {
      $heartIcon = $("#heart_icon");

      if($heartIcon.length == 0) {
        $heartIcon = $("<img id='heart_icon' src='/assets/feed.icon.heart.png' alt='Like' /> ");
        $(document.body).append($heartIcon);
      }

      element.on('dblclick', function(event){
        $animateObj = $(this);
        Helper.animateHeart($animateObj);
      });
    }
    return { 
      restrict: 'C',
      link: linkFunc
    }

  }])

我从浏览器控制台找不到'assets/feed.icon.heart.png'错误.我在app/assets/feed.icon.heart.png下有feed.icon.heart.png.

ps:忘记提及我使用资产同步gem来托管亚马逊s3中的资产.图像在开发中运行良好,但在生产中没有.

如何在AngularJS中使用Google Maps API？

我在AngularJS应用程序中使用此代码:

<style>
  #googleMap {
    width: 200px;
    height: 200px;
  }
</style>

<div id="googleMap"></div>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>

<script language="javascript">

  var map;

  function initialize() {

    var mapOptions = {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      zoom: 8,
      center: new google.maps.LatLng(-34.397, 150.644)
    };

    map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
  }

  google.maps.event.addDomListener(window, 'load', initialize);

</script>

此代码位于视图中,而不在控制器中.

我在视图中有其他功能,但它们有效,但谷歌地图仍无法正常工作.

这是我在浏览器控制台中遇到的错误:

错误:未定义google @ http:// localhost:3000/js/jquery-1.11.2.min.js第2行> eval:10:2 .globalEval/<@ http:// localhost:3000/js/jquery -1.11.2.min.js:2:2615 .globalEval @ http:// localhost:3000/js/jquery-1.11.2.min.js:2:2589 .domManip @ http:// localhost:3000/js /jquery-1.11.2.min.js:3:23105 .after @ http:// localhost:3000/js/jquery-1.11.2.min.js:3: 21067 Cehttp:// localhost:3000/js/angular/lib/angular.min.js:176:70 n @ http:// …

我已经使用淘汰赛和引导弹出窗口工作了几天，我有一个数据表，它使用淘汰赛数据绑定显示一些信息。

<tbody data-bind="foreach: tehlist()">
  <tr>
     <td data-bind="text: $data.Category"></td>
     <td data-bind="text: $data.Name"></td>
     <td><button type="button" id="tehValue" class="btn btn-default" data-bind="text: $data.Value" style="border:none" onclick="getinfo()"></button></td>
  </tr>
</tbody>

当 tehValue 被点击时，它会触发一个显示随机消息的函数：

function getinfo(veh, item) {
    $('#tehValue').popover({
        content: 'Dana' + Math.random(),
        html: true
    });  
}

问题是它只为第一个点击的值显示弹出窗口，而不是其他的。

有没有办法为每个valuedata-bind显示不同的弹出窗口tehlist？

更新

我已经改为：

<button type="button" id="tehValue" class="btn btn-default" data-bind="text: $data.Value, click: getinfo" style="border:none"></button></td>

和功能：

getinfo = function (item, event) {
        $('#tehValue').popover({
            content: 'Dana' + Math.random(),
            html: true
        });
    }

我仍然只在点击时获得第一个值的弹出窗口。

有没有办法在不使用 Id 的情况下显示按钮的弹出框，而只使用 getinfo 函数进行 onclick？

我是 Angular 单元测试的新手，我正在尝试测试会话存储和本地存储。

我的代码是：

subscribe(data) {
        sessionStorage.setItem('myProductDetail', JSON.stringify(data));
    }

subscribe(data) {
        LocalStorage.setItem('dummyname', data[0].name);
    }

对会话、本地存储和私有类进行单元测试是一个好习惯吗？

我尝试按照下面的示例代码来模拟我的本地存储和会话存储。

beforeEach(function () {
  var store = {};

  spyOn(localStorage, 'getItem').andCallFake(function (key) {
    return store[key];
  });
  spyOn(sessionStorage, 'setItem').andCallFake(function (key, value) {
    return store[key] = value + '';
  });
  spyOn(localStorage, 'clear').andCallFake(function () {
      store = {};
  });
});

非常感谢任何指导。

我正在尝试在Vuetify中更改命名的颜色，以便在应用程序周围使用的可视控件集中继承主题，并且不需要为每个组件定义单独的颜色。

该Vuetify主题文档说这有关更改主题颜色：

这很容易改变。只需将主题属性传递给Vue.use函数。您可以选择修改全部或仅某些主题属性，其余的则继承自默认属性。

但是，我看不到v1.3.12版的独立/ CDN模式下的这项工作。

请注意，当您从CDN加载Vue.js时，不会使用vue-cli，因此我们非常高兴以这种方式进行工作，因为我们现在的重点是快速的微前端开发。

该代码笔显示的代码与Vuetify docs示例中的代码相同，但是按钮的颜色不会更改，它们仍然是默认颜色。我什至将错误颜色更改为洋红色（#ff00ff），以使其在工作时非常明显：

JavaScript：

Vue.use(Vuetify, {
  theme: {
    primary: '#3f51b5',
    secondary: '#b0bec5',
    accent: '#8c9eff',
    error: '#ff00ff'
  }
});

new Vue({
  el: '#app',
  data: () => ({
    //
  })
});

HTML：

<div id="app">
  <v-app>
    <v-content>
      <v-container grid-list-xl>
        <v-btn>Default</v-btn>
        <v-btn color='primary'>Primary</v-btn>
        <v-btn color='secondary'>Secondary</v-btn>
        <v-btn color='accent'>Accent</v-btn>
        <v-btn color='error'>Error</v-btn>
      </v-container>
    </v-content>
  </v-app>
</div>

为了表明此问题不仅限于CodePen，这是我的本地项目，该项目的v-navigation-drawer带有错误类，并且自定义主题颜色设置为Magenta：

v-navigation-drawer.error(app fixed mini-variant='true')

我知道以前曾问过这种类型的问题，但是这个问题是使用vue-cli和nuxt（即不是独立的），并且这个问题是Vuetify 1.0之前的版本。使这个问题与众不同的是独立/ CDN方面。