有关Angular2 beta，即使是对技术不够熟悉的工程师也可以做到
你好。我是前端工程师mikakane。
因为我被指派写Angular2圣诞日历，所以我会努力完成。
成为beta版后，文档得到了充实！
我已经完成了一个”チートシート”。真的很容易阅读。你可以在以下链接中找到：
https://angular.io/docs/js/latest/guide/cheatsheet.html
如果使用这些技术和QuickStart指南的话，应该可以解决这个问题。
https://angular.io/docs/js/latest/quickstart.html
由于Angular的博客文章通常是用一种神秘的语言叫做TypeScript编写的，作为一名JavaScript开发者，我经常会遇到很多不理解的地方。
从Alpha的时候起，虽然在某种程度上已经有了一些信息，但能在官方文档中找到关于基于JS的信息，还是让人感到非常高兴呢！
这样的话，我似乎也可以开始了！！
尝试使用Angular2时遇到的困难。
我一邊試著閱讀英文文件，一邊進行調查，但在一開始的地方我遇到了一個類似於指令的地方，出現了錯誤，無法繼續進行。
$ npm install
bash: npm: command not found
因为在谷歌上搜寻了也不太了解，所以我暂时先放一放，决定自己想办法解决。
使用NPM、构建甚至不使用JS文件，只需用一个自制的Angular2文件。
npm在之前的错误中放弃了。毕竟编译之类的我不太明白。
因为我有着工匠的倾向，我希望逐个手工制作JS文件。
说实话，我觉得用JavaScript、CSS之类的进行文件分离很麻烦，我想在一个文件里搞定。
只是尝试一下而已，搞多个文件太麻烦了。
我用的编辑器JSBin没有选项卡，看文件很费劲。
（至少我希望能禁用软换行…）
因此，我已经完成了一个将应用程序的所有魅力都装入一个手工制作的Angular2应用程序的文件。
我已经能够使用xhr获取Qiita文章列表，并展开成列表的形式。
为了那些没有连接到互联网无法打开JSBin的人，我提供了一份代码。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.umd.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-all.umd.js"></script>
<script>
$(function(){
var AppComponent = ng.core.Component({
selector: 'my-app',
template: $("#template").html()
}).Class({
constructor: [ng.http.Http,function(http) {
var self = this;
this.name = "mikakane"
this.itemList = [];
this.load = function(perPage){
var url = "https://qiita.com/api/v2/items?page=1&per_page="+perPage+"&query=user%3A"+this.name;
var request = new ng.http.Request({
"method": "Get",
"url" : url
});
http.request(request).subscribe(function(res){
self.itemList = res.json();
})
}
this.load(10);
}]
});
ng.platform.browser.bootstrap(AppComponent,[ng.http.HTTP_PROVIDERS]);
})
</script>
<script type="text/ng-template" id="template">
<h2>angular to qiita</h2>
<p>{{name}}さんのQiita記事一覧</p>
<div>
<a (click)="load(10)">最新10件</a>
<a (click)="load(20)">最新20件</a>
<a (click)="load(30)">最新30件</a>
</div>
<ul>
<li *ngFor="#item of itemList">
<a href="{{item.url}}">{{item.title}}</a>
</li>
</ul>
</script>
</head>
<body>
<my-app></my-app>
</body>
</html>
只要在Class的部分、function的部分以及template的部分进行一些调整，就能轻松地体验Angular2的氛围。
整理一下
鉴于Angular2的文章经常涉及到TypeScript, Babel或者import等复杂性较高的概念，导致对于初学者来说比较难懂，我决定先做一个模板，以便任何人都能够轻松入手Angular2应用程序。
嗯，说实话，当我写下“self”这个词时，我就觉得“这样不太对”，所以还是努力学习Typescript可能会更幸福。
用Angular2写感想的话，可以以组件为基础写代码还是挺开心的。
给指令加上()和*之类的神秘规则有点不太习惯，但比起没有还是好些吧。
在Angular1之类的框架中，有时候会忘记在ng-include加”或者迷惑地想不起来ng-click是要加()的…还是有一些困惑。
我在脑海中编译了有关TypeScript的文章，还调查了一个全能的CDN结构，虽然有很多对我个人来说没有任何用处的工作，但我希望它能成为那些把楼梯当作墙的人们的一个小小踏脚石。
