小编San*_*nde的帖子

我有以下应用程序结构

app
   home
       home.html
       home.ts
       home.sass
   app.component.ts
index.html

基本上我想将我的页面划分为单独的文件夹,这些文件夹具有与它们相关的样式,.ts和.html文件

但是现在加载这样的模板

import {Component} from 'angular2/core';

@Component({
    selector: 'admin-app',
    template: 'home/home.html'
})
export class AppComponent { }

文学加载"home/home.html"字符串作为模板,因为我想要home.html文件的html内容.

我需要将我的项目从Angular 4更新为Angular 5+,

我需要将以下所有依赖项更改为Angular 5+.

我还将Angular CLI更新为1.5.0.

我试图创建新项目但似乎只创建了Angular 4项目.

新的NG5_Project

"dependencies": {
  "@angular/animations": "^4.2.4",
  "@angular/common": "^4.2.4",
  "@angular/compiler": "^4.2.4",
  "@angular/core": "^4.2.4",
  "@angular/forms": "^4.2.4",
  "@angular/http": "^4.2.4",
  "@angular/platform-browser": "^4.2.4",
  "@angular/platform-browser-dynamic": "^4.2.4",
  "@angular/router": "^4.2.4",
  "core-js": "^2.4.1",
  "rxjs": "^5.4.2",
  "zone.js": "^0.8.14"
}

我究竟做错了什么.

CLI配置:

我有一个范围变量$ scope.first_unread_id,它在我的控制器中定义.在我的模板中,我有:

<div id="items" >
  <ul class="standard-list">
    <li ng-repeat="item in items" scroll-to-id="first_unread_id">
    <span class="content">{{ item.content }}</span>
    </li>
  </ul>
</div>

我的指令看起来像:

angular.module('ScrollToId', []).
directive('scrollToId', function () {
  return function (scope, element, attributes) {
    var id = scope.$parent[attributes["scrollToId"]];
    if (id === scope.item.id) {
      setTimeout(function () {
        window.scrollTo(0, element[0].offsetTop - 100)
      }, 20);
    }
  }

});

然而,它有两个问题:

1. 是否有更好的方法可以将"first_unread_id"从控制器范围中移除到直接询问范围内.$ parent？这似乎有点'icky'.我希望我可以通过视图将其传递给直接作为参数,而不必在ever li元素上重复该参数.

2. 有没有更好的方法来避免需要setTimeout()调用？没有它,它有时会起作用- 我想是由于布局时间的不同.我理解我使用的语法是定义一个链接函数 - 但我不清楚默认情况下这是一个前置链接还是后置链接 - 如果这对我的问题也很重要.

我遇到了一个奇怪的问题,Angular2的(RC1)Http服务执行两次http.post调用.我调试了我的应用程序,我知道这不是一个点击事件问题.所有通往核心服务呼叫的呼叫

public create(json: Object, params?: Object): Observable<T> {
    let body = JSON.stringify([json]);
    let headers = this.getHeaders();
    let options = new RequestOptions({ headers: headers });

    return this._http.post(this.createURL(this.getCreateURL(), [], params), body, options)
    .map(res => this.handleObjectResponse(res));
}

运行一次.然后,当我开始跟踪问题时,我发现我的处理程序this.handleObjectResponse被执行了两次.所以我进一步钻研并达到@angular/http/src/backends/xhr_backend.ts了他们这样做的地方

