美文网首页我爱编程
Angular2 QUICKSTART 学习笔记

Angular2 QUICKSTART 学习笔记

作者: escawn | 来源:发表于2016-05-04 15:07 被阅读812次

官网地址:https://angular.io/docs/ts/latest/quickstart.html

环境

1. package.json
{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.0",
    "@angular/compiler":  "2.0.0-rc.0",
    "@angular/core":  "2.0.0-rc.0",
    "@angular/http":  "2.0.0-rc.0",
    "@angular/platform-browser":  "2.0.0-rc.0",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.0",
    "@angular/router-deprecated":  "2.0.0-rc.0",
    "@angular/upgrade":  "2.0.0-rc.0",

    "systemjs": "0.19.27",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",

    "angular2-in-memory-web-api": "0.0.5",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^0.8.1"
  }
}

npm:Node Packaged Modules的简称
package.json:定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。

2. tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

这个文件用来指导Typescript进行编译。
angular2使用Typescript进行开发,虽然也有Javascript的开发方式(官网有指导说明),但是要复杂得多。

3. typings.json
{
  "ambientDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438"
  }
}

有很多Javascript的库,继承了一些 Javascript的环境变量以及语法, Typescript编译器并不能原生的支持这些。 所以我们使用 Typescript 类型定义文件 - d.ts文件 (即 <code>typings.json</code>) 来解决这些兼容性问题
<br />
将以上三个文件,放置到项目文件夹的根目录下,终端定位到项目文件夹,输入npm install,环境就配好啦。


文件

1. app.component.ts

在app目录下新建组件文件app.component.ts

import {Component} from '@angular/core';

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

(1)Angular应用是模块化的。 他们包含很多文件,每一个文件专注于完成一项功能。大多数程序文件会export出一个组件。 我们的 app.component.ts 文件 exports出了 AppComponent这个组件。

(2)exports使一个文件转变成一个模块。 文件名(不包含扩展名)通常就是这个模块的名称。 所以, app.component 就是我们的第一个模块的名称。

export class AppComponent { }

(3)组件之间相互调用,如果一个组件依赖于其他组件,则用<code>import</code>导入
<pre><code>import {AppComponent} from './app.component'</code></pre>

import {Component} from 'angular2/core';

Angular同样是一个模块, 他是一系列模块的集合。使用Component组件中的函数定义需要导入Angular的核心包。

(4)

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

<code>@Component</code>表示该类是一个组件类。传递给<code>@Component</code>的是两个字段,一个<code>selector</code>,一个<code>template</code>。
<code>selector</code>是一个 css 选择器, 这里表示选择 html 标签为 <code>my-app</code>的元素。Angular 将会在这个元素里面展示AppComponent 组件。
的实例。
<code>template</code>控制这个组件的视图, 告诉Angular怎么去渲染这个视图。
<br />

2. main.ts
import {bootstrap}    from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

<code>bootstrap</code>是Angular自带的方法,我们导入它,并且将AppComponent传给它,用来启动AppComponent组件。
<br />

3. index.html
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err);  });
    </script>
  </head>

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

(1)前面添加了许多js的依赖库
(2)配置了 System 并让他import 引入 main 文件
(3)添加 my-app 这个HTML元素
<br />
所以运行过程为:
当Angular调用main.ts文件中的 bootstrap方法, 它读取 AppComponent,找到 my-app 这个HTML元素, 并将template 渲染进去。
启动:在项目文件目录下,运行npm start.
程序将会将Typescript编译成 Javascript ,同时启动一个 lite-server, 加载我们编写的index.html。 显示 My First Angular 2 App.


相关文章

  • Angular2 QUICKSTART 学习笔记

    官网地址:https://angular.io/docs/ts/latest/quickstart.html 环境...

  • spark_learn

    Angular2学习笔记——NgModule es6 新增的map和foreach AngularJS2.0 学习...

  • angular2学习笔记

    demo设计原则: 用vscode编辑器。 构建原型图原型,想好逻辑。 围绕所学的内容。 ts文件和class的命...

  • 学习Angular2系列(1)----配置

    引子: 这是关于Angular2框架的学习记录笔记。秉着”学于网络,归于网络“的精神将学习过程记录下来,供后来者以...

  • Angular参考资料收集

    1 、Angular2文档学习的知识点摘要——Angular模块(NgModule) 2、Angular2父子组件...

  • 来一波angular2概念

    Angular2学习之: angular2官方将框架按以下结构划分: Module(模块) 组件、方法、类、服务等...

  • 20190824 课堂笔记

    20190824 课堂笔记 设置快捷键 设置编译 创建项目 选择quickstart GAV设置 项目设置 修改 ...

  • angular2的学习笔记(一)——初识angular2

    这个是我自己在学习angular2中的一些学习笔记,其中夹杂了很多个人观点,如果有不正确的地方,欢迎大家来指正! ...

  • Angular2学习笔记——环境

    从去年8月份开始用入坑Angular2的,那时候还是rc4版本,后来终于有了一个稳定点的final!!!不用整天担...

  • Kafka学习(一)-------- Quickstart

    参考官网:http://kafka.apache.org/quickstart 一、下载Kafka 官网下载地址 ...

网友评论

    本文标题:Angular2 QUICKSTART 学习笔记

    本文链接:https://www.haomeiwen.com/subject/wmerrttx.html