AngularJS2.0 学习笔记–5分钟建成第一个APP

2016年09月13日 javascript 暂无评论 阅读 178 views 次

1.安装好 npm nodejs等包管理工具。

2.创建一个项目

我们需要一个应用程序项目文件夹,用来放一些库,一些TypeScript 的配置和所选的TypeScript-aware编辑器。

创建一个项目 angular2-quickstart

在磁盘下面创建一个目录:angular2-quickstart。将附件中的文件拷进这个目录 。

3.运行npm install

4.运行npm start

点此下载附件。angular2-quickstart

看,第一个APP跑起来了。

 

简单说明 :

 

package.json

定义包的信息。

{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",

此处开启服务,跑APP
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"
}
}

 

tsconfig.json定义 模块

 

{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}

boot.ts

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

 

boot.ts  生成了。boot.js

boot.js

将AppComponent组件,置于browser_1.bootstrapp之中.

 

System.register(['angular2/platform/browser', './app.component'], function(exports_1, context_1) {
"use strict";
var __moduleName = context_1 && context_1.id;
var browser_1, app_component_1;
return {
setters:[
function (browser_1_1) {
browser_1 = browser_1_1;
},
function (app_component_1_1) {
app_component_1 = app_component_1_1;
}],
execute: function() {
browser_1.bootstrap(app_component_1.AppComponent);
}
}
});

2016-09-13_110849

 

 

简单组件开发

在项目根目录下面建立一个app目录 ,便于存放源代码。 在app下面增加一个组件文件 app.component.ts文件内容如下:

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

看一下这个文件的细节,底部的代码说明我们定义一个类:AppComponent 。这个类里面什么也没有。这只是一个空类,当构建具体的应用程序的时候,再追加需要的配置或者逻辑代码,暂且什么也不做。

Module

Angular App 都是Module ,它们包括许多文件,每个专注于一个功能。

大多数应用程序文件导出来是一个组件。我们这个导出来是AppComponent 组件。

导出过程中是将文件转换成一个模块,文件的名字通常是模块的名字。 所以app.component 是一个模块。

复杂的应用程序中需要更多的组件,这些组件继承自AppComponent组件·。组件之间相互调用,当需要某个组件的时候 我们需要import这个组件 例如:

import {AppComponent} from './app.component'

组件中元数据

Angular组件类中给了许多元数据。Angular需要元数据来了解如何构建视图,以及如何与应用程序的其他部分的组件进行交互。

使用Component组件中的函数定义其他组件中的元数据并且需要导入Angular的核心包

import {Component} from 'angular2/core';

在TypeScript中,调用组件类Component里面的函数使用 @ 前缀修饰,并在组件类前面调用。例如如下的代码

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})

@Component表示该类是一个组件类。传递给@Component的配置是两个字段,一个selector,一个template

selector制定了在Html元素上使用my-app,无论在哪个HTML元素上,Angular都会创建并运行一个AppComponent的实例。

template 告诉Angular使用什么Html模板渲染页面。

下面会告诉你如何调用上面的AppComponent组件。

在app目录下面增加一个boot.ts的文件,文件内容如下:

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

boot.ts是用来运行这个组件的,需要两步来运行

1.导入 bootstrap 函数

2.导入我们刚才定义的AppComponent组件

调用 bootstrap 函数, 并传人主组件 AppComponent

在项目根目录angular2-quickstart下面创建一个index.html文件。内容如下

<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

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

</html>

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.  

用户登录

分享到: