以下内容转自网络

1. 创建项目文件夹

创建一个新的文件夹来保存你的项目，比如一开始有个self就好了

2.安装基础库

首先确保已经安装了node.js

我们使用 npm package manager  来安装需要的开发库和开发工具。

打开终端窗口，输入下面的命令。

npm install

如果在执行npm install命令时没有出现npm ERR!，一起都好。可能会有几个npm WARN消息，这也没有影响。
我们会经常在一连串的gyp ERR!（gyp: generate your project）消息后看到一个npm WARN消息。不用管他们。一个包会使用node-gyp重新编译自己。如果重新编译失败，包会恢复（场使用一个预编译版本），一切正常工作。
只要保证在npm install命令最后面没有npm ERR!就好。

之后再执行下面的命令

  1. npm init -y
  2. npm i angular2@2.0.0-alpha.44 --save --save-exact
  3. npm i live-server --save-dev

这些命令将会创建名为 package.json 的项目文件，安装相应的软件包，现在的 package.json 看起来应该如下所示。

  1. {
  2.   "name": "angular2-getting-started",
  3.   "version": "1.0.0",
  4.   "dependencies": {
  5.     "angular2": "2.0.0-alpha.44"
  6.   },
  7.   "devDependencies": {
  8.     "live-server": "^0.8.1"
  9.   }
  10. }

还需要一个 scripts 的配置节，找到并替换为如下的内容, 如果在你的文件中没有这个配置节, 那就加上好了.

  1. "scripts": {
  2.     "start": "live-server"
  3.   }

3. 第一个 Angular Component

添加一个名为 app.js 的文件，输入下面的内容。

  1. var AppComponent = ng
  2.   .Component({
  3.     selector: 'my-app',
  4.     template: '<h1>My First Angular 2 App</h1>'
  5.   })
  6.   .Class({
  7.     constructor: function () { }
  8.   });

我们正在创建一个名为 AppComponent 的可视组件，通过使用全局的 ng 命名空间下的 Component 和 Class 方法来完成。

  1. var AppComponent = ng
  2.     .Component({...})
  3.     .Class({...})

Component 方法需要一个包含两个属性的配置对象。selecter 属性告诉 Angular 需要控制名为 "my-app" 的元素。一旦遇到 my-app 元素，Angular 将会创建和显示 AppComponent 实例

template 属性定义了组件的可视外观。在这个示例中，我们使用了内联的模板，我们也可以把这个模板调整到一个模板文件中，然后通过 templateUrl 来关联模板文件的名称来使用它。

我们使用 Class 方法实现这个组件本身的内容，可以定义属性，方法并绑定到这个视图

现在的组件是一个最小化的实现，构造函数中没有内容。在以后的示例中，我们会看到很多有趣的内容。

4. 启动应用

我们需要在应用中做点什么，在 app.js 的最后，添加下面的内容。

  1. document.addEventListener('DOMContentLoaded', function() {
  2.   ng.bootstrap(AppComponent);
  3. });

我们等到浏览器通知我们说，内容已经加载完成了，然后再调用 bootstrap 方法。

bootstrap 方法通知 Angular 使用 AppComponent 作为应用的根来启动应用，

应该可以猜到, 在应用变得复杂的情况下, 我们会创建一个 Component 的树来完成复杂的工作.

Wrapped in an IIFE

我们不希望污染全局命名空间，但是,现在还不需要应用到命名空间，我们直接使用 IIFE ( Immediately Invoked Function Execution ) 来封装我们的代码。

  1. (function() {
  2. var AppComponent = ng
  3.   .Component({
  4.     selector: 'my-app',
  5.     template: '<h1>My First Angular 2 App</h1>'
  6.   })
  7.   .Class({
  8.     constructor: function () { }
  9.   });
  10. document.addEventListener('DOMContentLoaded', function() {
  11.   ng.bootstrap(AppComponent);
  12. });
  13. })();

5. 创建 index.html

在项目文件夹中添加名为 index.html 的页面，内容如下：

  1. <html>
  2.   <head>
  3.     <title>Angular 2 QuickStart</title>
  4.     <script src="node_modules/angular2/bundles/angular2.sfx.dev.js"></script>
  5.     <script src="app.js"></script>
  6.   </head>
  7.   <body>
  8.     <my-app></my-app>
  9.   </body>
  10. </html>

在 head 中，我们的应用加载了两个脚本

angular2.sfx.dev.js, Angular2 的开发库

app.js, 我们刚刚开发的脚本。

在 body 中，使用了名为 <my-app> 的元素，这是应用的根的占位，Angular 将在这里显示我们的应用。

