angular2使用简单介绍

2024-08-01 23:01:17

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

先跑一个DEMO

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

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

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

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

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

配置我们的开发环境
编写 Angular 初始化组件
引导它控制我们主要的 index.html 页面
编写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

Angular2内置指令NgFor和NgIf详解

在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个可以运行起来的Angular2的样例程序,最好就是我们上一章节中完成的那个QuickStart小项目或者你自己根据官网上面的步骤完成的QuickStart小项目,因为我们的讲解都是在那个基础上来进行的;然后让我们开始下面的快乐旅程吧. 因为我们的这一系列的文章都是使用的TypeScript所以在看下面的内容之前你最好可以看一下TypeScript或者ES6的类,它们的网址分
最棒的Angular2表格控件

现在市面上有大量的JavaScript数据表格控件,包括开源的第三方的和自产自销的.可以说Wijmo的Flexgrid是目前适应Angular 2的最好的表格控件. Angular 2数据表格基本要求: 更小.更快.更熟悉. 为了使用Angular 2表格,首先你需要了解表格的基本要求.FlexGrid开始于1996年,当时使用C++为Visual Basic编写的控件.多年来,它不断进化并在多个平台得到完善,尤其是JavaScript平台.FlexGrid 因为Flex的理念而命名,控件应当包
Angular2表单自定义验证器的实现

本文主要给大家介绍如何判断验证器的结果.在这里,我们就来看看怎样实现一个自定义的验证器. 目标我们要实现一个验证手机号的验证器,使用的实例还是基于之前的文章里面的实例,也就是用户信息输入的表单页面.我们在手机号的元素上添加一个验证手机号的验证器.然后,如果手机号验证失败,就显示一个错误,页面如下: 这部分教程的代码可以从github获取: git clone https://github.com/Mavlarn/angular2-forms-tutorial 如果要运行,进入项目目录,运行下面
Angular2 环境配置详细介绍

看到angular发布正式版,心动不已准备测试下. 看着官网教程,使用了cli创建项目,在命令行中键入: 安装cli npm install -g angular-cli 如果安装过以前的版本,请执行以下命令,进行更新: npm uninstall -g angular-cli npm cache clean npm install -g angular-cli@latest 旧版本的cli使用的是SystemJS而最新的创建,是基于webpack构建. 旧版本的angular2(rc1-rc6
详解Angular2中的编程对象Observable

前言 RxJs提供的核心是Observable对象,它是一个使用可观察数据序列实现组合异步和事件编程. 跟这个很类似的异步编程模型是Promise,Promise是基于状态变化的异步模型,一旦由等待状态进入成功或失败状态便不能再次修改,当状态变化时订阅者只能够拿到一个值:而Observable是基于序列的异步编程模型,随着序列的变化,订阅者可以持续不断的获取新的值.而且Promise只提供回话机制,并没有更多的操作来支持对结果的复杂处理,而Observable提供了多种多样的操作符,来处理运算结
Angular2中Bootstrap界面库ng-bootstrap详解

准备 Angular 2 环境 ng-bootstrap 是基于 Angular 2 的, 因此需要先准备 Angular 2 的环境. 使用 ng-bootstrap 下载 ng-bootstrap ng-bootstrap 使用 bootstrap 4.0 alpha2 , 因此需要先下载 bootstrap , 推荐使用 npm 包的形式: npm install bootstrap@4.0.0-alpha.2 --save 接着下载 ng-bootstrap , 同样使用 npm 包的形
Angular2入门--架构总览

大致介绍在3月23日,Angular4正式发布(没有3).似乎现在学Angular2又晚了,又晚一步-_-||.Angular2在Angular1的基础上有了较大的改变.之前向一个同学(之前学过Angular1)问一个Angular2的问题,他反问到这是Angular代码? 可见Angular1->Angular2的变化有多大.先来看看Angular2的架构核心模块一个完整的Angular应用主要由六个重要部分组成:组件.模板.指令.服务.依赖注入和路由他们之间的关系: 从图中可以看出:
深入理解Angular2 模板语法

1. 说明 Angular2的模板用来显示组件外观,作为视图所用,用法和html语法基本一致,最简单的Angular2的模板就是一段html代码.Angular模板语法主要包括以下几个部分: l 直接绑定 l 插值表达 l 属性绑定 l 事件绑定 l 双向绑定 l 样式绑定 l 模板和 * l 局部变量首先来看一个模板例子,如下所示: import { Component, OnInit } from '@angular/core'; @Component({ selector: 'ui-de
Angular2 NgModule 模块详解

Angular的模块的目的是用来组织app的逻辑结构. 在ng中使用@NgModule修饰的class就被认为是一个ng module.NgModule可以管理模块内部的Components.Directives.Pipes,引入Service,并控制外部组件对内部成员的访问权限. angular2 具有了模块的概念,响应了后台程序的号召,高内聚低耦合.模块就是用来进行封装,进行高内聚低耦合的功能. 其实各人认为ng2 的模块和.net的工程类似,如果要使用模块中定义的功能,第一步就是必须
Angular2从搭建环境到开发步骤详解

Angular-CLI 说到 cli 大家不陌生,每出一个框架都会有对应的 cli ,俗称脚手架.angular2 本身提供了起步项目 angular2-quickstart,我尝试了一下,发现不是很好用,其它的大部分扩展需要自行安装,之后看了一下 angular-cli 部署简单易用,还提供了快捷搭建项目的目录. 安装首先,最好先升级 node 到 6.x 可以避免 node 版本过低带来的不必要的麻烦. npm install -g angular-cli 用法 ng --help 查看所

angular2使用简单介绍

相关推荐

随机推荐