5分钟快速入门angular2.0

时间 2019-11-30

标签 5分快速入门 angular2.0 angular 栏目 AngularJS 繁體版

原文原文链接

　　让咱们从零开始，在JavaScript中创建一个超级简单的角angular2.0的应用。css

请看demohtml

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 QuickStart JS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
    <!-- IE required polyfill -->
    <script src="https://npmcdn.com/core-js/client/shim.min.js"></script>

    <script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
    <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>

    <script src="https://npmcdn.com/rxjs@5.0.0-beta.6/bundles/Rx.umd.js"></script>
    <script src="https://npmcdn.com/@angular/core/bundles/core.umd.js"></script>
    <script src="https://npmcdn.com/@angular/common/bundles/common.umd.js"></script>
    <script src="https://npmcdn.com/@angular/compiler/bundles/compiler.umd.js"></script>
    <script src="https://npmcdn.com/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
    <script src="https://npmcdn.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>

    <!-- 2. Load our 'modules' -->
    <script src='app/app.component.js'></script>
    <script src='app/app.module.js'></script>
    <script src='app/main.js'></script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>


<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

让咱们从 0 开始建立一个简单的 Angular 2 应用。node

下载任何版本的 angularjs, 访问：https://code.angularjs.org/angularjs

不想用 JavsScript 语言？npm

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

咱们将用 6 步完成bootstrap

1. 建立项目文件夹浏览器

2. 安装基础库服务器

3. 建立应用组件angular2

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 来中止它。

祝贺你，咱们完成了！

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

转载来自: http://www.cnblogs.com/haogj/p/5023652.html