Angular从零到一1.1 Angular 2简介

第1章

认识Angular

1.1 Angular 2简介


Angular 2 是Google推出的一个跨平台全终端的Web前端框架,使用Angular 2可以快速开发出适合手机、平板以及PC端的前端网页应用。它让开发人员可以采用组件化的方式来编写应用,像App开发一样。借助来自Ionic、NativeScript和React Native中的技术与思想,我们可以使用Angular 2构建原生移动应用。

从性能角度来看,Angular会把你的模板转换成代码,针对性地进行高度优化,轻松获得框架提供的高生产率,同时又能保留所有手写代码的优点。Angular应用通过新的组件路由(Router)模块实现快速加载,提供了自动拆分代码的功能,为用户单独加载所请求视图中需要的那部分代码。

官方还提供了命令行工具(也就是本书采用的Angular-CLI),屏蔽了大量配置细节,使得我们更专注于代码的开发,让开发人员快速进入构建环节、添加组件和测试,然后立即部署。

与目前比较火的React和Vue.js相比,Angular有如下优点:

由于Google的目的是推出一个完整解决方案,所以官方默认提供的类库(比如routing、HTTP、依赖性注入(DI)等)非常完整,无需自己选择。React的一大痛点就是选择太多导致在配置寻找组件和类库的过程中消耗太多精力,当然从另一方面看这也是其优势,选择众多且自由。

官方支持TypeScript(微软出品,也是JavaScript的超集,也是JavaScript的强类型版本)作为首选编程语言,使得开发脚本语言的一些问题可以更早更方便地找到。

RxJS友好使得响应式编程在Augular 2中变得极为容易(Google开发的框架依赖这么多微软的产品,可见微软的转型还是很成功的)。

支持NativeScript甚至ReactNative等进行原生Android/iOS应用开发(React支持React Native)。

支持服务器端渲染(React也支持)。

总体来讲,个人认为Angular 2更适合从原生App开发或后端Java/.Net等转型过来开发前端的程序员,因为它的开发模型更接近于传统强类型语言的模式,加上官方内建的组件和类库比较完整,有官方中文网站 https://angular.cn,学习曲线要低一些。有过Angular 1.x 开发经验的人要注意了,虽然只有一个版本号的差距,但2.x和1.x是完全不同的,不要奢望1.x的应用会平滑迁移到2.x上。

有趣的是,Angular团队内部在准备下一个版本,目前准备叫做Angular 4(只是计划哈),看起来太恐怖了,一下跳到Angular 4,那Angular 3怎么办,我还要不要学Angular 2。其实不用慌张,和前面的1.x到2.x的差距恰恰相反,这次只是版本号跳跃,框架却不会有太大差距,只是因为内部几个组件需要统一版本号,因此跳过了Angular 3。

所以呢,不要慌张,Angular 2和Angular 4不会有本质的差别。

Angular 支持大多数常用浏览器,参见表1.1。

表 1.1 Angular 2的浏览器兼容性

Chrome Firefox Edge IE Safari iOS Android IE Mobile

45以上 40以上 13以上 9以上 7以上 7以上 4.1以上 11以上

 

时间: 2024-09-24 05:51:32

Angular从零到一1.1 Angular 2简介的相关文章

《Angular从零到一》导读

本节书摘来自华章出版社<Angular从零到一>一书中作者Richard Banfield 著 易艺 译   前 言 一个大叔码农的Angular 2创世纪 作为一个出生于20世纪70年代的大叔,我在软件这个领域已经摸爬滚打了16年,从程序员.项目经理.产品经理,项目总监,到部门管理等各个角色都体验过,深深地了解到这个行业发展的速度之快是其他行业无法比拟的:从编程语言.各种平台.各种框架.设计模式到各类开源工具.组件林林总总,要学习的东西实在太多,因为变化太快. 但万变不离其宗,名词变化虽多,

Angular从零到一1.4 第一个组件

