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 相关文章推荐
Javascript处理DOM元素事件实现代码
May 23 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
Vue实现跑马灯效果
May 25 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
php实现购物车功能(上)
2020/07/23 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
php session的应用详细介绍
2017/03/22 PHP
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
python中as用法实例分析
2015/04/30 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
python通过实例讲解反射机制
2019/10/17 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
python 操作excel表格的方法
2020/12/05 Python
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
工程测量与监理专业应届生求职信
2013/11/27 职场文书
材料采购员岗位职责
2013/12/17 职场文书
医药代表个人求职信范本
2013/12/19 职场文书
敬老院活动总结
2014/04/28 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
打架检讨书
2015/01/27 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
Python中22个万用公式的小结
2021/07/21 Python