angular2使用简单介绍


Posted in Javascript onMarch 01, 2016

让我们从零开始,使用Typescript构建一个超级简单的 AngularJs 2应用。

先跑一个DEMO

运行这个 DEMO先来感受一下 AngularJS2 的应用。

下面是这个应用的文件结构

angular2-app
|_ app
| |_ app.component.ts
| |_ main.ts
|_ index.html
|_ license.md

总结来说就是一个 index.html 文件和两个在 app 文件下的 Typescript 文件, 我们可以hold住!

下面我们将一步一步的构建这样的一个程序:

  1. 配置我们的开发环境
  2. 编写 Angular 初始化组件
  3. 引导它控制我们主要的 index.html 页面
  4. 编写index.html 页面

开发环境搭建

建立文件夹

mkdir angular2-app
cd  angular2-app

配置TYPESCRIPT

需要通过一些特殊的设置来指导Typesript进行编译。
新建一个 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"
 ]
}

我们稍后在附录中会详细讲解这个 tsconfig.json

TYPESCRIPT TYPINGS

有很多Javascript的库,继承了一些 Javascript的环境变量以及语法, Typescript编译器并不能原生的支持这些。 所以我们使用 Typescript 类型定义文件 ? d.ts 文件 (即 typings.json) 来解决这些兼容性问题。

创建 typings.json 文件,放于项目根目录下

{
 "ambientDependencies": {
  "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
 }
}

同样的,在附录中会有更详细点的解释

添加我们需要的库

我们推荐使用npm来管理我们的依赖库。
在项目根目录下创建package.json文件

{
 "name": "angular2-quickstart",
 "version": "1.0.0",
 "scripts": {
  "start": "concurrent /"npm run tsc:w/" /"npm run lite/" ",  
  "tsc": "tsc",
  "tsc:w": "tsc -w",
  "lite": "lite-server",
  "typings": "typings",
  "postinstall": "typings install" 
 },
 "license": "ISC",
 "dependencies": {
  "angular2": "2.0.0-beta.7",
  "systemjs": "0.19.22",
  "es6-promise": "^3.0.2",
  "es6-shim": "^0.33.3",
  "reflect-metadata": "0.1.2",
  "rxjs": "5.0.0-beta.2",
  "zone.js": "0.5.15"
 },
 "devDependencies": {
  "concurrently": "^2.0.0",
  "lite-server": "^2.1.0",
  "typescript": "^1.7.5",
  "typings":"^0.6.8"
 }
}

在附录中,会有更详细的解释

安装这些依赖包只需要运行

npm install

这样我们就完成了我们的开发环境的搭建。

第一个ANGULAR 组件

组件是Angular中最基本的一个概念。 一个组件包含一个视图 ? 我们用来展示信息或者完成用户交互的页面。 技术上来讲, 一个组件就是一个控制模板试图的类, 在开发应用中会写很多组件。 这是我们第一次尝试写一个组件,所以我们保证他尽可能的简单。

创建一个应用源码的子目录

我们习惯上将我们的程序放在项目根目录下的 app 子目录下,所以首先创建一个 app 文件夹

mkdir app
cd  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。 当我们真正开发应用的时候, 我们可以扩展这个类,比如添加一些属性和方法逻辑。 这个 AppComponent 类之所以为空是因为我们在入门程序中他不用做任何事情。

模块

Angular应用是模块化的。 他们包含很多完成某项功能的模块文件。
大多数程序文件会 export出一个东西比如一个组件。 我们的 app.component.ts 文件 exports出了 AppComponent

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

一些更复杂的应用会有继承于 AppComponent 的子组件, 而且会有很多文件和模块。但是我们的快速入门程序不需要这么多, 一个组件就够了。

如果一个组件依赖其他的组件, 在Typescript应用中, 当我们需要引入其他模块的时候,直接import进来就可以使用。 例如:

import {AppComponent} from './app.component'
Angular 同样是一个模块, 他是一系列模块的集合。 所以当我们需要angular的一些功能时,同样的把Angular引入进来。

组件注解

当我们给一个类加上注解的时候, 一个类就变成了 Angular的组件。 Angular 需要通过注解来搞明白怎么去构建视图, 还有组件是怎么与应用的其他部分进行整合的。

我们用 Componet 方法来定义一个组件的注解, 这个方法需要引入 angular2/core 才可以使用。

import {Component} from 'angular2/core';

在Typescript中,我们在类上面添加注解, 注解的方式很简单,使用 @ 作为前缀进行注解。

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

@Component 告诉Angular这个类是一个组件。 里面的参数有两个, selector 和 template.

selector参数是一个 css 选择器, 这里表示选择 html 标签为 my-app的元素。 Angular 将会在这个元素里面展示AppComponent 组件。

记住这个 my-app 元素,我们会在 index.html 中用到

template控制这个组件的视图, 告诉Angular怎么去渲染这个视图。 现在我们需要让 Angular去加载这个组件

初始化引导

在 app 文件夹下创建 main.ts

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

bootstrap(AppComponent);
我们需要做两个东西来启动这个应用

Angular自带的 bootstrap 方法

我们刚刚写好的启动组件

把这个两个统统 import进来,然后将组件传递给 bootstrap 方法。

附录中会详细讲解 为什么我们从 angular2/platform/browser中引入bootstrap 方法,还有为什么会创建一个main.ts文件

现在万事俱备,只差东风啦!

添加 INDEX.HTML 文件

首先回到项目的根目录,在根目录中创建index.html

<html>
 <head>
  <title>Angular 2 QuickStart</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">  

  <!-- 1. Load libraries -->
  <!-- IE required polyfills, in this exact order -->
  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

  <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/main')
      .then(null, console.error.bind(console));
  </script>

 </head>

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

</html>

HMTL中三个部分需要说明一下:

加载我们需要的 javascript库, 附录中会有详细的介绍

配置了 System 并让他import 引入 main 文件

添加 my-app 这个HTML元素,这里才是加载我们Angular实例的地方!

我们需要一些东西来加载应用的模块,这里我们使用 SystemJs。 这里有很多选择,SystemJS不一定是最好的选择,但是这个挺好用。

SystemJs的具体使用不在我们的快速入门教程里,在附录中会有一个剪短的说明。

当Angular调用main.ts文件中的 bootstrap方法, 它读取 AppComponent 的注解,找到 my-app 这个HTML元素, 并将template 渲染进去。

编译然后运行

只需要在终端中输入

npm start

程序将会将Typescript编译成 Javascript ,同事启动一个 lite-server, 加载我们编写的index.html。 显示 My First Angular 2 App.

最终的结构

|_ angular2-quickstart
|_ app
| |_ app.component.ts
| |_ main.ts
|_ node_modules …
|_ typings …
|_ index.html
|_ package.json
|_ tsconfig.json
|_ typings.json
Javascript 相关文章推荐
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
Javascript创建类和对象详解
May 31 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
详解JS函数防抖
Jun 05 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 #Javascript
Bootstrap每天必学之导航条(二)
Mar 01 #Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 #Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 #Javascript
JS实现图片平面旋转的方法
Mar 01 #Javascript
JS显示日历和天气的方法
Mar 01 #Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 #Javascript
You might like
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
PHP程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
教大家制作简单的php日历
2015/11/17 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
Python 多线程实例详解
2017/03/25 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
使用C++扩展Python的功能详解
2018/01/12 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
利用python开发app实战的方法
2019/07/09 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
用Python制作音乐海报
2021/01/26 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
yy生日主持词
2014/03/20 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
结婚纪念日感言
2015/08/01 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL