Angular2入门教程-1
2019独角兽企业重金招聘Python工程师标准>>>
Angular2入门教程-1
今天,Angular2终于正式发布了2.0.0的正式版,所以已经可以开始正式使用了。
Angular2介绍
首先,Angular2跟Angular1.x版本没有多大关系,虽然2沿用了版本1的一些概念,像directive, model, service, router, dependency injection等, 但是很多用法和原理都已经不是那么一回事了。Angular2有如下一些特性:
模块化
- 在Angular2开发中,所有的系统功能都是模块化的,你只需要导入需要的部分。用Angular2开发的应用也是模块化的,一个模块、一个功能、甚至页面上的一个标签都是组件。
- 模块化带来的最大的好处就是按需加载,这就大大提高了APP的启动时的性能,也使得需要下载的代码比较小,因为不需要的模块可以不用导入。按照Angular官方的说法,使用Angular2的
hello world
的实例创建的App,在做完代码压缩合并以后,下载的代码在50K以内。 - 模块化也给开发带来方便,使得协作开发、代码合并等都非常方便。
使用TypeScript
- TypeScript是Javascript的超集,TypeScript的代码会被编译成Javascript的代码再执行。所以,如果有任何的语法或其他错误,就可以在编译的时候及时发现。而这个编译的过程可以通过工具自动执行,这样就可以在你写完某一段代码的时候就发现其中的错误。
- TypeScript的静态类型的,所以,我们就可以通过一些工具来实现像JAVA这样的强类型语言才会有自动补全、重构、代码查找等功能。虽然说像Webstorm这样的工具对于javascript也能提供自动代码补全之类的功能,但是他是通过检索代码里面的所有关键字,然后匹配关键字去补全,而不是通过语言自身的特性。
- TypeScript具有面向对象语言的一些特性,如抽象和继承、命名空间、包等。以抽象和继承为例,虽然用js也可以实现类和类的继承关系,但是使用TypeScript我们可以直接使用
interface
,implements
这样的语法来实现,这使得代码结构更清晰、更易读。
更容易
- 好吧,这只是官方的说法,要说容易也要看从什么方面来说。如果学过Angular1,你们可能知道,1非常容易上手,有一点js基础的人,几天就能学会并开始开发。如果再有一点MVC的背景或知识,就更容易了。但是2就不一样,一开始学习成本比较高,首先是因为TypeScript的语法,模块化的开发,对于没有多少开发经验的人来说,理解和上手都有一定困难。但是一旦上手以后,之后的开发和学习就比较容易了。不像Angular1,一开始的学习曲线很平缓,很容易上手,但是真正开始开发一个比较复杂的应用的时候,就会发现有很多问题,需要理解他的背后的原理,像双向绑定、模板、路由等。这时候的学习曲线就会变得很陡。
- Angular2是一个完整的前端开发框架,利用Angular2提供的功能和模块,你可以开发一个完整的应用。但是如果你用React,你还需要整合很多其他的库来实现某些方面的功能,这样就会面临很多选择,Redux, Flux, React-router, axios…
- 前面提到Angular2使用TypeScript,这也给开发带来很多便利,使得代码更易读、容易维护。
Angular2开发
在这篇文章里,我们通过一个完整的实例(一个Todolist的App),来了解一个Angular2的应用的开发的大致的方法或过程。这会分成2部分,第一部分先介绍我们使用的Angular2项目的模板,通过这个模板介绍Angular2项目的基本框架和配置。在第二部分里,再具体的开发具体的业务模块。
获取项目模板
我创建了一个Angular2的项目模板,这是根据官方提供的教程创建,已经配置好项目的基本配置和typescript,还提供了live-reload的功能,也就是当某一个文件修改的时候,就会刷新页面,如果修改的文件是typescript的.ts
文件,就会先编译再刷新页面。使用git将项目clone
到你的指定目录中就可以开始使用了:
1 |
git clone --depth 1 https://github.com/Mavlarn/angular2-basic |
然后进入项目目录里面,安装依赖包:
1 2 |
cd angular2-basic npm install |
npm install
除了安装项目的依赖包,最后还会运行typings install
,如果你运行完npm install
发现’typings’目录没有创建,就需要运行这个命令去手动安装:
1 |
npm run typings -- install |
然后就可以运行了:
1 |
npm start |
启动成功以后,就会自动打开浏览器并打开url:http://localhost:3000/ ,应该看到下面的页面:
项目结构和文件
先来看看项目模板里面的文件,以及他们都是做什么的:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
. ├── app │ ├── about │ │ ├── about.component.html │ │ ├── about.component.ts │ │ └── about.routes.ts │ ├── example │ │ ├── example.component.html │ │ ├── example.component.ts │ │ └── example.routes.ts │ ├── app.component.css │ ├── app.component.html │ ├── app.component.ts │ ├── app.module.ts │ ├── app.routes.ts │ └── main.ts ├── build ├── index.html ├── package.json ├── styles.css ├── systemjs.config.js ├── tsconfig.json ├── typings │ ├── globals │ └── index.d.ts └── typings.json |
下面是项目环境相关的文件:
package.json
这是项目的基本定义文件,所有的基于nodejs的项目都会有一个package.json文件,里面会定义项目名称、版本、依赖的库,以及脚本。脚本里面定义了几个可以使用npm
运行的脚本,例如:
- “start”: “tsc && concurrently \”npm run tsc:w\” \”npm run lite\” “
用于启动测试服务器,启动的过程中执行了编译、检测文件修改、启动服务器等任务。 - “postinstall”: “typings install”
用于在npm install
完成以后执行,下载TypeScript类型定义文件。 - “tsc:w”: “tsc -w”
编译TypeScript文件,并且是以’watch’模式启动,也就是检测文件修改,如果有TypeScript文件被修改,自动执行编译过程。
typings.json
TypeScript类型定义文件,定义了项目用到的TypeScript类,用于编译、代码补全等。
typings文件夹
运行typings install
以后,TypeScript会根据typings.json文件里面的定义,下载需要的类型定义文件,下载的TypeScript类文件会保存在这里。
tsconfig.json
TypeScript的配置文件,在编译TypeScript文件的时候,会根据这个配置进行编译。
systemjs.config.js
SystemJS的配置文件。Angular2使用SystemJS来实现动态加载,它设置每个模块所在的位置,例如,我们的app
,是从build
目录中加载,加载的文件是main.js
。还有,angular模块,也就是@angular
,是从node_modules/@angular
里加载。如果我们的App以后要使用其他第三方的库,就需要在这里添加,才能够成功加载。
下面,我们再来看看App相关的文件。
index.html
App的index文件,里面已经添加了需要的js、css文件,然后通过SystemJS加载app。该文件里面的:
1 |
<root-app>Loading...</root-app> |
定义了加载App的html组件’root-app’。
styles.css
全局的样式定义。注意每个组件使用的样式不是在这里面。
app/main.ts
Angular2的App初始化文件。每一个Angular2的App都是通过这个文件被加载的。
1 2 3 4 |
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule); |
它首先从@angular/platform-browser-dynamic
里引入了platformBrowserDynamic
,从他的名字可以看出,它根据当前的运行环境,如操作系统、浏览器,来初始化一个运行环境,然后从这个环境里面运行AppModule
。
app/app.module.ts
这个文件定义了我们的App,它是一个Angular模块。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouterModule } from '@angular/router'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { AboutComponent } from './about/about.component'; import { ExampleComponent } from './example/example.component'; import { routes } from './app.routes'; @NgModule({ imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes)], declarations: [AppComponent, AboutComponent, ExampleComponent], bootstrap: [AppComponent] }) export class AppModule {} |
首先它引入了几个Angular2
的模块,我们需要使用RouterModule
里面定义的路由,如果有表单,需要引入FormsModule
。
接下来的几个,就是引入了这个模板项目里面提供的几个组件,其中AppComponent
是App的主加载模块, AboutComponent
和ExampleComponent
组件是两个提供的实例。routes
是定义的路由。
接下来再看App模块的定义:
1 2 3 4 5 6 |
@NgModule({ imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes)], declarations: [AppComponent, AboutComponent, ExampleComponent], bootstrap: [AppComponent] }) export class AppModule {} |
它使用NgModule
标签定义了一个模块,我们需要导入的模块和路由、定义的组件,启动app使用的组件,都在这里面定义。
- app/app.routes.ts
这个是app的路由定义。1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Routes } from '@angular/router';
import { AboutRoutes } from './about/about.routes';
import { ExampleRoutes } from './example/example.routes';
export const routes: Routes = [
{
path: '',
redirectTo: '/example',
pathMatch: 'full'
},
...AboutRoutes,
...ExampleRoutes
];
他首先从@angular/router
里面引入Routes
类,并根据这个定义app的路由。在这个路由里面,我们定义了一个默认路由,当你的path为空时重定向到’example’:
1 |
{ path: '', redirectTo: '/example', pathMatch: 'full'} |
也就是当打开urlhttp://localhost:3000
的时候,自动重定向到’example’,也就是http://localhost:3000/example
。
同时,它还从两个实例的组件about
和example
里面引入他的路由定义文件,并把它们合并到app的路由定义数组里面。
注意这里的...
语法,这是列表的合并的语法,意思是,我在定义一个Routes的数组的同时,把AboutRoutes
这个数组也合并到当前的数组里面。
app/app.component.*
在上面的AppModule
的定义里,我们定义了我们的app,并且定义了AppComponent
是加载模块。下面就来看看这个组件是怎么定义的。这里有3个文件,分别为’ts’, ‘css’和’html’,这也是一般一个简单的组件包含的3个部分。其中app.component.ts
是组件定义的类:
1 2 3 4 5 6 7 8 |
import { Component } from '@angular/core'; @Component({ selector: 'root-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'] }) export class AppComponent {} |
这里,我们使用一个Component
标签来定义一个组件,里面有3个属性:
- selector,就是这个组件在它的上一级html页面里面要填充进那个element里。由于这个是我们的APP的主模块,它的上一级html页面也就是index.html。在上面的index页面中,提到
<root-app>Loading...</root-app>
,这个’root-app’就是’selector’里面的这个值。当这个AppComponent加载成功以后,这个组件的html内容就会替换index页面的<root-app>
。 - templateUrl
这个属性设置了这个组件使用的html模板。对于简单的页面的话,也可以使用template
来定义一个html的字符串作为模板。下面是这个模板的内容:1
2
3
4
5
6
7
8
9
10
11
12
13
<header>
<section>
<h2>First Angular 2 App</h2>
<p>Greate! My first angular 2 app works!</p>
</section>
<nav>
<ul>
<li><a routerLink='/about'>About</a></li>
<li><a routerLink='/example'>Example</a></li>
</ul>
</nav>
</header>
<router-outlet></router-outlet>
上面的页面其实就是我们的app里面的主页面,上面header的部分就是app的头,有2个导航的链接,分别链接到模板里面提供的2个实例组件(注意链接用的是routerLink='/about'
的方式,而不是’html’的’href’的方式。)。下面就是router-outlet
定义的一个空的element,Angular2会根据路由定义将当前路径所对应的页面内容放在这个element下面。
- styleUrls
顾名思义,这个就是样式的定义文件的路径。同样,我们也可以使用style
来在这个文件内定义样式。我们多次提到Angular2是组件化的,组件之间应该是不会相互影响,首先就是定义的样式不会相互影响。在这个app.component.css
文件中,我们定义了app.component.html
需要的样式:1
2
3
4
5
6
7
8
header section {
display: inline-block;
width: 80%;
}
header nav {
width: 20%;
float: right;
}
我们不需要担心在整个app的其他组件里面,也会有其他的html element会被header section
这样的样式影响,这个样式只会在这个组件内有效。
app/example/ 和 app/about/
这是一个实例组件,里面有ts, html, css。这几个文件的功能和说明跟上面’app.component’里的定义类似。有一点区别的就是example.routes.ts
文件:
1 2 3 4 5 6 7 8 9 |
import { Route } from '@angular/router'; import { ExampleComponent } from './example.component'; export const ExampleRoutes: Route[] = [ { path: 'example', component: ExampleComponent } ]; |
这个路由定义引入的是Route
, 而不是之前的Routes
,区别是我们在app模块的路由定义里面合并每个模块的路由定义。
到现在为止,我们介绍了一个Angular2的项目所包含的配置和代码,了解了上面介绍的项目环境以后,就可以再进一步使用gulp或者webpack来创建项目构建的环境。如不同的运行环境下的自动配置,如开发环境、测试环境和生产环境。还有代码的混淆、压缩、合并等,都可以通过添加一个任务来完成。
熟悉了上面的代码以后,我们就可以来实现自己的业务逻辑,也就是添加一些组件,把这些组件加到AppModule
里,使用第三方的jsku等。在这个教程的第二部分里,我们会介绍怎么开发新的组件,来完成一个App。
转载于:https://my.oschina.net/martin123/blog/776673
Angular2入门教程-1相关推荐
- Angular2 入门教程
一. 入门 1.初识Angular2 硬知识:Angular2与Angular的区别 (1)依赖加载:Angular1是依赖前置,angular2是按需加载 (2)数据绑定: Angular1 在启动 ...
- 【前端】Angular8入门教程笔记+Angular material安装与使用
一. Angular介绍 Angular是谷歌开发的一款开源的web前端框架,诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Goo ...
- Kafka入门教程与详解
1 Kafka入门教程 1.1 消息队列(Message Queue) Message Queue消息传送系统提供传送服务.消息传送依赖于大量支持组件,这些组件负责处理连接服务.消息的路由和传送.持久 ...
- 【CV】Pytorch一小时入门教程-代码详解
目录 一.关键部分代码分解 1.定义网络 2.损失函数(代价函数) 3.更新权值 二.训练完整的分类器 1.数据处理 2. 训练模型(代码详解) CPU训练 GPU训练 CPU版本与GPU版本代码区别 ...
- python tornado教程_Tornado 简单入门教程(零)——准备工作
前言: 这两天在学着用Python + Tornado +MongoDB来做Web开发(哈哈哈这个词好高端).学的过程中查阅了无数资料,也收获了一些经验,所以希望总结出一份简易入门教程供初学者参考.完 ...
- python向量计算库教程_NumPy库入门教程:基础知识总结
原标题:NumPy库入门教程:基础知识总结 视学算法 | 作者 知乎专栏 | 来源 numpy可以说是 Python运用于人工智能和科学计算的一个重要基础,近段时间恰好学习了numpy,pandas, ...
- mysql query browswer_MySQL数据库新特性之存储过程入门教程
MySQL数据库新特性之存储过程入门教程 在MySQL 5中,终于引入了存储过程这一新特性,这将大大增强MYSQL的数据库处理能力.在本文中将指导读者快速掌握MySQL 5的存储过程的基本知识,带领用 ...
- python tensorflow教程_TensorFlow入门教程TensorFlow 基本使用T
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 TensorFlow入门教程 TensorFlow 基本使用 TensorFlow官方中文教程 TensorFlow 的特点: 使用图 (graph) 来 ...
- air调用java,AIR2.0入门教程:与Java应用交互
在之前的一篇文章中,我介绍了如何使用AIR2.0新增的NativeProcess类与本地进程进行交互和通讯,在那个例子里面我们使用了C++ 的代码,实际上只要是基于命令行的标准输入输出,AIR2.0的 ...
最新文章
- java 办公,中文JAVA技术网
- Introductionto.NETcracking
- python日历下拉框_Python版的农历日历Calendar,功能简单
- 人工智能取代医生AI画出鼻咽癌放疗靶区,准确性与医生相当
- 云拨测助力节卡机器人 全面优化海外网站性能
- Intellij idea的Dependencies波浪线
- 《分布式系统:概念与设计》一2.3.2 体系结构模式
- pe下找不到ssd硬盘_【进入pe系统后认不到硬盘解决方法】进入pe系统看不到硬盘_pe系统不认硬盘...
- C#和其它C语言的区别
- python发送邮箱_你知道怎么用Python发送邮件吗?
- lm opencv 算法_相机模型与标定(七)--LM算法在相机标定中的使用
- 使用jedis访问redis
- 开发者如何区分 5G 和 LTE 技术?
- python学了有什么用-让孩子学了Python编程有什么用
- VS Code 调试 Angular 和 TypeScript 的配置
- 多处理器系统下的伪共享(false sharing)问题
- 中国气象数据网的.nc数据批量下载(Python代码)
- 如何将硬盘数据迁移包括系统一起迁移到另一个硬盘?
- 关于Android手机拍照预览、剪裁界面出现照片九十度旋转的问题
- 简单融合双系统 苹果虚拟Win8实用技巧