Node & Angular 4 学习记录(二)-- Angular 4

Node & Angular 4 学习记录(二)-- Angular 4

    前一篇我们记录了Node和相关使用,本篇我们记录一下Angular 4。说到Angular 4我还是存了一些怨念的,因为它和Angular.js的1.x版本差别太大,可以说已经不是一个东西了,不过好在好的东西都留了下来,是一个好的方向的提升。写Angular 4官方更希望我们用TypeScript来写一个Angular App,而我也是这样做的。

    Angular 是一个用 HTML 和 JavaScript 或者一个可以编译成 JavaScript 的语言(例如 Dart 或者 TypeScript ),来构建客户端应用的框架。该框架包括一系列库,有些是核心库,有些是可选库。我们是这样写 Angular 应用的:用 Angular 扩展语法编写 HTML 模板, 用组件类管理这些模板,用服务添加应用逻辑, 用模块打包发布组件与服务。然后,我们通过引导根模块来启动该应用。 Angular 在浏览器中接管、展现应用的内容,并根据我们提供的操作指令响应用户的交互。

    下面介绍一下Angular的八个主要构造块和其他特性模块

  • 模块:Angular 应用是模块化的,并且 Angular 有自己的模块系统,它被称为 Angular 模块或 NgModules。
  • 组件:组件负责控制屏幕上的一小块区域,我们称之为视图。
  • 模板:我们通过组件的自带的模板来定义组件视图。模板以 HTML 形式存在,告诉 Angular 如何渲染组件。
  • 元数据:元数据告诉 Angular 如何处理一个类。
  • 数据绑定:Angular支持单向和双向数据绑定。
  • 指令:Angular 模板是动态的。当 Angular 渲染它们时,它会根据指令提供的操作对 DOM 进行转换。
  • 服务:服务是一个广义范畴,包括:值、函数,或应用所需的特性。几乎任何东西都是一个服务,它应该做一件特定的事情并把它做好。
  • 依赖注入:“依赖注入”是提供类的新实例的一种方式,还负责处理好类所需的全部依赖。大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。
  • 动画:用 Angular 的动画库让组件动起来,而不需要对动画技术或 CSS 有深入的了解。
  • 变更检测:变更检测文档会告诉你 Angular 是如何决定组件的属性值变化,什么时候该更新到屏幕, 以及它是如何利用区域 (zone) 来拦截异步活动并执行变更检测策略。
  • 事件:事件文档会告诉你如何使用组件和服务触发支持发布和订阅的事件。
  • 表单:通过基于 HTML 的验证和脏检查机制支持复杂的数据输入场景。
  • HTTP:通过 HTTP 客户端,可以与服务器通讯,以获得数据、保存数据和触发服务端动作。
  • 生命周期钩子:通过实现生命周期钩子接口,可以切入组件生命中的几个关键点:从创建到销毁。
  • 管道:在模板中使用管道转换成用于显示的值,以增强用户体验。例如,currency管道表达式,它把价格“42.33”显示为$42.33:
    <pre>price | currency:'USD':true</pre>
  • 路由器:在应用程序客户端的页面间导航,并且不离开浏览器。
  • 测试:使用 Angular 测试平台,在你的应用部件与 Angular 框架交互时进行单元测试。

    这样我们大概就能了解Angular是一个什么样的前端框架,和我们已有的认识做一些对比,接下来我们还是来构建项目:

项目伊始

    同样我们可以使用Node来下载并构建Angular项目,也可以下载Git上相关的quickstart项目,当然IDE也能生成一个简单的quickstart项目,但这都不一定是你想要的,所以我们就来自己用命令构建一个Angular 4项目吧。再构建项目之前,我们还是要做一下技术选型,譬如我们要用什么UI模块,用什么做国际化,用什么做模块管理,用什么打包前端代码。首先我们要确定我们要使用的模块管理工具,Angular官网使用过的是SystemJS,我们这里采用angular-cli,版本号前文也有提到。angular-cli可以让我更简单的工作,生成文件,打包文件,启动一个简单的服务器供前端代码开发时候使用。angular-cli的打包其实就是封装了webpack,有对应的配置文件,也可以用命令导出webpack相应的配置文件。下面我们来构建一个项目:

// 安装angular-cli
$ npm install -g angular-cli
// 构建angular app
$ ng new mean-app
// 进入程序根目录
$ cd mean-app
// 可以启动跑起来啦
$ ng serve

接下来很多关于angular的技术就不一一赘述,文档都很清楚,和上篇一样说一点坑和参考文档吧。

  • 需要注意angular的跟模块很重要,每个 Angular 应用至少有一个模块(根模块),习惯上命名为AppModule。根模块在一些小型应用中可能是唯一的模块,大多数应用会有很多特性模块,每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。
  • 当应用很大的时候会有很多特性模块,用户没有必要再第一次访问就加载每一个特性模块,我们可以使用打包工具控制,也可以用angular的路由来控制特性模块的加载,使用异步路由惰性或者预加载模块。
  • 应用访问的安全性也可以使用angular的路由守卫,再进入这个路由页面前进行验证及授权。
  • 做纯前端部署的时候一定要设置baseUrl。
  • 目录一定要清楚规范,注重组件复用性。
  • http请求和跨域请求可以分别封装,angular.js的1.x版本使用的promise对象,angular 4推荐使用Observable
  • 官网推荐的国家化配置方式我并不喜欢,可能也是因人而异,我们采用的是自己写一个服务,之后注入到angular app
  • 有angular.js经验的一定看到差别,不能把angula.js的指令或者其他什么用到angular 4上
  • angular 4也有提供把angular.js慢慢过渡到angular 4的方式,不过。。。差别那么大,重写也不多废多少气力了。
  • angular
  • angular-cli
  • promise
  • RxJS & Observable
  • primeng(目前angular最大的组件库)
  • webpack
完成了angular程序我们是要部署到生产环境的,下一篇记录一下我们是如何部署的。
这里是上一篇
想写一些东西分享,欢迎转载,请注明出处。
简书-板凳儿儿
https://www.jianshu.com/p/6df6d1b9073c
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,681评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,710评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,623评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,202评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,232评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,368评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,795评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,461评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,647评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,476评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,525评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,226评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,785评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,857评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,090评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,647评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,215评论 2 341

推荐阅读更多精彩内容