1.4 第一个组件 现在,为我们的App增加一个Component吧,在命令行窗口输入 ng generate component login --inline-template --inline-style . 顾名思义,参数generate是用来生成文件的,参数component是说明我们要生成一个组件,login是我们的组件名称,你可以自己想个其他有意思的名字.后面的两个参数是告诉angular-cli:生成组件时,请把组件的HTML模板和CSS样式和组件放在同一个文件中(其实分开文件更清

Angular从零到一1.3 第一个小应用 Hello Angular

1.3 第一个小应用 Hello Angular 那么现在开启一个terminal(命令行窗口),键入 ng new hello-angular ,你会看到以下的命令行输出. wangpengdeMacBook-Pro:~ wangpeng$ ng new hello-angular installing ng2   create .editorconfig   create README.md   create src/app/app.component.css   create src/ap

Angular从零到一3.1 建立routing的步骤

第3章 建立一个待办事项应用 这一章我们会建立一个更复杂的待办事项应用,当然,登录功能也还保留,这样应用就有了多个相对独立的功能模块.以往的Web应用根据不同的功能跳转到不同的功能页面.但目前前端的趋势是开发一个SPA(Single Page Application,单页应用),所以其实我们应该把这种跳转叫视图切换:根据不同的路径显示不同的组件.那我们怎么处理这种视图切换呢?幸运的是,我们无需寻找第三方组件,Angular官方内建了自己的路由模块.我们会在接下来的学习中逐渐了解这个路由是怎么使用

Angular从零到一2.2 建立一个服务完成业务逻辑

2.2 建立一个服务完成业务逻辑 如果我们把登录的业务逻辑在onClick方法中完成,这样当然也可以,但是这样做的耦合性太强了.设想一下,如果我们增加了微信登录.微博登录等,业务逻辑会越来越复杂,显然我们需要把这个业务逻辑分离出去. 那么我们接下来创建一个AuthService吧,首先我们要在在src中新建一个叫做core的文件夹(src\app\core),然后命令行中输入 ng g s core\auth (s这里是service的缩写,core).auth.service.ts和auth.

Angular从零到一1.5 一些基础概念

1.5 一些基础概念 有了前面的例子,就可以粗略介绍一些Angular的基础概念了,这些基础概念在后面的章节中会更详细地讲解. 1.5.1 元数据和装饰器 Angular中大量地使用了元数据.元数据是什么呢?元数据的定义是这样的:元数据是用来描述数据的数据. 天啊,这什么意思啊?没关系,我们来看一个例子,大家都在电脑上有文件浏览器,随便选择一个文件,我们可以右键选择这个文件的属性看一下,如图 1.6所示. 我们看到文件本身其实就是一个二进制格式的数据,而在文件的属性中我们又发现了对此数据的描述,

Angular从零到一2.5 验证结果的样式自定义

2.5 验证结果的样式自定义 如果我们在开发工具中查看网页源码,可以看到经过渲染后的控件HTML代码,如图 2.11所示.   图 2.11 验证的样式 用户名控件的HTML代码是下面的样子:在验证结果为false时input的样式是ng-invalid: <input   name="username"   class="ng-pristine ng-invalid ng-touched"   required=""   type=&qu

Angular从零到一1.2 环境配置要求

1.2 环境配置要求 Angular 2需要node.js和npm,我们下面的例子需要node.js 6.x.x和npm 3.x.x,请使用 node -v 和 npm -v 来检查,Mac 下建议采用brew安装node.由于众所周知的原因,http://npmjs.org 的站点访问经常不是很顺畅,这里给出一个由淘宝团队维护的国内镜像 http://npm.taobao.org/ .安装好node后,请输入npm config set registry https://registry.np

Angular从零到一1.6 引导过程

1.6 引导过程 Angular 2通过在main.ts中引导AppModule来启动应用.针对不同的平台,Angular提供了很多引导选项.下面的代码是通过即时(JiT)编译器动态引导,一般在进行开发调试时,默认采用这种方式: //main.ts import './polyfills.ts';   // 连同Angular编译器一起发布到浏览器 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'