我试图根据http://angular.io上的快速入门设置角度2 .我完全按照指南中的描述复制了每个文件,但是当我运行npm start并打开浏览器选项卡时,我在控制台中收到以下错误的"正在加载...":
Uncaught SyntaxError: Unexpected token < (program):1
__exec @ system.src.js:1374
Uncaught SyntaxError: Unexpected token < angular2-polyfills.js:138
Evaluating http://localhost:3000/app/boot
Error loading http://localhost:3000/app/boot
这是我的app.component.ts:
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: `<h1>My First Angular 2 App</h1>`
})
export class AppComponent {
}
我的boot.ts:
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
bootstrap(AppComponent);
我的index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular 2 Quick Start</title>
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script …我开始通过他们在页面中提供的快速入门来学习Angular2 ,现在我正在尝试发出一些Http请求.但每当我引导组件时,Chrome都会给我这个错误:
Uncaught SyntaxError: Unexpected token < http:1
Uncaught SyntaxError: Unexpected token < angular2-polyfills.js:138
Evaluating http://localhost:3000/angular2/http
Error loading http://localhost:3000/app/boot.js
这是组件:
import {Component} from 'angular2/core';
import {HTTP_PROVIDERS, Http} from 'angular2/http';
@Component({
selector: 'users',
providers: [HTTP_PROVIDERS],
templateUrl: 'app/views/users.html'
})
export class UsersComponent {
people: Object[];
constructor(http: Http) {
http.get('http://192.168.56.101/api/test').subscribe(res => {
this.people = res.json();
console.log(this.people);
});
}
}
和引导:
import {bootstrap} from 'angular2/platform/browser'
import {UsersComponent} from './components/users'
bootstrap(UsersComponent, [HTTP_PROVIDERS]);
视图是唯一的{{people}}.
TypeScript正在编译好.我甚至不知道什么失败了!
我有一个表示模型的typescript类,我希望实例通过angular的Http服务与API通信.
但是模型的构造函数在创建实例时需要参数.例如一些超级简单:
class SomeModel{
constructor(public id:number, public name:string, ){
}
我想注入Http服务,以便它可用于我的实例,但似乎这样做的规范方法是使用以下命令构造器:
constructor(http:Http)
我一直在挖掘Injector文档,但它有点稀疏,我没有发现任何有用的东西.有没有办法在Http不使用构造函数模式的情况下从DI系统获取对服务的引用？
刚刚开始演示Angular2项目(之前没有Angular1/AngularJS的经验.已经跟随并扩展了在线快速入门和教程,一切都很好.但是我想要使用库中的一些组件.是专为AngularJS设计的,并且没有任何问题!
关于AngularJS/Angular2兼容性的大部分可用信息假设您有一个AngularJS项目,您正在添加Angular2组件 - 而不是相反 - 所以我希望做的事情甚至可能无法实现.到目前为止我尝试过的是一个基于Angular2快速入门的简单剥离项目,其中一个Angular2组件加载到index.html中.然后,我想将现有库(基于AngularJS)的组件集成到此中.
我尝试使用UpgradeAdapter.upgradeNg1Component从库中创建组件并将它们直接添加到我的Angular2组件中
我试图通过NPM安装angularjs,在脚本标签到我导入它index.html,然后用的组合UpgradeAdapter.downgradeNg2Component和UpgradeAdapter.bootstrap加载我Angular2作为降级模块
这些似乎都不起作用 - 组件无法显示,浏览器控制台告诉我我已经有了 Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/angular2/upgrade
Error loading http://localhost:3000/app/main.js
我最好的猜测是,这实际上是一个不受支持的场景,我需要一个"正确的"AngularJS应用程序才能使用UpgradeAdapterAngular2 的功能.谁能证实这一点？或者有什么愚蠢的我在这里失踪？