码迷,mamicode.com
首页 > 其他好文 > 详细

Angular 2 - 5 分钟快速入门

时间:2015-12-07 00:06:39      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:

原文地址: https://angular.io/docs/ts/latest/quickstart.html

让我们从 0 开始创建一个简单的 Angular 2 应用。

不想用 JavsScript 语言?

虽然我们这里使用 JavaScript, 你也可以使用 TypeScript,或者 Dart 来开发 Angular 2 应用。

我们将用 6 步完成

1. 创建项目文件夹

2. 安装基础库

3. 创建应用组件

4. 启动应用

5. 创建 index.html

6. 运行

 

1. 创建项目文件夹

创建一个新的文件夹来保存你的项目,应该类似下面的样子。

mkdir angular2-quickstart
cd    angular2-quickstart

 

2. 安装基础库

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

angular2 - Angular 2 库

live-server - 一个静态文件服务器,可以在修改文件之后,自动重新加载到浏览器中。

我们既可以直接引用 Web 上的库,也可以下载项目中。

还没有安装 NPM?赶紧安装它,我们在这里将会不断使用这个工具。

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

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

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

{
  "name": "angular2-getting-started",
  "version": "1.0.0",
  "dependencies": {
    "angular2": "2.0.0-alpha.44"
  },
  "devDependencies": {
    "live-server": "^0.8.1"
  }
}

 

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

 

"scripts": {
    "start": "live-server"
  }

 

 我们使用它来扩展项目,以便运行脚本命令,很快就会用到。

3. 第一个 Angular Component

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

var AppComponent = ng
  .Component({
    selector: ‘my-app‘,
    template: ‘<h1>My First Angular 2 App</h1>‘
  })
  .Class({
    constructor: function () { }
  });

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

var AppComponent = ng
    .Component({...})
    .Class({...})

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

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

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

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

4. 启动应用

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

document.addEventListener(‘DOMContentLoaded‘, function() {
  ng.bootstrap(AppComponent);
});

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

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

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

 Wrapped in an IIFE

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

(function() {
var AppComponent = ng
  .Component({
    selector: ‘my-app‘,
    template: ‘<h1>My First Angular 2 App</h1>‘
  })
  .Class({
    constructor: function () { }
  });
document.addEventListener(‘DOMContentLoaded‘, function() {
  ng.bootstrap(AppComponent);
});
})();

 

 5. 创建 index.html

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

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <script src="node_modules/angular2/bundles/angular2.sfx.dev.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <my-app></my-app>
  </body>
</html>

 

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

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

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

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

6. Run it!

我们需要一个文件服务器来服务静态资源。

对这个示例来说,我们这里使用通过 npm 安装的 live-server,因为它默认就提供了动态加载。

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

npm start

还记得我们添加的 npm 命令吗?

live-server 自动帮我们启动浏览器,当我们更新文件的时候,还可以自动刷新页面。

稍等一下,浏览器就会显示出下面的内容。

技术分享

做一点修改

 live-server 自动检测项目文件的修改,并刷新浏览器。

将项目的信息修改为 "My Second Angular 2 app.", live-server 会检测到修改自动刷新显示。

保持 live-server 运行在终端窗口中,并进行更多的修改,可以使用 Ctrl-C 来停止它。

祝贺你,我们完成了!

 

Angular 2 - 5 分钟快速入门

标签:

原文地址:http://www.cnblogs.com/haogj/p/5023652.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!