constructor(req: Request, browserXHR: BrowserXhr, baseResponseOptions?: ResponseOptions) {
    this.request = req;
    this.response = new Observable<Response>((responseObserver: Observer<Response>) => {
        let _xhr: XMLHttpRequest = browserXHR.build();
        _xhr.open(RequestMethod[req.method].toUpperCase(), req.url);
        // load event handler
        ...
        ..

所以我打开一个断点this.request = req;,然后打开另一个断点let _xhr: XMLHttpRequest = browserXHR.build();,我发现我击中了第一个断点,但后来我从回调中击中了第二个断点两次. …

我正在尝试开发一个联系表单,我希望用户输入长度为10-12的电话号码.

值得注意的是,相同的验证工作在Message字段,它唯一的数字字段给我带来了麻烦.

我找到了这个答案,但对我来说没用.

我有以下代码:

HTML:

<form [formGroup]="myForm" (ngSubmit)="myFormSubmit()">
      <input type="number" formControlName="phone" placeholder="Phone Number">
      <input type="text" formControlName="message" placeholder="Message">
       <button class="button" type="submit" [disabled]="!myForm.valid">Submit</button>
</form>

TS:

this.myForm = this.formBuilder.group({
     phone: ['',  [Validators.required, Validators.minLength(10), Validators.maxLength(12)]],
     message: ['',  [Validators.required, Validators.minLength(10), Validators.maxLength(100)]]
});`

我发现自己一次又一次地重复相同的代码片段,是否有可能在AngularJS中做这样的事情:

<div ng-snippet="mySnippet"> 
  This is a snippet 
</div> 

<div ng-snippet="anotherSnippet"> 
  Yet another snippet!!
</div>

<ng:include src="anotherSnippet">
<ng:include src="anotherSnippet">
<ng:include src="mySnippet">

而上述的输出将是:

Yet another snippet!!
Yet another snippet!!
This is a snippet

我不一定在寻找这种确切的"ng:include"解决方案或模式,但可以减少模板中的重复.

我是Angular2的新手,我正在学习进行http调用.

我发现Angular2有这两个模块:

来自@ angular/http的HttpModule

和

来自@ angular/common/http的HttpClientModule

他们都支持http电话.

但是我不知道它们之间的区别.

有谁知道这个？

我正在做Angular2 5分钟的快速启动.

现在大约一半的教程,我正确设置了以下文件:

• index.html的,
• app.component.ts
• 应用程序/ boot.ts
• 的package.json
• tconfig.json

跑了npm start,我收到这个错误:

Uncaught ReferenceError: require is not defined(anonymous function) @ boot.js:1 angular2-polyfills.js:143 Uncaught TypeError: Cannot read property 'split' of undefinedreadMemberExpression @ system.src.js:1456(anonymous function) @ system.src.js:3224(anonymous function) @ system.src.js:3749complete @ system.src.js:2487run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111

我找到了关于使用es6垫片和我包含的链接<script src="node_modules/es6-shim/es6-shim.js"></script>.

但是我仍然得到 Uncaught ReferenceError: require is not defined错误.

app.component.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { …

我正在尝试使用angular 2 cli.
我想在我的项目中使用momentjs,所以这就是我所做的:
1.使用angular cli创建项目.
2.运行npm install --save moment
3.从src文件夹运行typings init+ typings install --save moment.
4.增加系统模块的时刻:

System.config({
  packages: {
    app: {
      format: 'register',
      defaultExtension: 'js'
    },
    moment: {
      map: 'node_modules/moment/moment.js',
      type: 'cjs',
      defaultExtension: 'js'
    }
  }
});

5. 添加import * as moment from 'moment';到我想要的组件.
6. 跑步ng serve和得到:

[DiffingTSCompiler]:Typescript发现以下错误:app/angular-day-picker.ts(2,25):找不到模块'时刻'.错误:[DiffingTSCompiler]:Typescript发现以下错误:app/angular-day-picker.ts(2,25):找不到模块'时刻'.在diffingTSCompiler.rebuild(/ Users/vioffe/personal /)的DiffingTSCompiler.doFullBuild(/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:202:29) diffingPluginWrapper.rebuild上的angular-day-picker/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:101:18)(/ Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/lib/broccoli/diffing-broccoli-plugin.js:87:45)at/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/broccoli/lib/api_compat. js:42:21 at lib $ rsvp $$ internal $$ tryCatch(/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js :1036:16)在lib $ rsvp $$ internal $$ invokeCallback(/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js :1048:17)at/users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular -cli/node_modules/rsvp/dist/rsvp.js:331:11 at lib $ …

在Angular 1.x中,我们可以使用ngAnimate来检测我们何时离开或进入特定路线.此外,我们可以对他们应用行为:

animateApp.animation('.myElement', function(){

    return {

        enter : function(element, done) {
            //Do something on enter
        },

        leave : function(element, done) {
            //Do something on leave
        }
    };

)};

得到这样的产品:http://embed.plnkr.co/uW4v9T/preview

我想用Angular 2.0做类似的事情,我觉得我很接近......

所以这里去,我创建了一个用于控制与导航的主要应用组件一个简单的路由器家用和有关部件.

import { bootstrap, bind, Component, provide, View } from 'angular2/angular2';
import {RouteConfig, RouteParams, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, APP_BASE_HREF, ROUTER_BINDINGS} from 'angular2/router'




/////////////////////////////////////////////////////////////////
// Home Component Start
/////////////////////////////////////////////////////////////////
@Component({
  selector: 'home-cmp'
})

@View({
  template: `
    <h2 class="title">Home Page</h2>
  `
})

class HomeCmp implements OnActivate, …