angular 订阅
Angular (通常是指 "Angular 2+" 或 "Angular v2 及更高版本")。是一个基于 TypeScript 的 开源 Web 应用框架, 由 Google 的 Angular 团队以及社区共同领导。Angular 是由 AngularJS 的同一个开发团队完全重写的。 展开全文
Angular (通常是指 "Angular 2+" 或 "Angular v2 及更高版本")。是一个基于 TypeScript 的 开源 Web 应用框架, 由 Google 的 Angular 团队以及社区共同领导。Angular 是由 AngularJS 的同一个开发团队完全重写的。
信息
外文名
Angular
别    名
Angular
中文名
Angular
广告历程
在设计上,Angular 是 AngularJS 的完全重写。最初,团队将这份 AngularJS 的重写版本称为 “Angular 2”,但这在开发人员之间引起了混乱。为了明确起见,该团队宣布应该为这两个框架分别使用各自的术语,其中 “AngularJS” 专指 1.X 版本,而不带 “JS” 的 “Angular” 则专指版本2及更高版本。在2014年10月22~23日的 ng-Europe 会议上发布了Angular 2.0。2.0 版的重大变化在开发人员之间引起了很大争议。 2015年4月30日,Angular 开发组宣布 Angular 2 从 Alpha 推进到 Developer Preview。 Angular 2 于2015年12月推进至 Beta 版, 并于 2016年5月发布了首个 rc 版本。其最终版本于2016年9月14日发布。2016年12月13日发布了 Angular 4,它跳过了版本号 3,以免由于路由模块的版本的未和其它模块对齐而造成混淆(路由模块在之前已经作为 v3.3.0 发布了)。 其最终版本于2017年3月23日发布。 Angular 4 向后兼容 Angular2。Angular 4.3 版是次要版本,这意味着它没有破坏性变更,是 4.xx 的直接替代品。版本 4.3 中的特性Angular 5 于2017年11月1日发布。 Angular 5 的主要改进包括对渐进式 Web 应用的支持、一个构建优化器,以及一些与 Material Design 相关的改进。Angular 6 于2018年5月4日发布。这是一个主版本,其改进重点不在于底层框架,而在于工具链,其目的是让工具链能在将来与 Angular 一起快速发展,改进点主要包括:ng update、ng add、Angular Elements、Angular Material + CDK 组件库、Angular Material 初学者组件、CLI 工作空间、库支持、服务提供商的摇树优化、动画性能改进,以及 RxJS v6。Angular 7 于2018年10月18日发布。其升级主要集中在 Angular Material & CDK、虚拟滚动、选择框在无障碍方面的改进、支持对符合 Web 标准的自定义元素进行内容投影,以及对 Typescript 3.1、RxJS 6.3、Node 10 (仍然支持 Node 8) 的依赖库更新。Angular 8 于2019年5月28日发布。特性包括:为所有应用代码进行差异化加载、针对惰性加载路由的动态导入、Web workers、支持 TypeScript 3.4,并且把 Angular Ivy 作为可选的预览特性。Angular Ivy 的可选预览特性包括:最值得期待的特性之一是 Ivy ,它是一个向后兼容的、基于增量式 DOM 架构的全新渲染引擎。Ivy 从设计之初就考虑到了摇树优化,这意味着应用的发布包中只会包含那些在应用中真正用到的 Angular 部件。可以预期,每一个版本都会向后兼容前一个版本。Google 承诺每年会进行两次升级。所有主版本都提供了 18 个月的支持。其中包括 6 个月的活跃支持,在此期间会定期发布更新和补丁。然后是12个月的长期支持(LTS),在此期间只会发布关键修复程序和安全补丁。
收起全文
精华内容
参与话题
问答
  • Angular 初学者快速上手教程

    万次阅读 多人点赞 2018-04-12 10:41:37
    本课程是一个系列基础教程,目标是带领读者上手实战,课程以新版本 Angular 的 3 个核心概念作为主线:组件、路由、模块,加上业务开发过程中必须用到的特性:工具、指令、表单、RxJS、i18n、测试,一共分为 9 部分...

    课程介绍

    本课程是一个系列基础教程,目标是带领读者上手实战,课程以新版本 Angular 的 3 个核心概念作为主线:组件、路由、模块,加上业务开发过程中必须用到的特性:工具、指令、表单、RxJS、i18n、测试,一共分为 9 部分,34 篇文章。

    除了组件、路由、模块这 3 个核心小节具有很强的关联性之外,其它内容都是完全独立的,您可以在用到的时候再翻阅。

    认真读完这个系列文章之后,您会深入理解新版本 Angular 的概念模型,具备使用 Angular 上手进行开发的基本能力。

    课程内容

    Angular 初学者快速上手教程导读

    课程特色

    你可能会问:Angular 的文章到处有,网上一大片,我为什么要来读你这个系列文章?

    这是非常好的一个问题,说明你对阅读内容有质量要求。

    如果是我,我也会问这个问题。

    整体上说,这个系列的文章有以下特色:

    1. 我会按照初学者一般的学习过程,用我自己的语言一步一步进行讲解。如你所知,最近的5年我一直在玩前端方面的东西,从 jQuery、SVG、ExtJS、Adobe Flex、Angular,这样一路玩过来。尤其是2016年,这一整年的时间我都代表 Angular 项目组在中国进行技术推广。在这5年,我在超过40家企业、开源组织、大学里面进行了大量演讲,在网络上发布了大量的视频和文章。在到处交流的过程中,认识了很多人,有经验丰富的后端开发者,也有新入行的初学者,他们跟我讲过很多自己的困惑。所以,这个系列文章里面的内容我至少反复讲过20遍以上,我会把常见的一些疑问融入在内容里面。

    2. 我会帮你扫平日常开发中常见的坑,这些坑大部分都是开发者们反馈给我的,或者说到我这里吐槽过的。举几个典型的例子:

      • 很多开发者到我这里来抱怨说,在 Windows 平台上安装 @angular/cli 会报很多 error,那是因为 @angular/cli 在 Windows 平台上面依赖 Python 和Visual Studio 环境,而很多开发者的机器上并没有安装这些东西。
      • node-sass 模块被墙的问题,强烈推荐使用 cnpm 进行安装,可以非常有效地避免撞墙。
      • 一些开发者来抱怨说 @angular/cli 在打包的时候加上 --prod 参数会报错,无法编译。这是一个很常见的问题,因为 @angular/cli 最新的版本经常会有 bug,只要在你项目的 package.json 里面降低一个小版本号就OK。
      • @angular/cli 默认生成的 karma.conf.js 配置文件里面采用了一个有 bug 的 html 报告生成器,导致 ng test 运行报错,我们需要把这个 reporter 改成mocha(摩卡)。
      • 有一些朋友说,本地开发的时候运行得很好,上线之后所有请求404。这也是一个常见的坑,因为你需要给 Web 容器配置一下处理 http 请求的规则,把前端路由扔回去交给 Angular 处理,请参考这份文档

      诸如此类的坑还有不少,我都是一个坑一个坑踩过来的。当然,我相信你自己也能踩过来,但是从节约时间的角度看,还是跟着我的思路走一遍更快不是吗?

    3. 这个系列的文章全部聚焦使用层面的话题,覆盖日常开发中使用频最高的特性。除非迫不得已,尽量不扯原理。长期以来,我发现有很多朋友的学习方式存在误区。比如:有一些人上来就去研究“变更检测”的原理,还有 RxJS 的原理,这种方式除了打击你自己的自信心之外并不能得到任何好处。因为你迟早会发现,在计算机领域,任何东西研究到最底层都和“算法”、“数据结构”、“设计模式”有关。而就我所知,很多朋友并不具备研究这些内容的基础知识,不过是白白浪费自己的时间而已。所以,我推荐采用更加务实一点的方案,首先学会如何使用,等用熟了,有时间、有闲情的时候再去研究那些底层的原理。设计发动机很难,但是学会开车并不难,对吧?所以我写这个系列的目标很简单,就是带你学会开车,而不是教你设计发动机。

    4. 这个系列的文章非常看重“概念模型”( Mental Model )的构建。我发现,很多开发者已经做过非常多的项目,但是当你跟他聊的时候,你很快就会发现他并没有掌握这门框架的精髓。打几个比方,当别人提到 Spring 的时候,你的大脑里面第一个想到一定是 DI、IOC、AOP 这些东西;当别人提到 Hibernate 或者 Mybatis 的时候,你的大脑里面立即会浮现出 ORM 的概念;当别人提到 React 的时候,你想到的应该是 VDom、JSX;当别人提到 jQuery 的时候,你首先想到的应该是$对吧?所以,你可以看到,任何一个成功的框架都有自己独创的“概念模型”,或者叫“核心价值”也可以。这是框架本身存在的价值,也是你掌握这门框架应该紧扣的主线,而不是上来就陷入到茫茫多的技术细节里面去。

    5. 文章里面所涉及到例子总数量大约200个左右,有少量例子来自官方文档,其它都是我自己一点一点手动敲出来的。我把这些例子分成了9个开源项目,它们互相独立,方便大家进行参考和练习。这些教学用的开源项目本身是免费的,列在这篇文章的尾部。

    Angular 的概念模型

    既然如此,问题就来了,新版本的 Angular 的核心概念是什么呢?

    非常简单,一切都是围绕着“组件”( Component )的概念展开的:

    enter image description here

    • Component(组件)是整个框架的核心,也是终极目标。“组件化”的意义有2个:第一是分治,因为有了组件之后,我们可以把各种逻辑封装在组件内部,避免混在一起;第二是复用,封装成组件之后不仅可以在项目内部复用,而且可以沉淀下来跨项目复用。
    • NgModule(模块)是组织业务代码的利器,按照你自己的业务场景,把组件、服务、路由打包到模块里面,形成一个个的积木块,然后再用这些积木块来搭建出高楼大厦。
    • Router(路由)的角色也非常重要,它有3个重要的作用:第一是封装浏览器的 History 操作;第二是负责异步模块的加载;第三是管理组件的生命周期。

    所以,在这个系列的文章里面,Component、NgModule、Router 加起来会占据绝大部分篇幅,而一些琐碎的小特性会被忽略掉。我相信,你只要紧扣“组件化”这个主线,就能站在一个很高的角度统摄全局,从而掌握到这门框架的精髓。

    适合阅读的人群

    这个系列的文章适合以下人群阅读:

    • Angular 新版本的初学者
    • 有 AngularJS 1.x 经验的开发者
    • 希望了解 Angular 新版本核心特性的开发者

    特别注意:这个系列的文章不是前端入门读物,你至少需要会一门编程语言,无论前端还是后端都可以,如果你曾经使用过一门前端框架,那就更好了。

    集中回答一些常见的问题

    浏览器兼容性

    关于 Angular 的浏览器兼容性,请看下图:

    enter image description here

    有一些国内的开发者会来争论兼容 IE8 的问题,我想给你两个事实:

    • 第一个事实是:截至2017年7月底,Chrome 的全球市场份额已经接近60%,加上 Firefox的12.28%,真的没有那么多人用 IE 了。

    enter image description here

    数据来源

    • 第二个事实是:天猫已经于2016年4月宣布放弃支持 IE6、7、8。而根据百度流量研究院的统计,IE8目前的整体市场份额已经下降到了9.31%:

    enter image description here

    数据来源

    不值得为了这么少的市场份额付出那么多的研发和维护成本。

    你完全可以以上两点事实去说服你的客户。

    命名约定

    老版本使用 AngularJS 指代,所有新版本都叫做 Angular。原因很好理解,因为老版本是用 JS 开发的,所以带一个 JS 后缀,而新版本是基于 TypeScript 的,带 JS 后缀不合适。

    关于 TypeScript

    这个系列的文章不会单独讲 TypeScript,正如我一直强调的:TypeScript 不难,JavaScript 才难。你跟着我的思路,TypeScript 绝对不会成为你学习 Angular 的障碍。相反,一旦你写熟练了之后,TypeScript 可以非常有效地提升编码效率和程序可读性。

    关于版本号

    根据官方的解释,Angular 从2.0之后会保证向下兼容,每隔半年会升级一个大版本,只有升级大版本的时候才会做一些 breaking change。

    所以这个系列文章里面不再强调版本号,涉及到的所有实例代码都基于目前(2017-10)最新的4.x版本。

    内容列表

    这个系列文章一共分11章,34个小节。

    • 1 搭建开发环境
    • 2-1 组件概述
    • 2-2 把 CSS 预编译器改成 SASS
    • 2-3 模板
    • 2-4 组件间通讯
    • 2-5 生命周期钩子
    • 2-6 动效
    • 2-7 动态组件
    • 2-8 ShadowDOM
    • 2-9 内容投影
    • 2-10 @ContentChild@ContentChildren
    • 2-11 @ViewChild 与 @ViewChildren
    • 2-12 与 Polymer 封装组件的方式简单对比
    • 2-13 封装并发布你自己的组件库
    • 3-1 指令简介
    • 3-2 自定义指令
    • 3-3 直接在组件里面操作 DOM
    • 4 模块 @NgModule
    • 5-1 路由概述
    • 5-2 路由基本用法
    • 5-3 模块预加载
    • 5-4 路由守卫
    • 5-5 多重出口
    • 6-1 表单快速上手
    • 6-2 双向数据绑定
    • 6-3 表单校验
    • 6-4 模型驱动型表单
    • 6-5 动态表单
    • 7 服务
    • 8 RxJS 快速上手教程
    • 9 国际化
    • 10 自动化测试
    • 11 参考资源

    本系列课程对应的所有示例项目列表:

    1. https://gitee.com/mumu-osc/learn-component
    2. https://gitee.com/mumu-osc/learn-directive
    3. https://gitee.com/mumu-osc/learn-router
    4. https://gitee.com/mumu-osc/learn-module
    5. https://gitee.com/mumu-osc/learn-form
    6. https://gitee.com/mumu-osc/learn-service
    7. https://gitee.com/mumu-osc/learn-test
    8. https://gitee.com/mumu-osc/learn-webpack
    9. https://github.com/damoqiongqiu/angular-seo

    最后是那一句套话:水平有限,错漏难免,欢迎指正。可以在我的读者圈里跟我沟通交流。

    第1课:搭建开发环境

    NodeJS

    enter image description here

    2009年,NodeJS 发布了第一个版本,标志着前端开发正式告别了刀耕火种的原始状态,开始进入工业化时代。

    在 NodeJS 出现之前,前端开发领域有很多事情我们是做不到的,例如:

    • JS 代码的合并、压缩、混淆。
    • CSS 预处理。
    • 前端自动化测试。

    而这一切在 NodeJS 出现之后都得到了很好的解决:

    • 对 JS 代码的预处理经历了 Grunt、Gulp 的短暂辉煌之后,终于在 webpack 这里形成了事实标准的局面。
    • CSS 的预处理也从 LESS 发展到了 SASS。
    • 自动化测试一直是前端开发中的一个巨大痛点,由于前端在运行时严重依赖浏览器环境,导致我们一直无法像测试后端代码那样可以去编写测试用例。在有了 NodeJS 之后,我们终于有了 Karma+Jasmine 这样的单元测试组合,也有了基于 WebDriverJS 这样的可以和浏览器进行通讯的集成测试神器。

    就前端开发目前整体的状态来说,无论你使用什么框架,NodeJS、webpack、SASS、Karma+Jasmine、WebDriverJS 这个组合是无论如何绕不过去的。

    @angular/cli

    enter image description here

    在开发 Angular 应用的时候,当然也离不开大量基于 NodeJS 的工具,我们需要 TypeScript compiler、webpack、Karma、Jasmine、Protracter 等模块。

    有相关经验的开发者都知道,自己从头开始去搭建一套基于 webpack 的开发环境是一件非常麻烦的事情。很多初学者在搭建环境这一步上面消耗了过多的精力,导致学习热情受到了沉重的打击。

    当团队规模比较大的时候,在每个人的机器上配置环境需要消耗大量的时间。有一些团队为了避开这个坑,利用 Docker 来做开发环境的同步和版本升级,看起来也是一个非常不错的方案。

    Angular 项目组从一开始就注意到了这个问题,所以有了 @angular/cli 这个神器,它的底层基于 webpack,集成了以上提到的所有 NodeJS 组件。你只要装好 @angular/cli 就够了,而不需要自己从头一步一步安装那些 NodeJS 插件。

    当然,在安装 @angular/cli 之前你需要先把 NodeJS 安装好,请到官方网站下载安装包: https://nodejs.org/ ,安装过程和普通软件没有区别。装好 NodeJS 之后就可以安装 @angular/cli 了,由于 npm 会自动访问海外的服务器,所以强烈推荐使用 cnpm 进行安装:

    npm i -g cnpm --registry=https://registry.npm.taobao.orgcnpm i -g @angular/cli

    cnpm 是淘宝发布的一款工具,会自动把 npm 上面的所有包定时同步到国内的服务器上来,cnpm 本身也是一款 NodeJS 模块。

    @angular/cli 安装成功之后你的终端里面将会多出一个名叫 ng 的命令,敲下 ng,将会显示完整的帮助文档:

    enter image description here

    创建第一个项目

    我们来创建第一个入门项目 HelloAngular,请在你的终端里面运行:

    ng new HelloAngular

    @angular/cli 将会自动帮你把目录结构创建好,并且会自动生成一些模板化的文件,就像这样:

    enter image description here

    请特别注意:@angular/cli 在自动生成好项目骨架之后,会立即自动使用 npm 来安装所依赖的 Node 模块,所以这里我们要 Ctrl+C 终止掉,然后自己进入项目的根目录,使用 cnpm 来进行安装。

    enter image description here

    安装完成之后,使用 ng serve 命令启动项目:

    enter image description here

    打开你的浏览器,访问默认的4200端口,看到以下界面说明环境 OK 了:

    enter image description here

    请注意:

    • 这里是 serve,不是 server,我看到一些初学者经常坑在这个地方。
    • 如果你需要修改端口号,可以用 ng serve --port ****来进行指定。
    • 如果你想让编译的包更小一些,可以使用 ng serve --prod,@angular/cli 会启用 TreeShaking 特性,加了参数之后编译的过程也会慢很多。所以,在正常的开发过程里面请不要加 --prod 参数。
    • ng serve 是在内存里面生成项目,如果你想看到项目编译之后的产物,请运行 ng build。构建最终产品版本可以加参数,ng build --prod。

    ng 提供了很多非常好用的工具,除了可以利用 ng new 来自动创建项目骨架之外,它还可以帮助我们创建 Angular 里面所涉及到的很多模块,最常用的几个如下:

    • 自动创建组件:ng generate component MyComponent,可以简写成 ng g c MyComponent。创建组件的时候也可以带路径,比如:ng generate component mydir/MyComponent
    • 自动创建指令:ng g d MyDirective
    • 自动创建服务:ng g s MyService
    • 构建项目:ng build,如果你想构建最终的产品版本,可以用 ng build --prod

    更多的命令和参数请在终端里面敲 ng 仔细查看,尽快熟悉这些工具可以非常显著地提升你的编码效率。

    一些常见的坑

    @angular/cli 这种“全家桶”式的设计带来了很大的方便,同时也有一些人不太喜欢,因为很多底层的东西被屏蔽掉了,开发者不能天马行空地自由发挥。比如:@angular/cli 把底层 webpack 的配置文件屏蔽掉了,很多喜欢自己手动配 webpack 的开发者就感到很不爽。

    对于国内的开发者来说,上面这些其实不是最重要的,国内开发者碰到的坑主要是由两点引起的:

    1. 第一点是网络问题:比如 node-sass 这个模块你很有可能就装不上,原因你懂的。
    2. 第二点是开发环境导致的问题:国内使用 Windows 平台的开发者比例依然巨大,而 @angular/cli 在 Windows 平台上有一些非常恶心的依赖,比如它需要依赖 python 环境、Visual Studio 环境。

    所以,如果你的开发平台是 Windows,请特别注意:

    1. 如果你知道如何给 npm 配置代理,也知道如何翻墙,请首选 npm 来安装 @angular/cli。
    2. 否则,请使用 cnpm 来安装 @angular/cli,原因有三:1、cnpm 的缓存服务器在国内,你装东西的速度会快很多;2、用 cnpm 可以帮你避开某些模块装不上的问题,因为它在服务器上面做了缓存;3、cnpm 还把一些包都预编译好了缓存在服务端,不需要把源码下载到你本地去编译,所以你的机器上可以没有那一大堆麻烦的环境。
    3. 如果安装失败,请手动把 node_modules 目录删掉重试一遍,全局的@angular/cli 也需要删掉重装,cnpm uninstall -g @angular/cli。
    4. 如果 node_modules 删不掉,爆出路径过长之类的错误,请尝试用一些文件粉碎机之类的工具强行删除。
    5. 最新版本的 @angular/cli 经常会有 bug,尤其是在 Windows 平台上面,所以请不要追新版本追太紧。如果你发现了莫名其妙的问题,请尝试降低一个主版本试试。这一点非常重要,很多初学者会非常困惑,代码什么都没改,就升级了一下环境,然后就各种编译报错。
    6. 对于 Mac 用户或者 *nix 用户,请特别注意权限问题,命令前面最好加上 sudo,保证有 root 权限。
    7. 无论你用什么开发环境,安装的过程中请仔细看 log。很多朋友没有看 log 的习惯,报错的时候直接懵掉,根本不知道发生了什么。

    VS Code

    enter image description here

    如你所知,一直以来,前端开发领域并没有一款特别好用的开发和调试工具。

    • WebStorm 很强大,但是吃资源很严重。
    • Sublime Text 插件很多,可惜要收费,而国内的企业还没有养成花钱购买开发工具的习惯。
    • Chrome 的开发者工具很好用,但是要直接调试 TypeScript 很麻烦。

    所以,Visual Studio Code(简称 VS Code)才会呈现出爆炸性增长的趋势。它是微软开发的一款前端编辑器,完全开源免费。VS Code 底层是 Electron,界面本身是用 TypeScript 开发的。对于 Angular 开发者来说,当然要强烈推荐 VS Code。最值得一提的是,从1.14开始,可以直接在 VS Code 里面调试 TypeScript 代码。

    第一步:环境配置

    • 确保你的 Chrome 安装在默认位置。
    • 确保你的 VS Code 里面安装了 Debugger for Chrome 这个插件。
    • 把 @angular/cli 安装到全局空间 npm install -g @angular/cli,国内用户请使用 cnpm 进行安装。注意,你最好升级到最新版本的 @angular/cli,避免版本兼容问题。
    • 用 @angular/cli 创建新项目 ng new my-app,本来就已经用 @angular/cli 创建的项目请忽略这一步,继续往下走,因为只要是 cli 创建的项目,后面的步骤都是有效的。
    • 用 VS Code 打开项目,进入项目根目录

    第二步:配置 launch.json

    enter image description here

    请参照以上步骤打开 launch.json 配置文件。

    enter image description here

    请把你本地 launch.json 文件里面的内容改成这样:

    {    "version": "0.2.0",    "configurations": [        {            "type": "chrome",            "request": "launch",            "name": "Chrome",            "url": "http://localhost:4200",            "webRoot": "${workspaceRoot}"        }    ]}

    第三步:开始 Debug

    在你的 app.component.ts 的构造函数里面打个断点,我本地是这样打断点的:

    enter image description here

    打开终端,进入项目根目录,运行 ng serve 启动项目,然后从 VS Code 的 debug 界面启动 Chrome

    enter image description here

    注意,你可能需要 F5 刷新一下 Chrome 才能进入断点!

    enter image description here

    小结

    目前,无论你使用什么前端框架,都必然要使用到各种 NodeJS 工具,Angular 也不例外。与其它框架不同,Angular 从一开始就走的“全家桶”式的设计思路,因此 @angular/cli 这款工具里面集成了日常开发需要使用的所有 Node 模块,使用 @angular/cli 可以大幅度降低搭建开发环境的难度。

    第2-1课:组件:概述

    enter image description here

    几乎所有前端框架都在玩“组件化”,而且最近都不约而同地选择了“标签化”这种思路,Angular 也不例外。

    对新版本的 Angular 来说,一切都是围绕着“组件化”展开的,组件是 Angular 的核心概念模型。

    以下是一个最简单的 Angular 组件定义:

    enter image description here

    • @Component:这是一个 Decorator(装饰器),其作用类似于 Java 里面的注解。Decorator 这个语言特性目前(2017-10)处于 Stage 2(草稿)状态,还不是 ECMA 的正式规范。
    • selector:组件的标签名,外部使用者可以这样来使用这个组件:<app-root>。默认情况下,ng 命令生成出来的组件都会带上一个 app 前缀,如果你不喜欢,可以在 angular-cli.json 里面修改 prefix 配置项,设置为空字符串将会不带任何前缀。
    • templateUrl:引用外部的 HTML 模板。如果你想直接编写内联模板,可以使用 template,支持 ES6 引入的“模板字符串”写法
    • styleUrls:引用外部 CSS 样式文件,这是一个数组,也就意味着可以引用多份 CSS 文件。
    • export class AppComponent:这是 ES6 里面引入的模块和 class 定义方式。

    本节完整的实例代码请参见这里

    第2-2课:组件:把 CSS 预编译器改成 SASS

    enter image description here

    SASS 是一款非常好用的 CSS 预编译器,Bootstrap 官方从4.0开始已经切换到了 SASS。

    目前(2017-10),@angular/cli 创建项目的时候没有自动使用 SASS 作为预编译器,我们需要自己手动修改一些配置文件,请按照以下步骤依次修改:

    • angular-cli.json 里面的 styles.css 后缀改成 .scssenter image description here当你后面再使用 ng g c *** 自动创建组件的时候,默认就会生成 .scss 后缀的样式文件了。

    • angular-cli.json 里面的 styleExt 改成 .scssenter image description here

    • src 下面 style.css 改成 style.scssenter image description here

    • app.component.scssenter image description here

    • app.component.ts 里面对应修改enter image description here

    改完之后,重新 ng serve,打开浏览器查看效果。

    小结

    本节完整的实例代码请参见这里

    SASS 的 API 请参考官方网站

    SASS 只是一个预编译器,它支持所有 CSS 原生语法。利用 SASS 可以提升你的 CSS 编码效率,增强 CSS 代码的可维护性,但是千万不要幻想从此就可以不用学习 CSS 基础知识了。

    第2-3课:组件:模板

    enter image description here

    模板是编写 Angular 组件最重要的一环,你至少需要深入理解以下知识点才能玩转 Angular 模板:

    1. 对比各种 JS 模板引擎的设计思路
    2. Mustache(八字胡)语法
    3. 模板内的局部变量
    4. 属性绑定、事件绑定、双向绑定
    5. 在模板里面使用结构型指令 *ngIf、*ngFor、ngSwitch
    6. 在模板里面使用属性型指令 NgClass、NgStyle、NgModel
    7. 在模板里面使用管道格式化数据

    对比各种 JS 模板引擎的设计思路

    几乎每一款前端框架都会提供自己的模板语法,在 jQuery 如日中天的时代,有 Handlebars 那种功能超强的模板。最近有 React 推崇的 JSX 模板写法,当然还有 Angular 提供的那种与“指令”紧密结合的模板语法。

    综合来说,无论是哪一种前端模板,大家都比较推崇“轻逻辑”( logic-less )的设计思路。

    何为“轻逻辑”?

    简而言之,所谓“轻逻辑”就是说,你不能在模板里面编写非常复杂的 JavaScript 表达式。比如,Angular 的模板语法就有规定:

    • 你不能在模板里面 new 对象
    • 不能使用=、+=、-=这类的表达式
    • 不能用++、--运算符
    • 不能使用位运算符

    为什么要“轻逻辑”?

    有一个非常重要的原因,比如你编写了以下 Angular 模板:

    <ul>    <li *ngFor="let race of races">        {{race.name}}    </li></ul>

    很明显,浏览器不认识 *ngFor 和 {{...}} 这种语法,所以必须在浏览器里面进行“编译”,获得对应的模板函数,然后再把数据传递给模板函数,最终结合起来获得一堆 HTML 标签,然后才能把这一堆标签插入到 DOM 树里面去。

    如果启用了 AOT,处理的步骤有一些变化,@angular/cli 会对模板进行“静态编译”,避免在浏览器里面动态编译的过程。

    而 Handlebars 这种模板引擎完全是运行时编译模板字符串的,你可以编写以下代码:

    //定义模板字符串var source=`<ul>    {{#each races}}        <li>{{name}}</li>    {{/each}}</ul>`;//在运行时把模板字符串编译成JS函数var templateFn=Handlebars.compile(source);//把数据传给模板函数,获得最终的HTMLvar html=templateFn([    {name:'人族'},    {name:'神族'},    {name:'虫族'}]);

    注意到 Handlebars.compile 这个调用了吧?这个地方的本质是在运行时把模板字符串“编译”成了一个 JS 函数。

    鉴于 JS 解释执行的特性,你可能会担忧这里会有性能问题。这种担忧是合理的,但是 Handlebars 是一款非常优秀的模板引擎,它在内部做了各种优化和缓存处理。模板字符串一般只会在第一次被调用的时候编译一次,Handlebars 会把编译好的函数缓存起来,后面再次调用的时候会从缓存里面获取,而不会多次进行“编译”。

    上面我们多次提到了“编译”这个词,所以很显然这里有一个东西是无法避免的,那就是我们必须提供一个 JS 版的“编译器”,让这个“编译器”运行在浏览器里面,这样才能在运行时把用户编写的模板字符串“编译”成模板函数。

    有一些模板引擎会真的去用 JS 编写一款“编译器”出来,比如 Angular 和 Handlebars,它们都真的编写了一款 JS( TS )版的编译器。而有一些简单的模板引擎只是用正则表达式做了字符串替换而已,显得特别简陋。这种简陋的模板引擎对模板的写法有非常多的限制,因为它不是真正的编译器,能支持的语法特性非常有限。

    所以,评估一款模板引擎的强弱,最核心的东西就是评估它的“编译器”做得怎么样。但是不管怎么说,毕竟是 JS 版的“编译器”,我们不可能把它做得像 g++ 那么强大,也没有必要做得那么强大,因为这个 JS 版的编译器需要在浏览器里面运行,搞得太复杂浏览器拖不动!

    以上就是为什么大多数模板引擎都要强调“轻逻辑”的最根本原因。

    对于 Angular 来说,强调“轻逻辑”还有另一个原因:在组件的整个生命周期里面,模板函数会被执行很多次。你可以想象, Angular 每次要刷新组件的外观的时候,都需要去调用一下模板函数,如果你在模板里面编写了非常复杂的代码,一定会增加渲染时间,用户一定会感到界面有“卡顿”。

    人眼的视觉延迟大约是100ms到400ms之间,如果整个页面的渲染时间超过400ms,界面基本上就卡得没法用了。有一些做游戏的开发者会追求60fps刷新率的细腻感觉,60分之1秒约等于16.7ms,如果 UI 整体的渲染时间超过了16.7ms,就没法达到这个要求了。

    轻逻辑( logic-less )带来了效率的提升,也带来了一些不方便,比如很多模板引擎都实现了 if 语句,但是没有实现 else,所以开发者们在编写复杂业务逻辑的时候模板代码会显得非常啰嗦。

    目前来说,并没有完美的方案能同时兼顾运行效率和语法表现能力,这里只能取一个平衡。

    Mustache 语法

    Mustache 语法也就是你们说的双花括号语法{{...}},老外觉得它像八字胡子,很奇怪啊,难道老外喜欢侧着头看东西?

    好消息是,很多模板引擎都接受了 Mustache 语法,这样一来学习量又降低了不少,开心吧?

    关于 Mustache 语法,你需要掌握3点:

    1. 它可以获取到组件里面定义的属性值。
    2. 它可以自动计算简单的数学表达式,例如:加减乘除、取模。
    3. 它可以获得方法的返回值。

    请依次看例子:

    插值语法关键代码实例:

    <h3>    欢迎来到{{title}}!</h3>
    public title = '假的星际争霸2'; 

    简单的数学表达式求值:

    <h3>1+1={{1+1}}</h3>

    调用组件里面定义的方法:

    <h3>可以调用方法{{getVal()}}</h3>
    public getVal():any{    return 65535;}

    模板内的局部变量

    <input #heroInput><p>{{heroInput.value}}</p>

    有一些朋友会追问,如果我在模板里面定义的局部变量和组件内部的属性重名会怎么样呢?

    如果真的出现了重名,Angular 会按照以下优先级来进行处理:

    模板局部变量 > 指令中的同名变量 > 组件中的同名属性。

    这种优先级规则和 JSP 里面的变量取值规则非常类似,对比一下很好理解对不对?你可以自己写代码测试一下。

    属性绑定

    属性绑定是用方括号来做的,写法:

    <img [src]="imgSrc" />
    public imgSrc:string="./assets/imgs/1.jpg";

    很明显,这种绑定是单向的。

    事件绑定

    事件绑定是用圆括号来做的,写法:

    <button class="btn btn-success" (click)="btnClick($event)">测试事件</button>

    对应 Component 内部的方法定义:

    public btnClick(event):void{    alert("测试事件绑定!");}

    双向绑定

    双向绑定是通过方括号里面套一个圆括号来做的,模板写法:

    <font-resizer [(size)]="fontSizePx"></font-resizer>

    对应组件内部的属性定义:

    public fontSizePx:number=14;

    AngularJS 是第一个把“双向数据绑定”这个特性带到前端来的框架,这也是 AngularJS 当年最受开发者追捧的特性,之一。

    根据 AngularJS 团队当年讲的故事,“双向数据绑定”这个特性可以大幅度压缩前端代码的规模。大家可以回想一下 jQuery 时代的做法,如果要实现类似的效果,是不是要自己去编写大量的代码?尤其是那种大规模的表单,一大堆的赋值和取值操作,都是非常丑陋的“面条”代码,而有了“双向数据绑定”特性之后,一个绑定表达式就搞定。

    目前,主流的几款前端框架都已经接受了“双向数据绑定”这个特性。

    当然,也有一些人不喜欢“双向数据绑定”,还有人专门写了文章来进行批判,也算是前端一景。

    在模板里面使用结构型指令

    Angular 有3个内置的结构型指令:*ngIf、*ngFor、ngSwitch。ngSwitch 的语法比较啰嗦,使用频率小一些。

    *ngIf 代码实例:

    <p *ngIf="isShow" style="background-color:#ff3300">显示还是不显示?</p><button class="btn btn-success" (click)="toggleShow()">控制显示隐藏</button>
    public isShow:boolean=true;public toggleShow():void{    this.isShow=!this.isShow;}

    *ngFor 代码实例:

    <li *ngFor="let race of races;let i=index;">    {{i+1}}-{{race.name}}</li>
    public races:Array<any>=[    {name:"人族"},    {name:"虫族"},    {name:"神族"}];

    *ngSwitch 代码实例:

    <div [ngSwitch]="mapStatus">    <p *ngSwitchCase="0">下载中...</p>    <p *ngSwitchCase="1">正在读取...</p>    <p *ngSwitchDefault>系统繁忙...</p></div>
    public mapStatus:number=1;

    特别注意:一个 HTML 标签上只能同时使用一个结构型的指令。

    因为“结构型”指令会修改 DOM 结构,如果在一个标签上使用多个结构型指令,大家都一起去修改 DOM 结构,到时候到底谁说了算?

    那么需要在同一个 HTML 上使用多个结构型指令应该怎么办呢?有两个办法:

    • 加一层空的 div 标签
    • 加一层<ng-container>

    在模板里面使用属性型指令

    使用频率比较高的3个内置指令是:NgClass、NgStyle、NgModel。

    NgClass 使用案例代码:

    <div [ngClass]="currentClasses">同时批量设置多个样式</div><button class="btn btn-success" (click)="setCurrentClasses()">设置</button>
    public currentClasses: {};public canSave: boolean = true;public isUnchanged: boolean = true;public isSpecial: boolean = true;setCurrentClasses() {    this.currentClasses = {        'saveable': this.canSave,        'modified': this.isUnchanged,        'special': this.isSpecial    };}
    .saveable{    font-size: 18px;} .modified {    font-weight: bold;}.special{    background-color: #ff3300;}

    NgStyle 使用案例代码:

    <div [ngStyle]="currentStyles">    用NgStyle批量修改内联样式!</div><button class="btn btn-success" (click)="setCurrentStyles()">设置</button>
    public currentStyles: {}public canSave:boolean=false;public isUnchanged:boolean=false;public isSpecial:boolean=false;setCurrentStyles() {    this.currentStyles = {        'font-style':  this.canSave      ? 'italic' : 'normal',        'font-weight': !this.isUnchanged ? 'bold'   : 'normal',        'font-size':   this.isSpecial    ? '36px'   : '12px'    };}

    ngStyle 这种方式相当于在代码里面写 CSS 样式,比较丑陋,违反了注意点分离的原则,而且将来不太好修改,非常不建议这样写。

    NgModel 使用案例代码:

    <p class="text-danger">ngModel只能用在表单类的元素上面</p>    <input [(ngModel)]="currentRace.name"><p>{{currentRace.name}}</p>
    public currentRace:any={name:"随机种族"};

    请注意,如果你需要使用 NgModel 来进行双向数据绑定,必须要在对应的模块里面 import FormsModule。

    管道

    管道的一个典型作用是用来格式化数据,来一个最简单的例子:

    {{currentTime | date:'yyyy-MM-dd HH:mm:ss'}}
    public currentTime: Date = new Date();

    Angular里面一共内置了12个管道:

    enter image description here

    在复杂的业务场景里面,12个管道肯定不够用,如果需要自定义管道,请查看这里的例子

    管道还有另一个典型的作用,就是用来做国际化,后面有一个独立的小节专门演示 Angular 的国际化写法。

    小结

    本节完整可运行的实例代码请参见这里请检出 template 分支。

    第2-4课:组件:组件间通讯
    第2-5课:组件:生命周期钩子
    第2-6课:组件:动效
    第2-7课:组件:动态组件
    第2-8课: 组件:ShadowDOM
    第2-9课:组件:内容投影
    第2-10课:组件:@ContentChild 和 @ContentChildren
    第2-11课:组件:@ViewChild 与 @ViewChildren
    第2-12课:与 Polymer 封装组件的方式简单对比
    第2-13课:封装并发布你自己的组件库
    第3-1课:指令
    第3-2课:自定义指令
    第3-3课:在组件里面直接操作DOM
    第4课:模块 @NgModule
    第5-1课:路由:概述
    第5-2课:路由:基本用法
    第5-3课:路由:模块预加载
    第5-4课: 路由:路由守卫
    第5-5课:路由:多重出口
    第6-1课:表单:快速上手
    第6-2课: 表单:双向数据绑定
    第6-3课:表单:表单校验
    第6-4课:表单:模型驱动型表单
    第6-5课:表单:动态表单
    第7课:服务
    第8课: RxJS 快速上手教程
    第9课:国际化
    第10课:前端自动化测试
    第11课:参考资源

    阅读全文: http://gitbook.cn/gitchat/column/59dae2081e6d652a5a9c3603

    展开全文
  • Angular框架入门

    千次阅读 2018-11-03 14:36:58
    1.AngularJS简介  AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化...

     

    1.AngularJS简介


        AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、依赖注入等等。


    下载地址:https://code.angularjs.org/

    学习版本:angular-1.6.9.zip(2018-02-02)

    2.AngularJS四大特征

    2.1 MVC模式


        Angular遵循软件工程的MVC模式,并鼓励展现,数据,和逻辑组件之间的松耦合.通过依赖注入(dependency injection),Angular为客户端的Web应用带来了传统服务端的服务,例如独立于视图的控制。 因此,后端减少了许多负担,产生了更轻的Web应用。

    Model:数据,其实就是angular变量($scope.XX);

    View: 数据的呈现,Html+Directive(指令);

    Controller:操作数据,就是function,数据的增删改查;

    2.2 双向绑定

        AngularJS是建立在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统HTML,通过双向的数据绑定来适应动态内容,双向的数据绑定允许模型和视图之间的自动同步。因此,AngularJS使得对DOM的操作不再重要并提升了可测试性。

    2.3依赖注入


        依赖注入(Dependency Injection,简称DI)是一种设计模式, 指某个对象依赖的其他对象无需手工创建,只需要“吼一嗓子”,则此对象在创建时,其依赖的对象由框架来自动创建并注入进来,其实就是最少知识法则;模块中所有的service和provider两类对象,都可以根据形参名称实现DI.


    2.4 模块化设计

       高内聚低耦合法则:

          1)官方提供的模块  ng、ngRoute、ngAnimate

          2)用户自定义的模块 angular.module('模块名',[ ])


    3 基础指令


    3.0 导包   

    <script src="js/angular.min.js"></script>

    3.1 表达式

    语法格式:{{变量名}}     或者       {{对象.变量名}}

    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="angular.min.js"></script>
    </head>
    <body>
      <div ng-app>
      {{100 + 100}}
      </div>
    </body>
    </html>

    结果:

    ng-app 指令定义了 Angular应用的根元素,在根元素的所有子元素中用到指令,angular会自动识别。

    ng-app 指令在网页加载完毕时会自动初始化应用中的angular的指令。

    3.2 双向绑定

    语法格式:ng-model=”变量名”   或者 ng-model=”对象.变量名”

    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="angular.min.js"></script>
    </head>
    <body>
      <div ng-app>
       name:<input type="text" ng-model="name" /></br>
       sex:<input type="text" ng-model="user.sex" /></br>
       age: <input type="text" ng-model="user.age" /></br>
       name:{{name}} <br>
       sex: {{user.sex}} <br>
       age: {{user.age}} <br>
      </div>
    </body>
    </html>

    结果:

    说明:ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上,而表达式可以实时地输出变量。

    3.3 初始化指令

    语法格式:ng-init=”变量名=’变量值’;   变量名=’变量值’”

    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="angular.min.js"></script>
    </head>
    <body>
      <div ng-app ng-init ="name='xiaoming';user.sex='man';user.age=10 ">
       name:<input type="text" ng-model="name" /></br>
       sex:<input type="text" ng-model="user.sex" /></br>
       age: <input type="text" ng-model="user.age" /></br>
       name:{{name}} <br>
       sex: {{user.sex}} <br>
       age: {{user.age}} <br>
      </div>
    </body>
    </html>

    结果:

    3.4 控制器

    定义模块语法格式:var 变量名 = angular.module(“模块名”, []);

    []为数组对象,可以添加其他模块

    定义控制器语法格式:

    模块变量名.controller(“控制器名”, function($scope){});

    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="angular.min.js"></script>
    <script type="text/javascript">
        /*定义myApp模块*/
          var app = angular.module("myApp",[]);
    	/*将myAPP模块添加控制器*/
    	   app.controller("myController",function($scope){
    	     $scope.add = function(){
    		  return parseInt($scope.x)+parseInt($scope.y);
    		 };
    	   });
    </script>
    </head>
    <body>
      <div ng-app ="myApp" ng-controller="myController">
       x:<input type="text" ng-model="x" /></br>
       y:<input type="text" ng-model="y" /></br>
       结果:{{add()}} <br>
      </div>
    </body>
    </html>

    结果:

    ng-controller指定所使用的控制器。

    理解 $scope作用域:

    $scope 贯穿整个 Angular App应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope相当于在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的$scope 发生改变时也会立刻重新渲染视图。

    注意:mg-model绑定的变量数据都存放在$scope作用域对象中。

    3.5 事件指令

    l ng-click:单击事件

    l ng-dblclick:双击事件

    l ng-blur:失去焦点事件

    l ng-focus:获取焦点事件

    l ng-change:对应onchange改变事件

    l ng-keydown:键盘按键按下事件

    l ng-keyup:键盘按键按下并松开

    l ng-keypress:同上

    l ng-mousedown:鼠标按下事件

    l ng-mouseup:鼠标按下弹起

    l ng-mouseenter:鼠标进入事件

    l ng-mouseleave:鼠标离开事件

    l ng-mousemove:鼠标移动事件

    l ng-mouseover:鼠标进入事件


    语法格式:ng-xxx=”控制器中定义的方法名();”;
     

    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="angular.min.js"></script>
    <script type="text/javascript">
        /*定义myApp模块*/
          var app = angular.module("myApp",[]);
    	/*将myAPP模块添加控制器*/
    	   app.controller("myController",function($scope){
    	     $scope.blur = function(){
    		  alert($scope.x);
    		 };
    		 $scope.keyup = function(){
    		  alert($scope.y);
    		 };
    	     $scope.add = function(){
    		     $scope.count =parseInt($scope.x)+parseInt($scope.y);
    			 };
    			 
    		 });
    </script>
    </head>
    <body>
      <div ng-app ="myApp" ng-controller="myController">
       x:<input type="text" ng-model="x" ng-blur="blur()"/></br>
       y:<input type="text" ng-model="y" ng-keyup="keyup()"/></br>
         <input type="button" value="计算" ng-click="add()" /> <br>
       结果:{{count}} <br>
      </div>
    </body>
    </html>

    结果:

    说明:ng-xxx事件指令,绑定控制器的某个方法。

     

    3.6 循环数组

    语法格式:ng-repeat=”变量名 in 集合或数组”;

    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="angular.min.js"></script>
    <script type="text/javascript">
        /*定义myApp模块*/
          var app = angular.module("myApp",[]);
    	/*将myAPP模块添加控制器*/
    	  app.controller("myController",function($scope){
    	       /*定义数组*/
    			$scope.list = [10,20,30,40,50];
    		 });
    </script>
    </head>
    <body>
      <div ng-app ="myApp" ng-controller="myController">
         <ul ng-repeat="m in list">
    	  <li>{{m}}</li>
    	 </ul>
      </div>
    </body>
    </html>

    结果:

    3.7 循环对象数组

    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="angular.min.js"></script>
    <script type="text/javascript">
        /*定义myApp模块*/
          var app = angular.module("myApp",[]);
    	/*将myAPP模块添加控制器*/
    	  app.controller("myController",function($scope){
    	       /*定义数组对象*/
    			$scope.list = [{name:"xiaoming",sex:"男",age:10},
    						{name:"sdfs",sex:"女",age:20},
    						{name:"sfg",sex:"man",age:24}];
    		 });
    </script>
    </head>
    <body>
      <div ng-app ="myApp" ng-controller="myController">
         <table>
    	 <tr>
    	   <th>id</th>
    	   <th>name</th>
    	   <th>sex</th>
    	   <th>age</th>
    	 </tr>
    	 <tr ng-repeat = "m in list">
    	  <td>{{$index+1}}</td>
    	  <td>{{m.name}}</td>
    	  <td>{{m.sex}}</td>
    	  <td>{{m.age}}</td>
    	 </tr>
    	 </table>
      </div>
    </body>
    </html>

    结果:

    $index:获取迭代时的索引号。

     

    3.8 条件指令

    语法格式:ng-if=”条件表达式”;

    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="angular.min.js"></script>
    <script type="text/javascript">
        /*定义myApp模块*/
          var app = angular.module("myApp",[]);
    	/*将myAPP模块添加控制器*/
    	  app.controller("myController",function($scope){
    	       /*定义对象*/
    			$scope.a ={age:22} ;
    		 });
    </script>
    </head>
    <body>
      <div ng-app ="myApp" ng-controller="myController">
        <h1 ng-if="a.age>20">{{a.age}}</h1>
      </div>
    </body>
    </html>

    结果:

    3.9 复选框

    l ng-true-value="true": 选中值

    l ng-false-value="false": 未选中值

    l ng-checked=”true|false”: 是否选中复选框

    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="angular.min.js"></script>
    <script type="text/javascript">
        /*定义myApp模块*/
          var app = angular.module("myApp",[]);
    	/*将myAPP模块添加控制器*/
    	  app.controller("myController",function($scope){
    	       /*定义对象*/
    			$scope.value1="true";
    			$scope.value2="1";
    			$scope.value3="true"
    		 });
    </script>
    </head>
    <body>
      <div ng-app ="myApp" ng-controller="myController">
        复选框1:<input type="checkbox" ng-model="value1" /><br>
    	复选框2:<input type="checkbox" ng-model="value2" ng-false-value="1"
    	ng-true-value="2" />
        <br>
        复选框1选中值:{{value1}}<br>
        复选框2选中值:{{value2}}
    	<br>
    	<input type="checkbox" ng-model="value3" >全选</input>
    	<input type="checkbox" ng-checked="value3" >A</input>
    	<input type="checkbox" ng-checked="value3" >B</input> 
    	<input type="checkbox" ng-checked="value3" >C</input>
    	
      </div>
    </body>
    </html>

    结果:

    3.10 下拉列表框

    l ng-options="元素变量.键 as 元素变量.键 for 元素变量in 数组":选项值表达式绑定

    l ng-selected=”true|false”: 是否选中下拉列表框指定的选项

    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="angular.min.js"></script>
    <script type="text/javascript">
        /*定义myApp模块*/
          var app = angular.module("myApp",[]);
    	/*将myAPP模块添加控制器*/
    	  app.controller("myController",function($scope){
    	       /*定义对象*/
    		 $scope.list=[
    						{id:1,name:"haha"},
    						{id:2,name:"ssfd"},
    						{id:3,name:"sbdd"}
    					 ];
    		 });
    </script>
    </head>
    <body>
      <div ng-app ="myApp" ng-controller="myController">
       <select ng-model ="code" ng-options="city.id as city.name for city in list">
         <option value="">请选择</option>
    	 {{code}}
       </select>
       <br>
       <select>
          <option value="1">1</option>
    	  <option value="2" ng-selected="true">2</option>
       </select>
    	 
      </div>
    </body>
    </html>

     

    结果

     

    4 内置服务


    4.1 $http服务

    我们的数据一般都是从后端获取的,那么如何获取数据呢?我们一般使用内置服务$http服务来实现。

    4.1.1 $http()发送请求

    语法格式:

    $http({

    method : 'get|post', // 请求方式

    url : '', // 请求URL

    params : {'name':'admin'} // 请求参数

    }).then(function(response){ // 请求成功

    // response: 响应对象封装了响应数据、状态码

    },function(response){ // 请求失败

    // response:  响应对象封装了响应状态码

    });

    发送异步请求:
     

    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="angular.min.js"></script>
    <script type="text/javascript">
        /*定义myApp模块*/
          var app = angular.module("myApp",[]);
    	/*将myAPP模块添加控制器*/
    	  app.controller("myController",function($scope,$http){
    	    /*定义对象*/
    		$scope.httpGet = function(){
    		  $http({method:"get",
    				url:"mm.json"}).then(function(response){
    				  $scope.list = response.data;
    				},function(response){
    				alert("加载失败")});
    		 }; 
    		 });
    </script>
    </head>
    <body>
      <div ng-app ="myApp" ng-controller="myController" ng-init="httpGet()">
          <table border="2">
    	   <tr>
    	    <th>id</th>
    		<th>name</th>
    	   </tr>
    	   <tr ng-repeat="m in list">
    	     <td>{{m.id}}</td>
    		 <td>{{m.name}}</td>
    	   </tr>
    	  </table>
    	 
      </div>
    </body>
    </html>

    结果:

     

    4.1.2 $http.get()发送请求

    语法格式:

    // 第一种格式

    $http.get(URL,{  

        params: {  

           "id":id  

        }  

    }).then(function(response){// 请求成功

    // response: 响应对象封装了响应数据、状态码

    }, function(response){ // 请求失败

    // response: 响应对象封装了响应状态码

    });

    // 第二种格式

    $http.get(URL).then(function(response){ // 请求成功

    // response: 响应对象封装了响应数据、状态码

    },function(response){ // 请求失败

    // response: 响应对象封装了响应状态码

    });

    4.1.3 $http.post()发送请求

    语法格式:

    // 第一种方式

    $http.post(URL,{  

        "id" : id  

    }).then(function(response){ // 请求成功

    // response: 响应对象封装了响应数据、状态码

    },function(response){ // 请求失败

    // response: 响应对象封装了响应状态码

    });
     

    其实学Angular只要学它的指令就好了

    展开全文
  • angular-6大主流前端框架(一)

    万次阅读 热门讨论 2018-04-08 16:07:46
    小编我最近做的项目中前端用到了angular,全因心中无货,特来补货。我们先对比一下前端框架。【我是否需要使用框架?】如果不尝试回答这个问题就是我们的失职,这越来越成为社会上某些人的口头禅,在网络平台上的...

    小编我最近做的项目中前端用到了angular,全因心中无货,特来补货。我们先对比一下前端框架。

    我是否需要使用框架?

    如果不尝试回答这个问题就是我们的失职,这越来越成为社会上某些人的口头禅,在网络平台上的争论也已经发展到犹如不需要额外编写 API 能更简单创建 Web 应用那样的地步。就像本系列中所有的内容一样,我们的回答也大都是依据这些内容。

    虽然无框架也能正常工作,但是,这也是有代价的。那些主张无框架手写 Javascript 的人,那些通常会被我们认为是斯德哥尔摩综合症(情感上会依赖他人且容易受感动的人)的人,忘记了网络平台上有多套快速发展的 API ,至少有三种不同的技术,三种截然不同的语法。web 平台规范并确定了超过 12000 个 API,事实上浏览器中的维恩图也显示了这些巨大差距。

    如果你是一个有着深厚技术和经验的人,确实可以坦诚的不使用框架。但你团队的其他成员呢?你手下的那些人呢?或者当你的决定把你自己陷入困境的时候呢?这种情况下,我们将会看到一个不用框架的团队在展开冒险,最后他们会发现自己创建了一个需要自己着手维护的框架。接着就会出现寻找人才的问题,他们不需要知道框架是如何工作的,只需要寻找会调用网络平台 API 的高级技能人才或者一些自称有经验的人才,最后却发现缺少利于团队发展的技能深度和经验。

    团队应该避免虚假等价(false equivalence)的陷阱,很显然,在 web 技术的应用方面具有创新性的公司在不断提高他们的市场价值和竞争力,Google、Facebook 和 Netflix 公司都是很好的例子。但是大多数公司不是这样,他们应该承认这一点。



    【Angular 2+】

    1、有什么优势?

    Angular 2+ 的最大优势在于它的流行程度。也有人认为它和 Google 密切相关的名字,会影响团队使用它。Angular 1 的迅速流行是因为那些来自其他交互式应用程序开发环境的人会发现对于开发单页面 web 应用程序具有相似的模型-视图模式。通过对 Angular 1 进行现代化演变和重新构建框架的某些部分,Angular 2+ 已经真正的爆发了,大量的正式的和非正式培训机构数量都让人印象深刻,开发者有很强的市场竞争力。对于用户来说它有一套用于构建用户界面的丰富组件,这也是本系列中少有的几个框架能够做到这点。

    2、有什么弱点和挑战?

    我们觉得 Angular 框架着重于在单个页面应用程序中创建用户界面并没有处理构建完整的 web 应用这个更大的关注点,如果不及早确定下来,这将会导致整个项目难以维护,在实际项目中,运行时提供不属于核心框架的技术往往让人觉得不可思议,这大大降低了 TypeScript 对最终开发者的价值。

    3、未来将何去何从?

    Angular 5 刚刚发布,这看来是 Angular 已经成功的印证了快速发布版本的承诺,在 Google 的持续支持下,Angular 会越来越成熟。

    像许多的大型组织一样,Google 具有多重(分裂)的人格,从外表上看,Angular 团队和那些专注于浏览器标准的团队之间显得很和谐。但我们的观点是,和谐只是一层薄薄的窗户纸。Angular 团队对于 web 组件和渐进式 web 应用没有一个真正解决方案。我们认为,业界普遍认可的标准将会在 Angular 框架中会逐步实现,这将会影响到如何更好的构建 Angular 应用将成为一个中/长期的风险。

    4、何时选择 Angular 2+

    如果你需要在一个大型的框架内获取技术资源,框架内的技术通常很容易移植;或者你需要在框架中训练开发人员,并且还要有一定的信心,他们会在短期内获得一定的开发能力,这样的话你可以考虑 Angular 2+ 。需要注意的是 Angular1(angular.js)与 Angular2+ 是截然不同的,其中的应用、技术和经验不能直接移植到 Angular2+ 的开发中去。

    如果你的 web 应用能够很好的转化为标准的模型-视图模式,那么你也可以忽略其他直接考虑使用 Angular2+ 。

    如果你对 Google Material UX 设计模式满意,那么 Material Angular 是遵循该模式的一种快速、简单且可靠的方式。

    5、angular1和angular2的架构比较(途中的angular是angular2)

    (1)angular1的架构


    (2)angular2的架构



    React + Redux

    1、有什么优势?

    React 和 Redux 的最大优势在于它们相对简单和专注。做一件事情并把它做好是非常困难的,但这两个库都很有效地完成了它们的目标。虽然对于某些状态容器方法可能是外部的,但大多数开发人员还是可以轻松掌握概念,并了解单向数据体系结构的好处,简化大量的用户界面应用程序。

    2、有什么弱点和挑战?

    React 和 Redux 最大的弱点不是它们是什么,而是它们不是什么。要构建一个功能丰富的 Web 应用程序,你需要许多功能,一旦脱离 React 和 Redux 和其他一些库的核心,你将发现一个非常分散的社区,拥有无数的解决方案和模式,不容易整合在一起。

    因此,虽然 React 和 Redux 都是非常专注的库,但缺乏经验的团队还是会很容易地生成不可维护的解决方案,而不是意识到他们所做的选择会导致性能不佳或错误。 即使有经验的开发人员也可能意识到,一个松散的架构或惯例可能会在未来困扰他们。

    假省钱是一种对自己的欺骗,组织范围内采用 React 和 Redux 将轻松降低无效率问题。 没有其他库和模式的广泛约定和标准化,标准化 React + Redux 比较于我们正在采用的 JavaScript 来编写我们的应用程序效率要高。

    3、未来将何去何从?

    Facebook 和 React 最近从繁琐的附加专利纠纷中抽离,他们认识到,就像其他项目一样,更广泛的社区能够提高自己的声音。 我觉得这有助于 Facebook 意识到他们还不能更好地了解我们,相信我们来引导项目。 希望这将继续贯穿项目的特点和技术方向。

    很难预测 React 和 Redux 的未来。 但是,将库集中在一起,确实会显着提高适应性,大多数React + Redux 模式都会促进一个分离的体系结构,从而可以轻松地进行重构和迭代。 两年前,大家喜欢的还是React + Flux,但整个社区很快就拥抱了Redux。 思维或模式的其他重大转变可能很容易被采纳。 这种关键能力可能会持续到未来。

    4、何时选择 React + Redux ?

    如果你很少需要手把手指导,并且正在寻找更好的库而不是全面的框架,那么 React + Redux 可能是正确的。 在这一过程中,你不仅需要对你的团队和组织的能力保持诚实,还要在你的初始开发过程中,以及在整个应用程序的长期维护过程中保持诚实。

    【Vue.js】

    1、有什么优势?

    渐进式构建能力是 vue.js 最大的优势,vue 有一个简洁而且合理的架构,使得它易于理解和构建。

    vue 有一个强大的充满激情人群的社区,这为 vue.js 增加了巨大的价值,使得为一个空白项目创建一个综合的解决方案变得十分容易。

    2、有什么弱点和挑战?

    在模型-视图应用程序和状态容器类型的应用程序之间的互相转换可能会令人感到困惑,即使没有完美包含一个模式到另一个模式的完美转换,但让人感觉希望能维持两个模式的相关性。对于那些期待 vue.js 完美解决方案,并可能导致难以维护不一致的应用程序的人来说,这至少是令人困惑的。

    一个更大的挑战是 vue.js 依赖于一个单独的人,很明显,其他的项目基本是由一个组织提供支持,但这让人感觉更加有意义,虽然它有一个强大文件的社区和许多有创新的新增项目,但是 vue 核心的开发基本落在一个人身上。

    我们很高兴看到 vue 更加容易接受新兴的标准方法,但是它的类似于 web 组件的模式,而不是真正的 web 组件,这可能是 vue 所得不偿失的地方。

    3、未来将何去何从?

    虽然 vue.js 有相当广泛的应用,但也很难预测在中期发展中这个势头能持续多久,它不是由一个商业组织直接支持并维护,因此,这很大程度上依赖于维护者的生存能力和继续维护下去的愿望来决定。

    它也表现出了一定程度的语言适应能力,并且随着某些模式的落伍和失宠而继续保持自身语言的现代化和时代性,目前没有迹象表明 vue.js 架构将来无法适应进一步发展。

    4、何时选择 Vue.js?

    如果你有一个传统的 web 应用程序,并需要一个强壮稳健的应用程序层,那么 vue.js 可能是一个很好的选择,它有清晰的模式,即使没有经验的团队也能正确或者错误的使用它。尽管 vue UX 框架没有开箱即用的功能,但在 vue.js 上也能大量持续性构建应用,这将有利于你的项目。

    【Dojo 2】

    1、有什么优势?

    Dojo2 专注于带来更多构建在状态容器体系之上的动态组件的体验模式,填补了 react+redux 等框架的许多空白。

    Dojo2 也知道它不单单只是在自己的生态圈发展,通过包含 web 组件导入和导出功能,也意识到需要支持不同的应用实例,但它依旧提供了一个结构化和固有的框架价值,Dojo2 的核心基础仍然是专注于提供交互性。

    Dojo2 觉得它提供了大量重要的功能和解决方案,这对于构建完整的 web 应用是十分重要的,对于其他大多数框架而言这并不是重点。提供一个国际化系统和广泛的易接入性的模式也是其中之一,同时也提供一个主题系统和演进模式,用以确保不仅能为 Typescript/JavaScript 提供良好的代码开发,也能像 CSS 那样管理资源。

    Dojo2 专注于提供一个结构化和符合人体工程学的开发环境,通过使用 typescript 和其他开发模式,它试图提供安全的防护机制去引导新手开发人员,通过专注于提高框架开发效率和开发安全性,旨在让开发团队能够快速交付更好的 web 应用程序。

    2、有什么弱点和挑战?

    有争论的是,通过进一步延长 Dojo2 的发布时间的做法是否是在阻碍框架的发展,反观其他项目由于其资源的扩大能够继续发展和快速迭代,导致 Dojo2 目前明确的处在一个拥挤的竞争环境之中。

    这也许是一个潜在的发展机遇和挑战,同时希望能够在灵活性和交互性上而不是别的特殊理由去使用 Dojo2 。

    3、未来将何去何从?

    Dojo2 将是未来优秀 web 框架之一,它将继续努力为构建可扩展性的 web 应用程序提供清晰的模式和指导。随着新标准的不断出现,Dojo2 将进一步努力去在框架中实现新的标准方法,继续尝试扩大框架的开放性和交互性,创造适合更多人使用的解决方案。

    4、何时选择 Dojo2?

    如果你想采用一个灵活的、现代的、响应式的 web 应用程序架构,并且你需要很多智能化的默认设置,那么 Dojo2 将是一个不错的选择。不用去拼凑和构建一个管道,并且为你提供更高阶的命令模式让你可以更加专注的开发项目,更加确认它是直接为你可以直接生产开发所准备的。另外,如果你了解 typescript 的优势,Dojo2 会十分严谨的使用 typescript 来管理并提供一个稳健的开发者开发环境。

    【Ember】

    1、有什么优势?

    Ember.js可能是最固执己见的主流框架,这也是其最大的优势。它有创建Ember.js应用程序的正确方法,通常只有一种方法来创建应用程序。Ember.js更类似于一个产品或平台,在那里你会到一个供应商的长期支持和维护。Ember.js提供了对其平台的全面版本管理,升级工具以及对API升级的强大指导和工具。成熟,是对Ember.js的一个很好的总结。

    Ember.js多年来已经证明,它可以保持其框架并使其与现代标准保持一致,同时不会过早遗忘传统浏览器。

    Ember.js有一个清晰合理的架构来全面构建Web应用程序。

    2、有什么弱点和挑战?

    Ember.js可能是最固执己见的主流框架,这也是它最大的弱点。虽然社区是开放的并且接受投资,但是仍然需要找到一个正确的方式来摆脱下滑的趋势,这可能是具有挑战性的问题。

    拥有一个丰富的第三方社区也可能具有挑战性。由于没有开箱即用的UX组件,这很可能会让你使用第三方套件。你可能会发现,虽然这些套件并不全面,你将需要建立或寻找其他组件。由于Ember.js没有扩展,所以对如何交互和管理DOM,你会发现你有不一致的部件,而且也没有提供一个易于管理的界面。

    3、未来该何去何从?

    Ember.js的主要贡献者是JavaScript语言标准委员会TC39的核心参与者。在过去的几年中,Ember.js对JavaScript的方向比任何其他框架都有更直接的影响。我们的观点是,这将在未来继续受影响,并帮助促进JavaScript的特性和模式。这也意味着Ember.js将继续保持与未来标准的紧密结合的关系。

    Ember.js不可能在将来随时消失,尽管他们的创新很可能是通过与Ember.js紧密结合的其他项目来实现的,比如Glimmer,它为Ember.js应用程序提供了一个新的UI框架,该框架基于TypeScript。

    4、为什么我会选择Ember.js?

    如果你在框架中寻找成熟度,那么Ember.js很难出错。另外,由于Ember.js提供的内容被理解,并且有广泛的官方和官方认可的培训,以及严格的结构,找到能够建立基于Ember.js的应用程序的人才可能比其他框架更容易。也可以教大型团队如何构建应用程序,并确保整个团队的共同对话和理解。

    如果你想要对社区保持信心,并批判性地思考他们平台的变化,那么Ember.js会是一个很好的考虑因素。您可以花更少的时间跟随当前的技术趋势,并更多地关注创建应用程序。

    【Aurelia】

    1、优势在哪?

    Aurelia有很多关于构建Web应用程序的方法,结构和想法。 这个框架的编写有很多技术上的优点。

    2、有什么弱点和挑战?

    我们估计最大的挑战就是核心发展的动力和临界物质的缺乏我们感觉很多的观点和概念都是我们对其他框架的批评性的想法,但是这些愿望都没有完全交付。它似乎就像是一个正在进行的工作一样,就像Dojo 2,但是它已经是一个已发布的框架。

    大部分的Aurelia是坐落在一个人的肩膀上,如果这个人的的注意力或可用性改变,那么将会带来挑战。

    3、未来会如何?

    对于Aurelia来说,有一个很大的机会。如果它能够实现他的愿景,他将要完整的保存这个构建Web应用程序的已有的模板,但会以更健全、更完整的方式交付。我们不知道Aurelia是否能够充分的利用这次机会。

    4、为什么我会选择Aurelia?

    如果您致力于Web模型视图应用程序模块,并且你和你的团队试图想把一些事做的更好,那么Aurelia会是一个选择。它就像是一个正在寻求一个更大的社区来帮助它的发展和进化的框架。

    【最后的思考】

    真心希望这一系列的帖子至少给了你一点思考,你应该很容易有这样的想法那就是不可能有可验证的正确决定。同时,希望你也意识到没有普遍的错误决定,你应该用一些问题和思考来武装自己,帮助你选择框架。

    一个框架仅仅是一些模式的体现,一些科技的集成,源码帮助我们更加容易去构建和维护网站应用,如果你是个体开发者,我们能提供的最好的建议是花费尽可能多的时间使用那些你认为可以为你所用的框架。如果你是公司的管理者或骨干领导要去做决定,请记住特点列表只是决定的一方面,有时候并不是越多越好。挑战你自己活着你的团队使用一个整体的框架,但是首先,列出对你和你的组织重要的列表,尤其是那些技术之外特点。


    展开全文
  • Angular——浅知

    热门讨论 2018-04-09 22:44:18
      “Angular”很多人都知道前端很火的框架,有很多的优点,此次参与的项目前端也使用的angular,所以最近正在学习中。下面就简单介绍一下angular,以及开发angular程序前要做的准备工作! **简介** 1.是什么?...

      “Angular”很多人都知道前端很火的框架,有很多的优点,此次参与的项目前端也使用的angular,所以最近正在学习中。下面就简单介绍一下angular,以及开发angular程序前要做的准备工作!

    *简介

    1.是什么?
      Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身,为你解决开发方面的各种挑战。Angular 为开发者提升构建 Web、手机或桌面应用的能力。

    2.架构
      首先付一张在视频中看到的关于angular程序架构图,然后对angular程序架构有个大概了解。
    这里写图片描述
      大的架构:用户user和应用APP作交互,angular本身是一个客户端框架,开发出来的都是客户端程序,客户端程序需要与服务器做交互,从服务器获取数据传递数据,


      ◇◇app应用:angular的应用至少包含一个模块NgModule和一个组件component(PS:组件之间可以有父子关系,组件可以调用服务,服务也可以调服务,就是服务之间也可以互相调用)
      ◇◇指令:也是angular的重要组成部分,允许你向HTML元素添加自定义行为,比如可以写一个自动完成的指令,把这个指令写到input标签上,这个标签就会有自动完成的功能,angular框架内置了大量的指令来帮助我们解决日常开发的问题

      ◇◇模块:可以把指令、组件、服务看成积木中的小块,模块是一个一个的塑料袋,这些小块可以组成一个小汽车,把这些小块放进一个袋子里,那些小块可以组成一个轮船放在另外一个袋子里


    3.使用——职责
      组件、服务、指令是用来完成功能的,模块是用来打包分发这些功能的
      对于程序来说,如果四个组件、两个服务、加上某个指令能放在一起可以提供一个功能,如登录功能,就会把这些组件服务指令放在登录模块里。如果开发下一个程序也需要登录,可以把登录模块引入这个项目中即可

    *Angular目录结构

    1、浅层目录结构

    e2e:端到端的测试目录,用于自动测试


    node-modules:存放第三方依赖包


    src:应用程序源码目录


    angular-cli.json:angular命令行工具的配置文件,如果额外引了第三方依赖包,配置文件会被修改


    karma.conf.js:karma是单元测试的执行器,karma.conf.js是karma的配置文件


    package.json:标准的npm工具的配置文件,文件里列出了该应用程序所使用的第三方依赖包


    protractor.conf.js:自动测试的配置文件


    README.md:说明文件


    tslint.joso:tslint的配置文件,用于定义typescript

    2、深层src目录

    app:应用的组件和模块


    assets:静态资源目录,可以存放图片等


    environments:环境配置(如:开发环境、测试环境、生产环境)


    index.html:整个应用的根HTML,是程序启动访问的页面


    main.ts:整个项目的入口点,angular通过这个启动项目


    *Angular应用启动

      嘿嘿,小菜要抛问题了!刚接触angular时,有没有疑惑编写完应用程序如何启动呢?启动时加载哪个页面?加载哪些脚本?脚本又需要做什么事呢?


    ◆启动加载的页面
      默认情况下src下的index.html是angular应用时启动加载的页面
    ◆启动加载的脚本
      src下的main.ts文件是angular应用时启动加载的脚本,负责引导angular应用启动

    *Angular与jquery的比较

    ◇jquery
      jquery需要操作页面上的道路,假如要显示一个业务卡片时,首先需要拿到这一列卡片外边的一个父节点的dom节点,然后生成html插入到里面去,这是在操作页面元素
    ◇Angular
      在angular中:则不需要做dom操作,需要做的就是在后台声明一些包含数据的属性,然后把模版和数据绑定起来,然后根据你的数据变化来呈现相应的页面

    展开全文
  • Angular8 开发(二)

    千次阅读 2019-06-24 14:19:35
    前面已经说到了基本的集成可开发准备工作,Angular 开发(一)。接下来开始逻辑部分的编写 目录大纲段子列表获取,路由跳转详情获取段子详情音乐列表搜渲染搜索的音乐列表和播放音乐总结 段子列表获取,路由跳转...
  • Angular 5 最新官方 demo

    2018-01-21 11:32:01
    1. 基于Angular cli 1.6.5 最新稳定版 2. 项目代码可见附件 3. 解压后运行cmd 命令 npm install 下载依赖包 4. 下载完成后 npm start 启动项目 5. 打开浏览器 输入localhost:4200 即可
  • Angular4 - 构建以及部署

    千次阅读 2018-07-07 01:00:27
    构建:编译和合并首先还是先将之前写的一个demo拿出来,...我们开发环境中是typescript文件,我们不能将源代码直接放在生产环境,然后执行npm install去安装开发环境,在安装angular 命...
  • Angular4 - 共享模块

    千次阅读 2018-01-28 20:52:21
    Angular4 - 共享模块 1. AppModule @NgModule({  declarations: [  AppComponent  ],  imports: [  BrowserModule  ],  exports: [ AppComponent ],  providers: [],  bootstrap: [App
  • 当新建或删除列表中某个数据时,实现数据的变更检测 markForCheck() 当视图使用 OnPush(checkOnce...import { ChangeDetectorRef } from '@angular/core'; constructor(public changeDetectorRef:ChangeDetectorRef
  • Angular框架介绍

    千次阅读 多人点赞 2017-08-15 20:08:20
    Angular简单使用介绍 Angular依赖对象和依赖注入 Angular的重要对象 Angular的常用指令 AngularJS小项目练习
  • Angular 插值绑定

    2017-11-12 18:48:35
    前言一直在做项目没有来的及做总结,有时间不管用,也有不想去总结,因为总感觉有的地方欠缺所以懒着不去总结,发现错失了很多东西,这次分析插值绑定的基础知识,希望帮助到大家What绑定对于angular的一些基本情况...
  • Angular 4.0从入门到实战

    万次阅读 2017-06-23 12:29:55
    模板功能强大丰富,并且是声明式的,自带了丰富的Angular指令; 是一个比较完善的前端MVC框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能; 自定义Directive,比jQuery插件还灵活,...
  • "$schema": "./node_modules/@angular/cli/lib/config/schema.json", //angular-cli.json规则文件 "version": 1, // 指明了Angular 工作空间 概要的版本。 "newProjectRoot": "projects",//定义了由CLI创建的新的...
  • Angular 基础教程(7.0)

    千次阅读 2018-11-26 13:17:42
    课程亮点 按照初学者的学习路线规划内容 ...《Angular 初学者快速上手教程》课程发布已有一年,期间收到了很多读者的留言,这里摘录几条,仅供参考。为了不打搅这些朋友,部分采用了匿名。 课程背景 本...
  • (精华)2020年8月2日 Angular 环境搭建

    万次阅读 2020-08-02 21:21:33
    Angular入门 一、Angular介绍 Angular是谷歌开发的一款开源的web前端框架,诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。 根据项目数统计...
  • 一、Angular 内置模块 二、Angular 自定义模块 当我们项目比较小的时候可以不用自定义模块。但是当我们项目非常庞大的时候把所有的组 件都挂载到根模块里面不是特别合适。所以这个时候我们就可以自定义模块来组织...
  • 网上的资源---------Angular视频教程 下载地址:https://download.csdn.net/download/qianlei541/10876870
  • 获取鼠标事件 在第三节的示例中,假如我们需要获取鼠标事件,那应该怎么办呢?这时,我们可以引入 $event 变量,...import {Component, OnInit} from '@angular/core'; @Component({ selector: 'app-simple-
  • angular教程推荐

    千次阅读 2018-06-03 19:19:02
    angular系列在线交互式教程angular5教程 angular5教程全面系统地讲解了最新版的Angular5,内容不仅涵盖组件模板语法、指令和管道运用、表单运用、指令开发等基础内容,还包括依赖注入原理与应用、变化检测...
  • <h1>---------------管道-------------</h1> {{today | date:'yyyy-MM-dd HH:mm ss'}} <h1>---------------事件(click)-----------------</h1>...执行方法改变属性里面的
  • Angular7入门辅助教程——前篇

    千次阅读 2018-12-25 17:02:13
    Angular7入门辅助教程 1、Angular简介 Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身,为你解决开发方面的各种挑战。Angular 为...
  • Angular 中,我们可以通过 ViewChild 装饰器来获取视图中定义的模板元素,然后利用 ViewContainerRef 对象的 createEmbeddedView() 方法,创建内嵌视图。 import { Component, TemplateRef, ...
  • angular4.x视频教程强势来袭!!忙碌的工作,不停的充电,好久没遇到这么实用的教程了,跟同行分享一下,写篇文章,放松放松。。有好的技术资源的也希望大家多分享,我会关注学习的。 angular4.x、angular5.x、...
  • npm install -g @angular/cli 2、创建工作区和初始应用项目 ng new my-app npm ERR! path E:\aGit-project\myapp\node_modules\.staging\typescript-53141799\lib\tsserverlibrary.js npm ERR! code EPERM npm ...
  • 涉足Angular是从1.x的版本,几年间Angular已经从1.x迭代到了2.x、4.x在到现在的5.0, 发展非常的迅速,性能也得到了很大的提升,接下来我们会逐步带大家快速了解一下Angular 5.x的使用。 安装CLI Angular 2.0...
  • 因为其需要Angular 6的版本,而Angular 6在本年度5月份左右刚刚发布,而且考虑到rxjs等相关的变化,低版本的要升上来还是有一点点修改和测试的量的,但是早晚要升,从这篇文章开始使用Angular 6 和 Ng-zorro的新版做...
  • 【背景】终于看完了教程的最后一章,总结一下。【内容】第十章主要是对整个教程进行总结,总结如下:一、前端开发的主要步骤(开发流程): 1、设计:前端开发流程中最重要的一步,在开发之前一定要对要做的东西有...
  • Angular2.0视频教程来了!

    千次阅读 2017-05-02 12:16:36
    视频连接:https://my.oschina.net/mumu/blog/834254
  • import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import {FormsModule} from '@angular/forms'; import { AppRoutingModule } from './app-routing.module...
  • Angular 中,我们可以使用 HostListener 属性装饰器,实现元素的事件绑定。 指令的作用 该指令用于演示如何利用 HostListener 装饰器,监听用户的点击事件。 指令的实现 import { Directive, ...

空空如也

1 2 3 4 5 ... 20
收藏数 148,992
精华内容 59,596
关键字:

angular