angular2 启动步骤的更多相关文章

  1. [iOS微博项目 - 2.4] - 重新安排app启动步骤

    github: https://github.com/hellovoidworld/HVWWeibo   A.app启动步骤 1.加入了授权步骤之后,最先要判断app内是否已经登陆了账号 2.在程序启 ...

  2. Oozie的详细启动步骤（CDH版本的3节点集群）

    不多说,直接上干货! 我的机器情况是,bigdatamaster(Oozie是安装在这台节点上).bigdataslave1和bigdatalsave2. 启动步骤 第一:先启动mysqld服务进程 ...

  3. HBase的多节点集群详细启动步骤（3或5节点）（分为Zookeeper自带还是外装）

    HBase的多节点集群详细启动步骤(3或5节点)分为: 1.HBASE_MANAGES_ZK的默认值是false(zookeeper外装)(推荐) 2.HBASE_MANAGES_ZK的默认值是tru ...

  4. spark集群启动步骤及web ui查看

    集群启动步骤:先启动HDFS系统,在启动spark集群,最后提交jar到spark集群执行. 1.hadoop启动cd /home/***/hadoop-2.7.4/sbinstart-all.sh ...

  5. Kafka的3节点集群详细启动步骤（Zookeeper是外装）

    首先,声明,kafka集群是搭建在hadoop1.hadoop2和hadoop3机器上. kafka_2.10-0.8.1.1.tgz的1或3节点集群的下载.安装和配置(图文详细教程)绝对干货 如下分 ...

  6. Hadoop的多节点集群详细启动步骤（3或5节点）

    版本1 利用自己写的脚本来启动,见如下博客 hadoop-2.6.0-cdh5.4.5.tar.gz(CDH)的3节点集群搭建 hadoop-2.6.0.tar.gz的集群搭建(3节点) hadoop ...

  7. Kylin启动步骤

    Kylin本身的启动命令比较简单, 但是由于Kylin依赖的其他组件比较多, 所以把完整的启动步骤整理一下. 1.确保集群时间同步 首先查看集群中的时间是否同步 date 如果时间不一致,需要使用如下 ...

  8. windows下vue项目启动步骤

    原创:https://blog.csdn.net/qq_27680317/article/details/71123051?locationNum=10&fps=1 不是ngnix服务器是,忽 ...

  9. Oracle 11g RAC停止和启动步骤

    关闭前备份控制文件/参数文件:   sqlplus / as sysdba alter database backup controlfile to '/home/oracle/control.ctl ...

随机推荐

  1. AtCoder Grand Contest 016 F - Games on DAG

    题目传送门:https://agc016.contest.atcoder.jp/tasks/agc016_f 题目大意: 给定一个\(N\)点\(M\)边的DAG,\(x_i\)有边连向\(y_i\) ...

  2. 2017年“嘉杰信息杯” 中国大学生程序设计竞赛全国邀请赛 Highway

    Highway Accepted : 122   Submit : 393 Time Limit : 4000 MS   Memory Limit : 65536 KB Highway In ICPC ...

  3. RHEL 6.5----iscsi多路径存储

    主机名 IP master eth0: 192.168.30.130(NAT) eth1: 192.168.17.130(VMNet4) node-1 eth0: 192.168.30.131(NAT ...

  4. 启动azkaban时出现User xml file conf/azkaban-users.xml doesn't exist问题解决（图文详解）

      问题详情 [hadoop@master azkaban]$ ll total drwxrwxr-x hadoop hadoop May : azkaban- drwxrwxr-x hadoop h ...

  5. 关于java的Long 类型到js丢失精度的问题

    写代码碰到一个bug, 现象是 后台Java返回的18位的Long类型的数据,到前台丢失了精度.  查了一下,原因是 java的Long类型是18位, 而 js的Long类型(虽然没有明确定义的Lon ...

  6. [转]彻底明确怎样设置minSdkVersion和targetSdkVersion

    minSdkVersion和targetSdkVersion相信非常多人都不太理解.我在网上也看了很多关于这两者差别的文章,感觉说的都非常模糊.直到我在stackOverFlow看到Android M ...

  7. re正则表达式公式讲解4

    1.re,split()  字符串分离 import re s = "abc20tyu9iou16hij25" m = re.split("\d",s) #以& ...

  8. spark性能调优--jvm调优（转）

    一.问题切入 调用spark 程序的时候,在获取数据库连接的时候总是报  内存溢出 错误 (在ideal上运行的时候设置jvm参数 -Xms512m -Xmx1024m -XX:PermSize=51 ...

  9. webpack3整理（第三节/满三节）------（base.config文件解释）

    'use strict' const path = require('path') const utils = require('./utils') const config = require('. ...

  10. TCP/IP详解之IP协议

    1.IP协议 IP协议是TCP/IP协议的核心,所有的TCP,UDP,IMCP,IGCP的数据都以IP数据格式传输.要注意的是,IP不是可靠的协议,这是说,IP协议没有提供一种数据未传达以后的处理机制 ...