[b]1. 创建项目文件夹[/b] 创建一个新的文件夹来保存你的项目，比如一开始有个self就好了 [img]http://files.jb51.net/file_images/article/201707/2017715151602109.png?2017615151613[/img] [b]2.安装基础库[/b] 首先确保已经安装了node.js 我们使用 npm package manager  来安装需要的开发库和开发工具。 打开终端窗口，输入下面的命令。 [code]npm install[/code] 如果在执行npm install命令时没有出现npm ERR!，一起都好。可能会有几个npm WARN消息，这也没有影响。 我们会经常在一连串的gyp ERR!（gyp: generate your project）消息后看到一个npm WARN消息。不用管他们。一个包会使用node-gyp重新编译自己。如果重新编译失败，包会恢复（场使用一个预编译版本），一切正常工作。 只要保证在npm install命令最后面没有npm ERR!就好。 之后再执行下面的命令 这些命令将会创建名为 package.json 的项目文件，安装相应的软件包，现在的 package.json 看起来应该如下所示。 还需要一个 scripts 的配置节，找到并替换为如下的内容, 如果在你的文件中没有这个配置节, 那就加上好了.  [b]3. 第一个 Angular Component[/b] 添加一个名为 app.js 的文件，输入下面的内容。 我们正在创建一个名为 AppComponent 的可视组件，通过使用全局的 ng 命名空间下的 Component 和 Class 方法来完成。 Component 方法需要一个包含两个属性的配置对象。selecter 属性告诉 Angular 需要控制名为 "my-app" 的元素。一旦遇到 my-app 元素，Angular 将会创建和显示 AppComponent 实例 template 属性定义了组件的可视外观。在这个示例中，我们使用了内联的模板，我们也可以把这个模板调整到一个模板文件中，然后通过 templateUrl 来关联模板文件的名称来使用它。 我们使用 Class 方法实现这个组件本身的内容，可以定义属性，方法并绑定到这个视图 现在的组件是一个最小化的实现，构造函数中没有内容。在以后的示例中，我们会看到很多有趣的内容。 [b]4. 启动应用[/b] 我们需要在应用中做点什么，在 app.js 的最后，添加下面的内容。 我们等到浏览器通知我们说，内容已经加载完成了，然后再调用 bootstrap 方法。 bootstrap 方法通知 Angular 使用 AppComponent 作为应用的根来启动应用， 应该可以猜到, 在应用变得复杂的情况下, 我们会创建一个 Component 的树来完成复杂的工作. [b] Wrapped in an IIFE[/b] 我们不希望污染全局命名空间，但是,现在还不需要应用到命名空间，我们直接使用 IIFE ( Immediately Invoked Function Execution ) 来封装我们的代码。 [b] 5. 创建 index.html[/b] 在项目文件夹中添加名为 index.html 的页面，内容如下： 在 head 中，我们的应用加载了两个脚本 angular2.sfx.dev.js, Angular2 的开发库 app.js, 我们刚刚开发的脚本。 在 body 中，使用了名为 <my-app> 的元素，这是应用的根的占位，Angular 将在这里显示我们的应用。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。