Angular 权威教程

内容简介

本书堪称 Angular 领域的里程碑式著作，涵盖了关于 Angular 的几乎所有内容。对于没有经验的人，本书平实、通俗的讲解，递进、严密的组织，可以让人毫无压力地登堂入室，迅速领悟新一代 Web 应用开发的精髓。如果你有相关经验，那本书对 Angular 概念和技术细节的全面剖析，以及引人入胜、切中肯綮的讲解，将帮助你彻底掌握这个框架，在自己职业技术修炼之路上更进一步。本书的读者对象为所有想要理解和学习 Angular 的前端开发人员。

作者简介

Ari Lerner，全栈工程师，拥有多年 Angular 经验，自办并运营 Angular 电子报 ng-newsletter.com，在著名硅谷工程师培训学校 Hack Reactor 担任 AngularJS 讲师。Fullstack.io 创始人。

Felipe Coury，Gistia Labs 联合创始人兼 CTO。

Nate Murray，全栈工程师，曾任职于 IFTTT，拥有数据挖掘和增量 Web 服务等方面的背景。

Carlos Taborda，Gistia Labs 联合创始人兼主管。

本书内容

推荐序

很高兴这本《Angular 权威教程》成为 Angular 中文资源的一部分，希望它能广受欢迎，给中国的 Angular 社区提供一份令人愉悦的学习资源，也希望它帮助更多工程师开始使用下一代 Angular 框架来开发应用。

我认识雪狼和他所属的 Nice Angular 社区是在2016年。那时候，他们开始了对 Angular 官方网站卓越的本地化工作。现在，这份中文官网已经部署在了 angular.cn 上。

本书及其翻译工作充分体现了中国开源软件开发者的热情和共享精神。感谢雪狼等来自 Nice Angular 社区的志愿者们对此作出的贡献。愿本书帮助你开始试用 Angular！祝你成功！

Naomi Black，Google Angular 项目经理兼主管

---

作为一项开源技术和前沿 Web 开发框架，Angular 持续吸引着中国区开发人员的关注。作为雪狼及其所属 Nice Angular 社区的集体工作成果，这本书是开源力量的又一次证明，证明这种热情、这种志愿精神确实可以帮助业界享受到全球最新的开发技术。我谨代表 Google 开发技术推广部向这本书的出版表示祝贺。

栾跃，Google 开发技术推广部大中华区主管

译者序

简介

以笔者之所见，《Angular 权威教程》大概是目前除了 Angular 官方文档之外最全面的学习资料了，这从其英文版多达600多页的篇幅就可见一斑。相应地，它面对的对象涵盖了从入门级到中高级的读者，是一本可以陪伴你成长的好书。

在内容安排上，本书具有大量的例子以保障其足够浅显，但也穿插着一些原理分析以保障其足够深入。除此之外，本书还给出了很多外部参考资料，让富有探险精神的你可以向专家级进发。

翻译说明

未来的版本号及发布计划

Angular 就要出4.0了！是的，过一阵子还有 Angular 5/6/7/8……这本书会很快过时吗？答案是“不会”。Angular 开发组对于未来的版本号及发布计划有一个正式的说明，大意是：

我们要兼顾向后兼容和向前演进，因此以后我们将严格遵循 SemVer 语义化版本规范，并力求让版本升级变得可预测，以便使用者可以提前安排。在大版本号之间会出现少量破坏性变更，但是不用担心，相邻的大版本号之间只会把一些 API 标记为废弃的。也就是说，理想情况下，4的程序是可以直接迁移到5的，只是会收到一些 API 废弃提示，到6中才会彻底移除。同时，官方会在文档中给出详细的升级指南，帮助开发者升级。

因此，尽请放心，Angular 以后绝不会出现像从1升级到2这么大的变化。事实上，NodeJS 现在采用的就是类似的版本策略，提高发布的可预测性对于工程化开发是很有价值的。

另外，这里为什么没有3？简单点说就是因为路由模块比其他模块多发布过一次，因此当你使用 core 模块的2.0时，和它配套的 router 模块却是3.0的，这容易让开发人员困惑，跳过3，可以让所有模块的编号重新对齐。

对框架名称的说明

Angular 开发组正式确定了新的命名策略：用 AngularJS 来代表 1.x 版本，而 Angular 代表 2.x、4.x、5.x 等很多后续版本，因为 Angular 2+ 将支持 TypeScript/JavaScript/Dart，而不再是 JavaScript。这些变化已经在官方文档中体现出来了，而本书也将同样遵循这样的命名策略。

名词：装饰器与注解

@Component等语法元素在 TypeScript 中被称为装饰器（decorator），但在本书中，作者统一称其为注解（annotation）。这两种提法都是正确的。在语法层面，@Component确实是装饰器，这是 TypeScript 的标准叫法；但是在语义层面，Angular 中是把它作为注解使用的。两者的区别是，装饰器直接改变被装饰者的行为，而注解则提供元数据，供框架去根据这些元数据做不同的处理。在 Angular 目前的版本中，@Component确实只是提供了元数据。

我们在跟原作者讨论之后，决定还是跟随作者的提法来翻译。不过在日常工作中，还是建议你遵循 TypeScript 的提法，将其称为装饰器。

支持与勘误

如果对本书中的一些概念不太理解，请参阅 Angular 官方中文站 angular.cn。这里有来自官方开发组的权威资料。

如果对本书有任何疑问或发现问题，请到 https://github.com/nice-angular/ng-book-2 提交 issue。

同时，对于一些经过确认的 issue，我们也会更新在勘误区。

关于我们

参与本次翻译的一共有7位成员，都是 AngularJS 领域的专家和 Angular 领域的先行者。稍后会有我们的简短介绍。

本书各章的译者和校对者如下：

	翻译	一校	二校
第1章	雪狼、叶志敏	郑丰彧	郑丰彧
第2章	破狼	破狼	雪狼
第3章	张旋	张旋	雪狼
第4章	郑丰彧	郑丰彧	雪狼
第5章	破狼	破狼	雪狼
第6章	王子实	王子实	雪狼
第7章	叶志敏	叶志敏	叶志敏
第8章	雪狼	雪狼	雪狼
第9章	郑丰彧	郑丰彧	雪狼
第10章	郑丰彧	郑丰彧	Hantsy
第11章	郑丰彧	郑丰彧	Hantsy
第12章	郑丰彧	郑丰彧	雪狼
第13章	郑丰彧	郑丰彧	雪狼
第14章	郑丰彧	郑丰彧	雪狼
第15章	Hantsy	Hantsy	叶志敏
第16章	雪狼	雪狼	张旋

除此之外，雪狼还承担了项目管理和中文统稿工作；破狼负责全书的技术准确性把关；叶志敏负责与作者沟通，并在英文理解方面进行把关。

我们的感恩

本书得以发行，首先要感谢 Angular 开发组及其项目经理 Naomi Black。正是由于她的支持和牵线搭桥，才有了我们和图灵的这次合作。

我们还要感谢 Google 开发技术推广部及其大中华区主管栾跃和项目经理程路，正是由于他们的努力，让 Angular 在中国的推广普及工作有了正规军的加入，而本书的出版正是推广计划中的一小部分。

我们还要感谢图灵的编辑朱巍和杨琳，在整个翻译过程中，她们给了我们许多专业的指导和帮助。本书得以在迅速出版的同时保证高质量，她们的经验和把关居功甚伟。

最后，要感谢 Angular 中文社区。我所指的并不是由我们几个创建并管理的这些 QQ 群、微信群等，而是指广义的中文社区。无论你在北京还是上海，也无论你在国内还是海外；无论你是高手还是新兵，也无论你是否像我们一样是 Angular 的忠实粉丝，你们都是广义 Angular 中文社区中的一员。在我们的心中，只有一个 Angular 中文社区，她不被任何人拥有，也被每一个人拥有，因为她就是我们每个人。

固然，我们这几位译者都是推广 Angular 的志愿者与先行者，但我们真正希望看到的是一个繁荣、开放、互通的中文社区，是全球 Angular 社区的一部分，我们希望看到 Angular 的技术社区遍地开花。因此，如果你有自己的组织或影响力，请联系我们，我们愿与你携手共进，分享各种知识、渠道与资源，共同制定与推进社区发展计划。要知道，无论你将来是求职还是创业，一个繁荣的社区都会给你带来强力的支持。

一旦有了共同的愿景和开放、包容的文化，我们就能无视时空的阻隔，在天南海北守望相助，共同面对新技术的挑战与机遇。纷繁的世界、冰冷的技术与温暖的社区，共同构成了本书的出版背景。

雪狼的感恩

汪志成，网名雪狼。ThoughtWorker & Google 开发者专家（GDE），拥有18年软件开发经验，崇尚简单、专业、分享，“好为人师，好为人师”；合著有《AngularJS深度剖析与最佳实践》。

首先，我要感谢我的家人，特别是我的妻子春娜。为了翻译官方文档和这本书，我失去了很多陪伴他们的时间，没有他们的支持，故事将无从开始。

其次，我要感谢 ThoughtWorks，没有这样一个平台，我就无法安心钻研技术，更没有大量把新技术应用于工程实践中的机会。

最后，要特别感谢我刚刚出生的女儿，你是激励我前进的动力。闺女，看到了吗？这是老爹给你的迎新礼物。

破狼的感恩

格茸扎西，网名破狼。ThoughtWorks 一线码农、架构师、咨询师；爱好读书和旅游，也常涂鸦一些技术博文；合著有《AngularJS 深度剖析与最佳实践》；国内 Angular 最早布道者，Nice Angular 社区“狼主”。

首先，要感谢我的妻子和父亲。因为他们的鼓励，我才能顺利完成本书相应章节的翻译。

其次，要感谢 ThoughtWorks 这个大家庭。因为在这个自组织和黑客文化环境的熏陶下，我才能潜心钻研这些技术。

最后，要感谢图灵出版社的朱巍编辑、本书的作者以及其他译者们。

叶志敏的感恩

叶志敏，虽留英多年、远漂他乡、四处奔波，一颗热爱软件开发的心却依旧如初。多年前曾与雪狼共事，合作愉快，因此成为好朋友。由雪狼推荐进入 Angular 世界，使用 Angular 和 .NET 平台开发软件多年。从 Alpha 阶段开始使用 Angular。与雪狼合作，翻译 Angular 官方文档站，并经过 Angular 团队的推荐，承接翻译本书的重任。

首先感谢我的妻子。从怀孕到照顾女儿健康成长，她一直对我的工作非常理解和支持，从无怨言。其次，感谢我母亲和岳母的慈爱与帮助。最后，希望女儿能健康成长，平安一生。

Hantsy 的感恩

Hantsy，拥有15年软件工程经验。2012年曾受JBoss（RedHat 子公司）邀请前往波士顿参加 JBoss 用户和开发人员年度大会，并获得 JBoss Community Recognition Awards。现为自由职业者，远程工作多年。

感谢 Angular 中文团队和图灵的支持，非常荣幸参与本书中文版的翻译。感谢 Angular 团队的努力，为我们带来如此优秀的工具框架。

张旋的感恩

张旋，PMP、ACP、NPDP，中科院计算所烟台分所集成应用中心主任。1982年生人，1996年起接触编程。正式从事软件工作行业11年。擅长项目管理、团队管理、技术体系建设。非常喜欢研究和对比各种新技术，生成适合工程使用的技术栈，并灌输到整个团队中去。

十分荣幸能成为 Nice Angular 社区的一员，感谢雪狼和破狼。感谢本书原作者为我们提供了一本这么好的 Angular 教程，也感谢本书的所有翻译者，从你们身上我确实学到了很多。感谢我的老婆莉莉，照看乐乐辛苦了，谢谢你给我时间让我做自己喜欢的事。最后感谢图灵出版社的朱巍编辑，本次合作非常愉快，期待下次更好的机会！

郑丰彧的感恩

郑丰彧，网名Z，现就职于大商集团天狗网，Angular 爱好者，喜欢函数式编程、WebGL。

首先，我要感谢雪狼，一次很偶然的机会受到雪狼的邀请，让我受宠若惊，也为我开启了这次 Angular 翻译之旅。

其次，我要感谢我的家人，尤其是有孕在身的老婆和孕育中的宝宝。为了翻译这本书，我牺牲了很多原本用来陪伴你们的时间。

最后，我想对即将出世的女儿柚柚说句话：我们全家人对你的期待正如我们 Nice Angular 社区对此书的期待。所以，赶快“问世”吧！

王子实的感恩

王子实，现任光辉城市全栈工程师。1992年生，自学生时代便喜好编程，一直以来对各种新技术非常着迷，乐于对其进行研究与探索，并将成果在团队中进行推广，以提升整体效率。

非常感谢雪狼能够给我这次机会参与到本书的翻译中来，能够让我对 Angular 社区尽一点点自己的绵薄之力。

同时也要感谢其他参与翻译的译者们，让我有了这次非常宝贵的经验。尤其是在翻译过程中遇到一些技术问题以及对原书内容有一些疑惑时，大家探究与实践的精神让我印象深刻。

还要感谢我的妻子默默给予我支持与理解。

最后，就是要感谢 Google 带给我们 Angular 这个强大而又好用的框架。希望它也能越来越好，不断进步！

编写你的第一个 Angular Web 应用（上）

1.1　仿制 Reddit 网站

在本章中，我们将构建一个应用，它能让用户发表推荐文章（包括标题和URL）并对每篇文章投票。

你可以把该应用看作类似于Reddit{1[http://reddit.com]}或 Product Hunt{2[http://producthunt.com]}的起步版网站。

这个简单的应用将涵盖 Angular 中的大部分基本要素，包括：

• 构建自定义组件；

• 从表单中接收用户输入；

• 把对象列表渲染到视图中；

• 拦截用户的点击操作，并据此作出反应。

读完本章之后，你将掌握如何构建基本的 Angular 应用。

图1-1展示了该应用最终完成后的界面截图。

图1-1　完成后的应用

首先，用户将提交一个新的链接。之后，其他用户可以对每篇文章投票：“顶”或“踩”。每个链接都有一个最终得票数，我们可以对自己认为有用的链接投票（如图1-2所示）。

图1-2　包含新文章的应用

在本项目和整本书中，我们都将使用 TypeScript。TypeScript 是 JavaScript ES6 版的一个超集，增加了类型支持。本章不会深入讲解 TypeScript；如果你熟悉 ES5（“普通”的JavaScript）或 ES6（ES2015），那么在后续的学习过程中应该不会有什么问题。

在第2章中，我们将更深入地学习 TypeScript。因此，即使你对某些新语法不太熟悉，也不必担心。

1.2　起步

1.2.1　TypeScript

要开始使用 TypeScript，首先需要安装 Node.js。安装方式很多，请参见 Node.js 官方网站（https://nodejs.org/download/）了解详情。

我必须用 TypeScript 吗？并非如此！要使用 Angular，TypeScript 并不是必需的，但它可能是最好的选择。Angular 也有一套 ES5 API，但 Angular 本身就是用 TypeScript 写成的，所以人们一般也会选用它。本书也将使用 TypeScript，因为它确实很棒，能让 Angular 写起来更简单。当然，并不是非它不可。

安装完 Node.js，接着就要安装 TypeScript了。请确保安装1.7或更高的版本。要想安装它，请运行下列npm命令：

$ npm install -g typescript

通常，npm是 Node.js 的一部分。如果你的系统中没有npm命令，请确认你安装的 Node.js 是包含它的版本。**

Windows 用户：我们将在全书中使用 Linux/Mac 风格的命令行。强烈建议你安装 Cygwin{3[https://www.cygwin.com/]}。借助它，你就能直接运行本书中的这些命令了。

1.2.2　angular-cli

Angular 提供了一个命令行工具angular-cli，它能让用户通过命令行创建和管理项目。它自动化了一系列任务，比如创建项目、添加新的控制器等。多数情况下，选用angular-cli都是明智的决定。当你创建和维护应用时，它能帮你遵循很多常用模式。

要想安装angular-cli，只要运行下列命令即可：

$ npm install -g [email protected]

安装完毕之后，你就可以在命令行中用ng命令运行它了。运行ng命令时，你会看到一大堆输出，不过不用管它；往回滚屏，你会看到如下内容：

$ ngCould not start watchman; falling back to NodeWatcher for file system events.Visit http://ember-cli.com/user-guide/#watchman for more info.Usage: ng 

之所以得到这一大堆输出，是因为当我们不带参数运行ng命令时，它就会执行默认的help命令。help命令会解释如何使用本工具。

如果你在 OS X 或 Linux 上运行，可能还会在输出中看到这一行：

Could not start watchman; falling back to NodeWatcher for file system events.

这意味着我们没有安装过一个名叫 watchman 的工具。此工具能帮助angular-cli监听文件系统的变化。如果你在 OS X 上运行，建议使用 Homebrew 工具安装它，命令如下：

$ brew install watchman

如果你是 OS X 用户并且运行这个brew命令时出现错误，那么表示你尚未正确安装 Homebrew 工具。请参阅http://brew.sh/来安装它，然后再试一次。

如果你是 Linux 用户，可以参阅https://ember-cli.com/user-guide/#watchman来学习如何安装 watchman。

如果你是 Windows 用户，那么不必安装任何东西，angular-cli将使用原生的 Node.js 文件监视器。

现在你应该已经装好angular-cli及其依赖了。在本章中，我们就用它来创建第一个应用。

1.2.3　示例项目

现在，环境已经准备好了，我们这就来编写第一个 Angular 应用吧！

打开终端窗口并且运行ng new命令，快速创建一个新的项目：

$ ng new angular2_hello_world

运行之后，你将看到下列输出：

installing ng 2  create .editorconfig  create README.md  create src/app/app.component.css  create src/app/app.component.html  create src/app/app.component.spec.ts  create src/app/app.component.ts  create src/app/app.module.ts  create src/app/index.ts  create src/app/shared/index.ts  create src/assets/.gitkeep  create src/assets/.npmignore  create src/environments/environment.dev.ts  create src/environments/environment.prod.ts  create src/environments/environment.ts  create src/favicon.ico  create src/index.html  create src/main.ts  create src/polyfills.ts  create src/styles.css  create src/test.ts  create src/tsconfig.json  create src/typings.d.ts  create angular-cli.json  create e2e/app.e2e-spec.ts  create e2e/app.po.ts  create e2e/tsconfig.json  create .gitignore  create karma.conf.js  create package.json  create protractor.conf.js  create tslint.jsonSuccessfully initialized git.( Installing packages for tooling via npm

它将运行一段时间，进行 npm 依赖的安装。一旦安装结束，我们会看到一条成功信息：

Installed packages for tooling via npm.

这里生成了很多文件！现在不用关心它们都是什么。我们会在本书中讲解每一个文件的含义和用途。不过现在，我们先把注意力集中在如何用 Angular 代码开始工作上。

进入ng命令创建的 angular2_hello_world 目录，来看看它里面都有什么：

$ cd angular2_hello_world$ tree -F -L 1.├── README.md              // an useful README├── angular-cli.json       // angular-cli configuration file├── e2e/                   // end to end tests├── karma.conf.js          // unit test configuration├── node_modules/          // installed dependencies├── package.json           // npm configuration├── protractor.conf.js     // e2e test configuration├── src/                   // application source└── tslint.json            // linter config file3 directories, 6 files

我们目前关注的目录是 src，应用代码就在里面。下面看看我们在那里创建了什么：

$ cd src$ tree -F.|-- app/|   |-- app.component.css|   |-- app.component.html|   |-- app.component.spec.ts|   |-- app.component.ts|   |-- app.module.ts|   |-- index.ts|   `-- shared/|       `-- index.ts|-- assets/|-- environments/|   |-- environment.dev.ts|   |-- environment.prod.ts|   `-- environment.ts|-- favicon.ico|-- index.html|-- main.ts|-- polyfills.ts|-- styles.css|-- test.ts|-- tsconfig.json`-- typings.d.ts4 directories, 18 files

用你惯用的文本编辑器打开 index.html，应该会看到如下代码。

code/first_app/angular2_hello_world/src/index.html

            Loading...

我们把它分解一下。

code/first_app/angular2_hello_world/src/index.html

如果你熟悉 HTML，这第一部分就很平淡无奇了。我们在这里声明了页面的字符集（charset）、标题（title）和基础 URL（base href）。

code/first_app/angular2_hello_world/src/index.html

如果你继续深入模板主体（body），就会看到下列代码。

code/first_app/angular2_hello_world/src/index.html

  Loading...

我们的应用将会在app-root标签处进行渲染，稍后剖析源代码的其他部分时还会看到它。文本 Loading...是一个占位符，在应用代码加载之前会显示它。我们可以借助此技巧来通知用户该应用正在加载，可以像这里一样显示一条消息，也可以显示一个加载动画或其他形式的进度通知。

之后就可以编写应用代码了。

1.3　运行应用

在开始修改之前，我们先把这个自动生成的初始应用加载到浏览器中。angular-cli有一个内建的 HTTP 服务器，我们可以用它来启动应用。回到终端，进入应用的根目录（在本应用中是./angular2_hello_world目录）并运行命令。

$ ng serve** NG Live Development Server is running on http://localhost:4200. **// a bunch of debug messagesBuild successful - 1342ms.

我们的应用正在 localhost 的4200端口上运行。打开浏览器并访问 http://localhost:4200，结果如图1-3所示。

注意，如果4200端口由于某种原因被占用了，也可以在其他端口号上启动。仔细阅读你电脑上的输出信息，找出开发服务器的实际 URL。

图1-3　运行中的应用

好，现在我们设置好了应用，而且知道了该如何运行它，可以开始写代码了。

1.3.1　制作Component

Angular 背后的指导思想之一就是组件化。

在 Angular 应用中，我们写 HTML 标记并把它变成可交互的应用。不过浏览器只认识一部分标签，比如、

和等，它们的功能都是由浏览器的开发者预先定义好的。

如果我们想教浏览器认识一些新标签，该怎么办呢？比如我们想要一个标签，用来显示天气；又比如想要一个标签，用来创建一个登录面板。

这就是组件化背后的基本思想：我们要教浏览器认识一些拥有自定义功能的新标签。

如果你用过 AngularJS，那么可以把组件当作新版本的指令。

让我们来创建第一个组件。写完该组件之后，就能在 HTML 文档中使用它了，就像这样：

要使用angular-cli来创建新组件，可以使用generate（生成）命令。

要生成hello-world组件，我们需要运行下列命令：

$ ng generate component hello-worldinstalling component  create src/app/hello-world/hello-world.component.css  create src/app/hello-world/hello-world.component.html  create src/app/hello-world/hello-world.component.spec.ts  create src/app/hello-world/hello-world.component.ts

那该怎么定义一个新组件呢？最基本的组件包括两部分：

(1) Component注解

(2) 组件定义类

下面来看看组件的代码，然后逐一讲解。打开第一个 TypeScript 文件：src/app/hello-world/hello-world.component.ts。

code/first_app/angular2_hello_world/src/app/hello-world/hello-world.component.ts

import { Component, OnInit } from '@angular/core';@Component({  selector: 'app-hello-world',  templateUrl: './hello-world.component.html',  styleUrls: ['./hello-world.component.css']})export class HelloWorldComponent implements OnInit {  constructor() { }  ngOnInit() {  }}

注意，TypeScript 文件的后缀是.ts 而不是.js。问题在于浏览器并不知道该如何解释 TypeScript 文件。为了解决这个问题，ng serve命令会自动把.ts 文件编译为.js 文件。

这个代码片段乍一看可能有点恐怖，但别担心，我们接下来就会一步步讲解它。

1.3.2　导入依赖

import语句定义了我们写代码时要用到的那些模块。这里我们导入了两样东西：Component和OnInit。

我们从"@angular/core"模块中导入了组件（import Component）。"@angular/core"部分告诉程序到哪里查找所需的这些依赖。这个例子中，我们告诉编译器："@angular/core"定义并导出了两个 JavaScript/TypeScript 对象，名字分别是Component和OnInit。

同样，我们还从这个模块中导入了OnInit（import OnInit）。稍后你就会知道，OnInit能帮我们在组件的初始化阶段运行某些代码。不过现在先不用管它。

注意这个import语句的结构是import { things } from wherever格式。我们把{ things }这部分的写法叫作解构。解构是由 ES6 和 TypeScript 提供的一项特性，下一章会深入讲解。

import的用法很像 Java 中的import或 Ruby 中的require：从另一个模块中拉取这些依赖，并且让这些依赖在当前文件中可用。

1.3.3　Component注解

导入依赖后，我们还要声明该组件。

code/first_app/angular2_hello_world/src/app/hello-world/hello-world.component.ts

@Component({  selector: 'app-hello-world',  templateUrl: './hello-world.component.html',  styleUrls: ['./hello-world.component.css']})

如果你习惯用 JavaScript 编程，那么下面这段代码可能看起来有点怪异：

@Component({  // ...})

这是什么？如果你有 Java 开发背景，应该会很熟悉：它们是注解。

AngularJS 的依赖注入技术在幕后使用了注解的概念。也许你还不熟悉它们，但注解其实是让编译器为代码添加功能的途径之一。

我们可以把注解看作添加到代码上的元数据。当在HelloWorld类上使用@Component时，就把HelloWorld“装饰”（decorate）成了一个Component。

这个标签表示我们希望在 HTML 中使用该组件。要实现它，就得配置@Component并把selector指定为app-hello-world。

@Component({  selector: 'app-hello-world'  // ... more here})

有很多种方式来配置选择器（selector），类似于 CSS 选择器、XPath 或 JQuery 选择器。Angular 组件对选择器的混用方式添加了一些特有的限制，稍后会谈到。现在，只要记住我们正在定义一个新的 HTML 标签就可以了。

这里的selector属性用来指出该组件将使用哪个 DOM 元素。如果模板中有标签，就用该Component类及其组件定义信息对其进行编译。

1.3.4　用templateUrl添加模板

在这个组件中，我们把templateUrl指定为./hello-world.component.html。这意味着我们将从与该组件同目录的 hello-world.component.html 文件中加载模板。下面来看看这个文件。

code/first_app/angular2_hello_world/src/app/hello-world/hello-world.component.html

  hello-world works!

这里定义了一个p标签，其中包含了一些简单的文本。当Angular加载该组件时，就会读取此文件的内容作为组件的模板。

1.3.5　添加template

我们有两种定义模板的方式：使用@Component对象中的template属性；指定templateUrl属性。

我们可以通过传入template选项来为@Component添加一个模板：

@Component({  selector: 'app-hello-world',  template: `    
      hello-world works inline!    
  `})

注意，我们在反引号中（` ... `）定义了template字符串。这是 ES6 中的一个新特性（而且很棒），允许使用多行字符串。使用反引号定义多行字符串，可以让我们更轻松地把模板放到代码文件中。

你真的应该把模板放进代码文件中吗？答案是：视情况而定。在很长一段时间里，大家都觉得最好把代码和模板分开。这对于一些开发团队来说确实更容易，不过在某些项目中会增加成本，因为你将不得不在一大堆文件之间切换。

个人观点：如果模板行数短于一页，我更倾向于把模板和代码放在一起（也就是.ts 文件中）。这样就能同时看到逻辑和视图部分，同时也便于理解它们之间如何互动。

把视图和代码内联在一起的最大缺点是，很多编辑器仍然不支持对内部 HTML 字符串进行语法高亮。我们期待能尽快看到有更多编辑器支持对模板字符串内嵌 HTML 的语法高亮。

1.3.6　用styleUrls添加 CSS 样式

注意styleUrls属性：

  styleUrls: ['./hello-world.component.css']

这段代码的意思是，我们要使用 hello-world.component.css 文件中的 CSS 作为该组件的样式。Angular 使用一项叫作样式封装（style-encapsulation）的技术，它意味着在特定组件中指定的样式只会应用于该组件本身。14.1节会深入讨论它。

目前还用不到任何“组件局部样式”，你只要先知道它就行了（或整体删除此属性）。

你可能注意到了该属性与template有个不同点：它接收一个数组型参数。这是因为我们可以为同一个组件加载多个样式表。

1.3.7　加载组件

现在，我们已经写完了第一个组件的代码，那该如何把它加载到页面中呢？

如果再次在浏览器中访问此应用，我们会看到一切照旧。这是因为我们仅仅创建了该组件，但还没有使用它。

为了解决这一点，需要把该组件的标签添加到一个将要渲染的模板中去。打开文件 first_app/angular2_hello_world/src/app/app.component.html。

记住，因为我们为HelloWorldComponent配置了app-hello-world选择器，所以要在模板中使用。让我们把标签添加到 app.component.html 中。

code/first_app/angular2_hello_world/src/app/app.component.html

  {{title}}  

现在，刷新该页面就会看到如图1-4所示结果。

图1-4　“Hello world”一切正常

工作正常！

1.4　把数据添加到组件中

现在，该组件渲染了一个静态模板。这表示我们的组件还不够有趣。

设想有一个应用会显示一个用户列表，并且我们想在其中显示用户的名字。在渲染整个列表之前，需要先渲染一个单独的用户。因此，我们来创建一个新的组件，它将显示用户的名字。

再次使用ng generate命令：

ng generate component user-item

记住，想看到我们创建好的组件，就要把它添加到一个模板中。

让我们把app-user-item标签添加到app.component.html中，以便看到所作的改动。把app.component.html修改成下面这样。

code/first_app/angular2_hello_world/src/app/app.component.html

  {{title}}    

然后刷新页面，并确认你在该页看到文本 user-item works!。

我们希望UserItemComponent显示一个指定用户的名字。

因此，引入name并声明为组件的一个新属性。有了name属性，我们就能在不同的用户之间复用该组件了（但要求页面脚本、逻辑和样式相同）。

为了添加名字，我们要在UserItemComponent类上引入一个属性，来声明该组件有一个名叫name的局部变量。

code/first_app/angular2_hello_world/src/app/user-item/user-item.component.ts

export class UserItemComponent implements OnInit {  name: string; // <-- added name property  constructor() {    this.name = 'Felipe'; // set the name  }  ngOnInit() {  }}

注意，我们改变了以下两点。

1. name属性

   我们往UserItemComponent类添加了一个属性。注意，这相对于 ES5 JavaScript 来说是个新语法。在name:string;中，name是我们想设置的属性名，而string是该属性的类型。

   为name指定类型是 TypeScript 中的特性，用来确保它的值必须是string。这些代码在UserItemComponent类的实例中设置了一个名为name的属性，并且编译器会确保name是一个string。

2. 构造函数

   在UserItemComponent类中，我们定义了一个构造函数。这个函数会在创建这个类的实例时自动调用。

   在我们的构造函数中，可以通过this.name来设置name属性。

   如果这样写：

   code/first_app/angular2_hello_world/src/app/user-item/user-item.component.ts

     constructor() {    this.name = 'Felipe'; // set the name  }

   就表示当一个新的UserItemComponent组件被创建时，把name设置为'Felipe'。

   • 渲染模板

     填好这个值之后，我们可以用模板语法（也就是双花括号语法{{ }}）在模板中显示该变量的值。

     code/first_app/angular2_hello_world/src/app/user-item/user-item.component.html

       Hello {{ name }}

     注意，我们在template中引入了一个新的语法：{{ name }}。这些括号叫作“模板标签”（也叫“小胡子标签”）。模板标签中间的任何东西都会被当作一个表达式来展开。这里，因为template是绑定到组件上的，所以name将会被展开为this.name的值，也就是'Felipe'。

3. 试试看

   进行这些修改之后，重新加载页面，页面上应该显示 Hello Felipe，如图1-5所示。

   

   图1-5　带有数据的应用

TypeScript

2.1　Angular 是用 TypeScript 构建的

Angular 是用一种类似于 JavaScript 的语言——TypeScript{1[http://www.typescriptlang.org/]}——构建的。

或许你会对用新语言来开发 Angular 心存疑虑，但事实上，在开发 Angular 应用时，我们有充分的理由用 TypeScript 代替普通的 JavaScript。

TypeScript 并不是一门全新的语言，而是 ES6 的超集。所有的 ES6 代码都是完全有效且可编译的TypeScript 代码。图2-1展示了它们之间的关系。

图2-1　ES5、ES6 和 TypeScript

什么是 ES5？什么是 ES6？ES5 是 ECMAScript 5 的缩写，也被称为“普通的 JavaScript”。ES5 就是大家熟知的 JavaScript，它能够运行在大部分浏览器上。ES6 则是下一个版本的 JavaScript，在后续章节中我们还会深入讨论它。

在本书出版的时候，支持 ES6 的浏览器还很少，更不用说 TypeScript 了。我们用转译器来解决这个问题。TypeScript 转译器能把 TypeScript 代码转换为几乎所有浏览器都支持的 ES5 代码。

从 TypeScript 代码到 ES5 代码的唯一转换器是由 TypeScript 核心团队编写的。然而，将 ES6 代码（不是 TypeScript 代码）转换到 ES5 代码则有两个主要的转换器：Google 开发的 Traceur{2[https://github.com/google/traceur-compiler]}与 JavaScript 社区创建的 Babel{3[https://babeljs.io/]}。在本书中我们并不会直接使用它们，但它们也是值得了解的不错项目。

我们在上一章安装了 TypeScript 环境，如果你是从本章开始学习的，那么可以这样安装 TypeScript 环境：npm install -g typescript。

TypeScript 是 Microsoft 和 Google 之间的官方合作项目。有这两家强有力的科技巨头在背后支撑，对于我们来说是个好消息，因为这表示 TypeScript 将会得到长期的支持。这两家公司都承诺全力推动 Web 技术的发展，我们这些开发人员显然会获益匪浅。

另外，转译器的好处还在于：它允许小型团队对语言进行改善，而不必要求所有人都去升级他们的浏览器。

需要指出的是：TypeScript 并不是开发 Angular 应用的必选语言。我们同样可以使用 ES5 代码（即“普通”JavaScript）来开发 Angular 应用。Angular 也为全部功能提供了 ES5 API。那么为什么我们还要使用 TypeScript 呢？这是因为 TypeScript 有不少强大的功能，能极大地简化开发。

2.2　TypeScript 提供了哪些特性

TypeScript 相对于 ES5 有五大改善：

• 类型

• 类

• 注解

• 模块导入

• 语言工具包（比如，解构）

接下来我们逐个介绍。

2.3　类型

顾名思义，相对于 ES6，TypeScript 最大的改善是增加了类型系统。

有些人可能会觉得，缺乏类型检查正是 JavaScript 这些弱类型语言的优点。也许你对类型检查心存疑虑，但我仍然鼓励你试一试。类型检查的好处有：

(1) 有助于代码的编写，因为它可以在编译期预防 bug；

(2) 有助于代码的阅读，因为它能清晰地表明你的意图。

另外值得一提的是，TypeScript 中的类型是可选的。如果希望写一些快速代码或功能原型，可以首先省略类型，然后再随着代码日趋成熟逐渐加上类型。

TypeScript 的基本类型与我们平时所写 JavaScript 代码中用的隐式类型一样，包括字符串、数字、布尔值等。

直到 ES5，我们都在用var关键字定义变量，比如var name;。

TypeScript 的新语法是从 ES5 自然演化而来的，仍沿用var来定义变量，但现在可以同时为变量名提供可选的变量类型了：

var name: string;

在声明函数时，也可以为函数参数和返回值指定类型：

function greetText(name: string): string {  return "Hello " + name;}

这个例子中，我们定义了一个名为greetText的新函数，它接收一个名为name的参数。name: string语法表示函数想要的name参数是string类型。如果给该函数传一个string以外的参数，代码将无法编译通过。对我们来说，这是好事，否则这段代码将会引入 bug。

或许你还注意到了，greetText函数在括号后面还有一个新语法:string {。冒号之后指定的是该函数的返回值类型，在本例中为string。这很有用，原因有二：如果不小心让函数返回了一个非string型的返回值，编译器就会告诉我们这里有错误；使用该函数的开发人员也能很清晰地知道自己将会拿到什么类型的数据。

我们来看看如果写了不符合类型声明的代码会怎样：

function hello(name: string): string {    return 12;}

当尝试编译代码时，将会得到下列错误：

$ tsc compile-error.tscompile-error.ts(2,12): error TS2322: Type 'number' is not assignable to type 'string'.

这是怎么回事？我们尝试返回一个number类型的12，但hello函数期望的返回值类型为string（它是在参数声明的后面以): string {的形式声明的）。

要纠正它，可以把函数的返回值类型改为number：

function hello(name: string): number {    return 12;}

虽然这只是一个小例子，但足以证明类型检查能为我们节省大量调试 bug 的时间。

现在知道了如何使用类型，但怎么才能知道有哪些可用类型呢？接下来我们就会罗列出这些内置的类型，并教你如何创建自己的类型。

尝试 REPL

为了运行本章中的例子，我们要先安装一个小工具，名为 TSUN{4[https://github.com/HerringtonDarkholme/typescript-repl]}（TypeScript Upgraded Node，支持 TypeScript 的升级版 Node）：

$ npm install -g tsun

接着启动它：

$ tsunTSUN : TypeScript Upgraded Nodetype in TypeScript expression to evaluatetype :help for commands in repl>

这个小小的>是一个命令提示符，表示 TSUN 已经准备好接收命令了。

对于本章后面的大部分例子，你都可以复制粘贴到这个终端窗口中运行。

2.4　内置类型

2.4.1　字符串

字符串包含文本，声明为string类型：

var name: string = 'Felipe';

2.4.2　数字

无论整数还是浮点，任何类型的数字都属于number类型。在 TypeScript 中，所有的数字都是用浮点数表示的，这些数字的类型就是number：

var age: number = 36;

2.4.3　布尔类型

布尔类型（boolean）以true（真）和false（假）为值。

var married: boolean = true;

2.4.4　数组

数组用Array类型表示。然而，因为数组是一组相同数据类型的集合，所以我们还需要为数组中的条目指定一个类型。

我们可以用Array或者type[]语法来为数组条目指定元素类型：

var jobs: Array = ['IBM', 'Microsoft', 'Google'];var jobs: string[] = ['Apple', 'Dell', 'HP'];

数字型数组的声明与之类似：

var jobs: Array = [1, 2, 3];var jobs: number[] = [4, 5, 6];

2.4.5　枚举

枚举是一组可命名数值的集合。比如，如果我们想拿到某人的一系列角色，可以这么写：

enum Role {Employee, Manager, Admin};var role: Role = Role.Employee;

默认情况下，枚举类型的初始值是0。我们也可以调整初始化值的范围：

enum Role {Employee = 3, Manager, Admin};var role: Role = Role.Employee;

在上面的代码中，Employee的初始值被设置为3而不是0。枚举中其他项的值是依次递增的，意味着Manager的值为4，Admin的值为5。同样，我们也可以单独为枚举中的每一项指定值：

enum Role {Employee = 3, Manager = 5, Admin = 7};var role: Role = Role.Employee;

还可以从枚举的值来反查它的名称：

enum Role {Employee, Manager, Admin};console.log('Roles: ', Role[0], ',', Role[1], 'and', Role[2]);

2.4.6　任意类型

如果我们没有为变量指定类型，那它的默认类型就是any。在TypeScript中，any类型的变量能够接收任意类型的数据：

var something: any = 'as string';something = 1;something = [1, 2, 3];

2.4.7　“无”类型

void意味着我们不期望那里有类型。它通常用作函数的返回值，表示没有任何返回值：

function setName(name: string): void {  this.name = name;}

2.5　类

JavaScript ES5 采用的是基于原型的面向对象设计。这种设计模型不使用类，而是依赖于原型。

JavaScript 社区采纳了大量最佳实践，以弥补 JavaScript 缺少类的问题。这些最佳实践已经被总结在 Mozilla 的开发指南中了{5[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide]}，你还可以找到一篇关于 JavaScript 面向对象设计的优秀概述{6[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript]}。

不过，在 ES6 中，我们终于有内置的类了。

用class关键字来定义一个类，紧随其后的是类名和类的代码块：

class Vehicle {}

类可以包含属性、方法以及构造函数。

2.5.1　属性

属性定义了类实例对象的数据。比如名叫Person的类可能有first_name、last_name和age属性。

类中的每个属性都可以包含一个可选的类型。比如，我们可以把first_name和last_name声明为字符串类型（string），把age声明为数字类型（number）。

Person类的声明是这样的：

class Person {  first_name: string;  last_name: string;  age: number;}

2.5.2　方法

方法是运行在类对象实例上下文中的函数。在调用对象的方法之前，必须要有这个对象的实例。

要实例化一个类，我们使用new关键字。比如new Person()会创建一个Person类的实例对象。

如果我们希望问候某个Person，就可以这样写：

    class Person {      first_name: string;      last_name: string;      age: number;      greet() {         console.log("Hello", this.first_name);      }    }

注意，借助this关键字，我们能用this.first_name表达式来访问Person类的first_name属性。

如果没有显式声明过方法的返回类型和返回值，就会假定它可能返回任何东西（即any类型）。然而，因为这里没有任何显式的return语句，所以实际返回的类型是void。

注意，void类型也是一种合法的any类型。

调用greet方法之前，我们要有一个Person类的实例对象。代码如下：

    // declare a variable of type Person    var p: Person;    // instantiate a new Person instance    p = new Person();    // give it a first_name    p.first_name = 'Felipe';    // call the greet method    p.greet();

我们还可以将对象的声明和实例化缩写为一行代码：

var p: Person = new Person();

假设我们希望Person类有一个带返回值的方法。比如，要获取某个Person在数年后的年龄，我们可以这样写：

    class Person {      first_name: string;      last_name: string;      age: number;      greet() {        console.log("Hello", this.first_name);      }      ageInYears(years: number): number {        return this.age + years;      }    }    // instantiate a new Person instance    var p: Person = new Person();    // set initial age    p.age = 6;    // how old will he be in 12 years?    p.ageInYears(12);    // -> 18

2.5.3　构造函数

构造函数是当类进行实例化时执行的特殊函数。通常会在构造函数中对新对象进行初始化工作。

构造函数必须命名为constructor。因为构造函数是在类被实例化时调用的，所以它们可以有输入参数，但不能有任何返回值。

我们要通过调用new ClassName()来执行构造函数，以完成类的实例化。

当类没有显式地定义构造函数时，将自动创建一个无参构造函数：

class Vehicle {}var v = new Vehicle();

它等价于：

class Vehicle {  constructor() {  }}var v = new Vehicle();

在 TypeScript 中，每个类只能有一个构造函数。

这是违背 ES6 标准的。在 ES6 中，一个类可以拥有不同参数数量的多个构造函数重载实现。

我们可以使用带参数的构造函数来将对象的创建工作参数化。

比如，我们可以对Person类使用构造函数来初始化它的数据：

    class Person {      first_name: string;      last_name: string;      age: number;      constructor(first_name: string, last_name: string, age: number) {        this.first_name = first_name;        this.last_name = last_name;        this.age = age;      }      greet() {        console.log("Hello", this.first_name);      }      ageInYears(years: number): number {        return this.age + years;      }    }

用下面这种方法重写前面的例子要容易些：

var p: Person = new Person('Felipe', 'Coury', 36);p.greet();

当创建这个对象的时候，其姓名、年龄都会被初始化。

2.5.4　继承

面向对象的另一个重要特性就是继承。继承表明子类能够从父类得到它的行为。然后，我们就可以在这个子类中重写、修改以及添加行为。

如果要深入了解 ES5 的继承是如何工作的，可以参考 Mozilla 开发文档中的文章“Inheritance and the prototype chain”{7[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain]}。

TypeScript 是完全支持继承特性的，并不像 ES5 那样要靠原型链实现。继承是 TypeScript 的核心语法，用extends关键字实现。

要说明这一点，我们来创建一个Report类：

    class Report {      data: Array;      constructor(data: Array) {        this.data = data;      }      run() {        this.data.forEach(function(line) { console.log(line); });      }    }

这个Report类有一个字符串数组类型的data的属性。当我们调用run方法时，它会循环这个data数组中的每一项数据，然后用console.log打印出来。

　.forEach是Array中的一个方法，它接收一个函数作为参数，并对数组中的每一个条目逐个调用该函数。

给Report增加几行数据，并调用run把这些数据打印到控制台：

var r: Report = new Report(['First line', 'Second line']);r.run();

运行结果如下：

First lineSecond line

现在，假设我们希望有第二个报表，它需要增加一些头信息和数据，但我们仍想复用现有Report类的run方法来向用户展示数据。

为了复用Report类的行为，要使用extends关键字来继承它：

    class TabbedReport extends Report {      headers: Array;      constructor(headers: string[], values: string[]) {        super(values)        this.headers = headers;      }      run() {        console.log(this.headers);        super.run();      }    }var headers: string[] = ['Name'];var data: string[] = ['Alice Green', 'Paul Pfifer', 'Louis Blakenship'];var r: TabbedReport = new TabbedReport(headers, data)r.run();

2.6　工具

ES6 和 TypeScript 提供了许多语法特性，让编码成为一种享受。其中最重要的两点是：

• 胖箭头函数语法

• 模板字符串

2.6.1　胖箭头函数

胖箭头（=>）函数是一种快速书写函数的简洁语法。

在 ES5 中，每当我们要用函数作为方法参数时，都必须用function关键字和紧随其后的花括号（{}）表示。就像这样：

// ES5-like examplevar data = ['Alice Green', 'Paul Pfifer', 'Louis Blakenship'];data.forEach(function(line) { console.log(line); });

现在我们可以用=>语法来重写它了：

// Typescript examplevar data: string[] = ['Alice Green', 'Paul Pfifer', 'Louis Blakenship'];data.forEach( (line) => console.log(line) );

当只有一个参数时，圆括号可以省略。箭头（=>）语法可以用作表达式：

var evens = [2,4,6,8];var odds = evens.map(v => v + 1);

也可以用作语句：

data.forEach( line => {  console.log(line.toUpperCase())});

=>语法还有一个重要的特性，就是它和环绕它的外部代码共享同一个this。这是它和普通function写法最重要的不同点。通常，我们用function声明的函数有它自己的this。有时在 JavaScript 中能看见如下代码：

var nate = {  name: "Nate",  guitars: ["Gibson", "Martin", "Taylor"],  printGuitars: function() {    var self = this;    this.guitars.forEach(function(g) {      // this.name is undefined so we have to use self.name      console.log(self.name + " plays a " + g);    });  }};

由于胖箭头会共享环绕它的外部代码的this，我们可以这样改写：

var nate = {  name: "Nate",  guitars: ["Gibson", "Martin", "Taylor"],  printGuitars: function() {    this.guitars.forEach( (g) => {      console.log(this.name + " plays a " + g);    });  }};

可见，箭头函数是处理内联函数的好办法。这也让我们在 JavaScript 中更容易使用高阶函数。

2.6.2　模板字符串

ES6 引入了新的模板字符串语法，它有两大优势：

(1) 可以在模板字符串中使用变量（不必被迫使用+来拼接字符串）；

(2) 支持多行字符串。

1. 字符串中的变量

   这种特性也叫字符串插值（string interpolation）。你可以在字符串中插入变量，做法如下：

   var firstName = "Nate";var lastName = "Murray";// interpolate a stringvar greeting = `Hello ${firstName} ${lastName}`;console.log(greeting);

   注意，字符串插值必须使用反引号，不能用单引号或双引号。

2. 多行字符串

   反引号字符串的另一个优点是允许多行文本：

   var template = `
     
   Hello
     
   This is a great website
   `// do something with `template`

   当我们要插入模板这样的长文本字符串时，多行字符串会非常有帮助。

2.7　总结

在 TypeScript 和 ES6 中还有很多其他的优秀语法特性，如：

• 接口

• 泛型

• 模块的导入、导出

• 标注

• 解构

我们会在本书的后续章节中讲到这些概念并使用它们。目前，本章的这些基本知识已经足够你开始学习 Angular 了。

言归正传，让我们回到 Angular 吧！

编写你的第一个 Angular Web 应用（中）

编写你的第一个 Angular Web 应用（下）

Angular 的工作原理（上）

Angular 的工作原理（下）

内置指令

Angular 中的表单（上）

Angular 中的表单（下）

HTTP（上）

HTTP（下）

路由（上）

路由（中）

路由（下）

依赖注入（上）

依赖注入（下）

Angular 数据架构

使用可观察对象的数据架构 第1部分：服务（上）

使用可观察对象的数据架构 第1部分：服务（中）

使用可观察对象的数据架构 第1部分：服务（下）

使用可观察对象的数据架构 第2部分：视图组件（上）

使用可观察对象的数据架构 第2部分：视图组件（下）

基于 TypeScript 的 Redux 简介（上）

基于 TypeScript 的 Redux 简介（中）

基于 TypeScript 的 Redux 简介（下）

在 Angular 中引入 Redux （上）

在 Angular 中引入 Redux （中）

在 Angular 中引入 Redux （下）

高级组件（上）

高级组件（中）

高级组件（下）

测试（上）

测试（中）

测试（下）

把 AngularJS 应用升级到 Angular（上）

把 AngularJS 应用升级到 Angular（中）

把 AngularJS 应用升级到 Angular（下）

阅读全文: http://gitbook.cn/gitchat/geekbook/5a5826ece286423809d4a847

你可能感兴趣的:(Angular 权威教程)

• 【Python】一文详细介绍 py格式 文件 高斯小哥 Python基础【高质量合集】python新手入门学习
  【Python】一文详细介绍py格式文件个人主页：高斯小哥高质量专栏：Matplotlib之旅：零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程希望得到您的订阅和支持~创作高质量博文(平均质量分92+)，分享更多关于深度学习、PyTorch、Python领域的优质内容！（希望得到您的关注~）文章目录一、py格式文件简介二、如何创建和编辑py格式文件三、如何运行py
• 天猫超市优惠获取渠道，天猫超市内部优惠劵领取方法使用教程 氧惠全网优惠
  天猫超市是一个不错的购物平台，满足用户所需，基本次日达，很方便的购物平台，那么有人问我，天猫超市优惠获取渠道在哪？怎么能够优惠的购买，今天分享给大家；1、天猫超市优惠券抢好券：天猫超市首页每天可以领取满199减30、满235减35、满299减50、满399减60、满166减30等优惠券，领劵方法复制下条口令打开淘宝进入领劵会场；隐藏神券、实时爆款、天天更新！戳>(CZ9185ZatcdhNADlJ
• 你之所以胖，可能是因为小时候发生这件事！还不赶快甩锅 周围_5d19
  通常，我们认为，“肥胖”主要是由于饮食不节制、不经常运动等等因素引起的。但最近，我国学者开展的一项针对6到18岁儿童青少年、随访长达十年的代谢综合征研究结果，在权威国际期刊发表。研究发现，儿童的肥胖和超重与睡眠密切相关，儿童、青少年时期睡眠不好，成人后也更容易患心血管疾病。那么，为什么儿童青少年睡眠不足会导致肥胖呢？今天就带大家一探究竟。儿童青少年肥胖的现状如何？近日，一项刊载在医学权威期刊《柳叶
• yarn的安装和使用全网最详细教程 zxj19880502 yarnnpm
  一、yarn的简介：Yarn是facebook发布的一款取代npm的包管理工具。二、yarn的特点：速度超快。Yarn缓存了每个下载过的包，所以再次使用时无需重复下载。同时利用并行下载以最大化资源利用率，因此安装速度更快。超级安全。在执行代码之前，Yarn会通过算法校验每个安装包的完整性。超级可靠。使用详细、简洁的锁文件格式和明确的安装算法，Yarn能够保证在不同系统上无差异的工作。三、yarn的
• 谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程 pigerr杨 Pythonpythonchromedrivers
  ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装
• 4.24 使用计算命令制作图像合成艺术效果 [Ps教程] 互动教程网
  1.本节课程将为您演示，如何使用[计算]命令，将两张示例图片，制作成超酷的图像合成特效。首先点击顶部的文档标签，切换至另一张示例图片。image2.接着依次点击[图像>计算]命令，弹出[计算]窗口。image3.[计算]命令，用于混合两个来自一个或多个源图像的单个通道。然后可以将结果应用到新图像、新通道或当前图像的选区中。image4.在弹出的计算窗口中，点击下拉箭头，选择[计算]命令的源图片。i
• Ai插件脚本合集安装包，免费教程视频网盘分享 全网优惠分享君
  随着人工智能技术的不断发展，越来越多的插件脚本涌现出来，为我们的生活和工作带来了便利。然而，如何快速、方便地获取和使用这些插件脚本呢？今天，我将为大家分享一个非常实用的资源——AI插件脚本合集安装包，以及免费教程视频网盘分享。首先，让我们来了解一下这个AI插件脚本合集安装包。它是一个集合了众多AI插件脚本的资源包，涵盖了各种领域，如数据分析、自动化办公、智能客服等等。通过这个安装包，用户可以轻松地
• natapp内网穿透工具 万变不离其宗_8 工具其他
  1.NATAPP1分钟快速新手图文教程https://natapp.cn/article/natapp_newbie2.下载https://natapp.cn/#download3.使用本地配置文件config.ini，下载地址如下：https://natapp.cn/article/config_ini
• Android 系统应用 pk8签名文件转jks或keystore教程 蜗牛、Z AOSPandroidFrameworkandroidaosp系统应用开发
  一、介绍签名文件对于我们在做应用开发中，经常遇到，且签名文件不仅仅是保护应用安全，还会涉及到应用与底层之间的数据共享和API文件等问题。在Android中，签名文件同样也存在这个问题。但是android中又区分系统应用和普通应用。系统应用可以通过android:sharedUserId="android.uid.system"同享系统uid，可以获取更高的权限。所以在做系统应用开发的时候，经常需要
• 【Git安装及使用学习笔记】 可可西里啊 零零散散的学习笔记git学习笔记c++qt5
  Git学习笔记Git安装Git创建本地版本库以及提交文件使用Git提交代码到码云使用Git从码云拉取代码参考博客Git安装这里参考Git详细安装教程（详解Git安装过程的每一个步骤）Git创建本地版本库以及提交文件1.查看git版本信息：git--version2.设置对应用户名与邮箱地址gitconfig--globaluser.name"your_usernamegitconfig--glob
• 【Python】成功解决ModuleNotFoundError: No module named ‘torchinfo‘ 高斯小哥 BUG解决方案合集pythonpytorch新手入门学习debug
  【Python】成功解决ModuleNotFoundError:Nomodulenamed‘torchinfo’个人主页：高斯小哥高质量专栏：Matplotlib之旅：零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程希望得到您的订阅和支持~创作高质量博文(平均质量分92+)，分享更多关于深度学习、PyTorch、Python领域的优质内容！（希望得到您的关注~）文
• 有没有什么能在家做的工作机会(居家工作的机会有哪些) 多职猫
  有没有什么能在家做的工作机会(居家工作的机会有哪些)，可以让你足不出户，在家中就能轻松从事？这似乎是许多人心中的向往，特别是在当今社会，居家工作逐渐成为一种趋势。那么，有哪些居家工作的机会呢？在这篇文章中，我们将探讨一些可以在家中从事的工作机会，为那些寻找灵活职业的人提供一些建议。推荐一篇找兼职必看的免费教程：《手机兼职，300-500/天，一单一结，大量要人》，在这里可以找到各种手工活兼职，文本
• 百度网盘cps分销佣金玩法揭秘！网盘联盟分销赚钱方法！ 高省浮沉000018
  在百度网盘联盟目前有3种赚钱方式，第一种是自己售卡赚佣金；第二种是外链分享（分销联盟）；第三种是邀请好友加盟，好友售卡，自己得提成收入。在下面，我将为大家带来详细的加入教程、赚钱经验、三种不同的赚钱方式讲解、以及各种规则。该文章内容可能较长，大家耐心观看别忘了点个赞哟。怎么加入（盘主申请入口在哪）答案：通过微信扫二维码加入（完全免费）扫二维码入口：加入步骤1.首先，我们在上方使用微信扫描二维码，然
• 汲取智慧力量 践行使命担当 正直的男青年
  《习近平谈治国理政》第四卷是马克思主义中国化时代化最新成果，是全面系统反映习近平新时代中国特色社会主义思想的权威著作。通过细读原著原文，咀嚼原汁原味，领悟原义原理，深刻感悟到：作为组工干部，需要以更加振奋的精神、更加踏实的作风、更加创新的方法、更加高效的落实，打牢底子、勇挑担子，以实干实绩彰显组工担当。一要坚定理想信念，始终忠心向党。《习近平谈治国理政》第四卷中提到：“各级党员、干部特别是领导干部
• HBase入门教程 xmvip01
  1.1Hbase概念术语1、行键RowKey：主键是用来检索记录的主键，访问hbasetable中的行。2、列族ColumnFamily：Table在水平方向有一个或者多个ColumnFamily组成，一个ColumnFamily中可以由任意多个Column组成，即ColumnFamily支持动态扩展，无需预先定义Column的数量以及类型，所有Column均以二进制格式存储，用户需要自行进行类型
• 一单一结的赚钱软件有哪些(推荐热门软件) 幸运副业
  一单一结的赚钱软件有哪些(推荐热门软件)近年来，随着互联网的普及和移动支付的发展，越来越多的人开始寻找一单一结的赚钱软件来提升他们的收入。这种模式以其灵活性和便捷性，吸引了无数人的关注。但是，在市场上出现了众多的赚钱软件，如何选择合适的软件成为了一个重要的问题。在本文中，我们将介绍一些热门的一单一结赚钱软件，帮助你在这个领域做出明智的选择。推荐一篇找兼职必看的免费教程：《手机兼职，300-500/
• 如何通过点击广告赚取零花钱？4个点击广告赚钱平台 幸运副业
  如何通过点击广告赚取零花钱？4个点击广告赚钱平台点击广告赚钱是一个相对容易上手的方式，但是在这个领域中，也存在着许多陷阱和骗局。本文将为您介绍4个可靠的点击广告赚钱平台，帮助您在不出门的情况下轻松赚取零花钱。推荐一篇找兼职必看的免费教程：《手机兼职，300-500/天，一单一结，大量要人》在这里可以找到各种数据标注兼职，打字聊天员兼职，打字录入兼职等适合大家的岗位。1.点击广告赚钱的背后是什么？首
• Docker(一)：Docker入门教程 蓝胖子的白日梦丶
  如今Docker的使用已经非常普遍，特别在一线互联网公司。使用Docker技术可以帮助企业快速水平扩展服务，从而到达弹性部署业务的能力。在云服务概念兴起之后，Docker的使用场景和范围进一步发展，如今在微服务架构越来越流行的情况下，微服务+Docker的完美组合，更加方便微服务架构运维部署落地。本文详细解释介绍Docker入门相关内容，后期重点关注Docker在微服务体系中的使用。在了解Dock
• 中东媒体软文发稿：阿拉伯.阿联酋.迪拜.卡塔尔地区最受欢迎的媒体 wangye11422 媒体
  大舍传媒中东通讯社中东通讯社是中东地区最重要的新闻机构之一，总部位于阿联酋迪拜。这家机构是中东地区新闻报道的权威，以其及时、准确的新闻报道而闻名。中东通讯社不仅在阿拉伯国家有广泛的影响力，也在国际上享有声誉。其覆盖的领域包括政治、经济、文化、体育等各个方面。该机构致力于**客观、真实、全面的新闻报道，受到广大读者的高度认可。巴林通讯社巴林通讯社是巴林地区最知名的媒体机构之一，总部设在巴林首都麦纳麦
• 突破编程_C++_高级教程（单元测试与 Google Test 教程） breakthrough_01 突破编程_C++_高级教程c++单元测试开发语言
  1单元测试简介单元测试（UnitTesting）是一种编程方法，用于验证代码中的最小可测试单元（通常是函数、方法或模块）是否按照预期工作。在C++中，单元测试通常涉及编写一组测试用例，每个用例都调用一个特定的函数或方法，并验证其返回值或行为是否符合预期。单元测试的目的是确保代码的正确性和可靠性，以及减少在后续开发过程中引入错误的可能性。通过编写单元测试，开发人员可以在不影响其他代码的情况下，独立地
• Lua入门 Lodger007 GameDevelopmentlualinuxc++windows脚本dll
  翻译自http://gamedevgeek.com/tutorials/getting-started-with-lua/Lua入门Lua是一个被设计成用于扩展C/C++编程的轻量级脚本语言。不幸的是，网上很少有关于这个语言的在线教程。我主要通过阅读其源代码来了解它是怎样工作并且通过一些发布的程序学习它。希望，通过下面的教程，会让学习Lua更加简单。本教程涵盖了Lua5.1。在Lua的每一个版本中
• Redis 教程系列之Redis 数据备份与恢复(五) xiaoli8748_软件开发 redis数据库缓存
  RedisSAVE命令用于创建当前数据库的备份。语法redisSave命令基本语法如下：redis127.0.0.1:6379>SAVE实例redis127.0.0.1:6379>SAVEOK该命令将在redis安装目录中创建dump.rdb文件。恢复数据如果需要恢复数据，只需将备份文件(dump.rdb)移动到redis安装目录并启动服务即可。获取redis目录可以使用CONFIG命令，如下所示
• Linux mkswap命令教程：如何设置Linux交换区（附实例详解和注意事项） 我要下东西噢 linuxlinux运维服务器
  Linuxmkswap命令介绍mkswap命令用于在设备或文件上设置Linux交换区。设备参数通常是磁盘分区（例如/dev/sdb7），但也可以是文件。Linux内核不查看分区ID，但许多安装脚本假定十六进制类型82（LINUX_SWAP）的分区是交换分区。Linuxmkswap命令适用的Linux版本mkswap命令适用于所有主流的Linux发行版，包括Debian、Ubuntu、Alpine、
• python基础教程-《Python基础教程(第3版)》PDF高清版 编程大乐趣
  《python基础教程第3版》PDF高清版百度云资源，内涵教材源代码百度云链接：百度云盘提取码：7r7o编辑推荐久负盛名的Python入门经典，是非常优秀的基础教程，深入浅出，讲解到位。本书包括Python程序设计的方方面面：首先从Python的安装开始，随后介绍了Python的基础知识和基本概念，包括列表、元组、字符串、字典以及各种语句；然后循序渐进地介绍了一些相对高级的主题，包括抽象、异常、魔
• springboot项目学习-瑞吉外卖（1） 两仪式quq springboot学习java瑞吉外卖
  第一天任务如下：建立基本架构完成登录、退出功能注意：本博客没有使用网上教程里的mybatis-plus，使用的是mybatis；数据库连接池也没有使用教程里的druid，使用的是spring自带的连接池基本架构common包：存放的通用类R，用来给前端返回Json格式的数据config包：存放配置类，在今天的任务中主要解决静态资源路径映射问题controller包entity包：存放实体类mapp
• 终极指南！3小时内用ChatGPT写完一篇论文 Him__ 人工智能chatgptgptoneapi论文笔记AI写作
  在这篇指南中，我将深入探讨如何利用ChatGPT4.0的强大能力来指导整个学术研究和写作过程。从初步探索研究主题，到撰写出一篇内容充实、结构严谨的学术论文，我会一步步展示如何在各个环节中有效运用ChatGPT。当然，这一切都是基于PLUS版本，如果你还没有的话可以参考：教程初步探索与主题的确定一开始，我置身于广阔的知识海洋中，试图找到那一片我能够深入探索的领域。ChatGPT就像是我的灯塔，通过对
• 阿里云服务器购买之后设置密码、安全组、增加带宽、挂载云盘教程 阿里云最新优惠和活动汇总
  当我们通过阿里云各种活动购买完云服务器之后，设置云服务器远程密码、配置安全组规则是必须操作的，由于活动中的云服务器购买时大多只有1M带宽，且没有数据盘，因此增加带宽和挂载云盘教程也是很多用户会做的事情，很多新手用户由于是初次使用阿里云服务器，因此并不知道这些设置的操作流程，下面给大家介绍下这些设置的具体操作流程。一、为什么要设置密码、安全组、增加带宽、挂载云盘？以云服务器新人特惠活动为例，在下单购
• Docker进阶教程 - 3 虚悬镜像 山石岐渡 Docker进阶教程docker容器运维
  更好的阅读体验：点这里（www.doubibiji.com）3虚悬镜像什么是虚悬镜像（danglingimage）？镜像名、标签都是的镜像。通常在构建的过程中，取消构建、构建出现问题的时候，会出现异常的镜像，这种镜像没有名称和标签。因此，这些镜像被称为虚悬镜像，因为它们“悬浮”在Docker中，没有被任何容器所使用，也不会被Docker清理工具删除。虚悬镜像的产生概率不高，但一旦生成，可能会对系统
• 学生兼职如何最快安全赚钱(学生兼职副业赚钱的方法) 幸运副业
  学生兼职如何最快安全赚钱(学生兼职副业赚钱的方法)然而，如何在保证学业的情况下，最快又安全地赚到钱成为了许多学生关注的焦点。本文将为大家详细介绍学生兼职的方法，并重点推荐一款微信小程序——多职猫兼职平台，让大家能够更加方便快捷地找到适合自己的兼职机会。推荐一篇找兼职必看的免费教程：《手机兼职，300-500/天，一单一结，大量要人》在这里可以找到各种打字录入兼职，数据标注兼职，游戏试玩兼职等适合大
• Ubuntu系统下C语言开发环境搭建与使用教程 洛可可白 后端专栏ubuntuc语言linux
  前言欢迎来到我的技术小宇宙！这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。洛可可白：个人主页个人专栏：✅前端技术✅后端技术个人博客：洛可可白博客代码获取：bestwishes0203封面壁纸：洛可可白wallpaper文章目录Ubuntu系统下C语言开发环境搭建与使用教程教程内容0.序言1.准备工作2.安装SS
• 算法 单链的创建与删除 换个号韩国红果果 c算法
  先创建结构体 struct student { int data; //int tag;//标记这是第几个 struct student *next; }; // addone 用于将一个数插入已从小到大排好序的链中 struct student *addone(struct student *h,int x){ if(h==NULL) //??????
• 《大型网站系统与Java中间件实践》第2章读后感 白糖_ java中间件
         断断续续花了两天时间试读了《大型网站系统与Java中间件实践》的第2章，这章总述了从一个小型单机构建的网站发展到大型网站的演化过程---整个过程会遇到很多困难，但每一个屏障都会有解决方案，最终就是依靠这些个解决方案汇聚到一起组成了一个健壮稳定高效的大型系统。          看完整章内容，
• zeus持久层spring事务单元测试 deng520159 javaDAOspringjdbc
  今天把zeus事务单元测试放出来,让大家指出他的毛病, 1.ZeusTransactionTest.java 单元测试   package com.dengliang.zeus.webdemo.test; import java.util.ArrayList; import java.util.List; import org.junit.Test; import
• Rss 订阅 开发 周凡杨 htmlxml订阅rss规范
                  RSS是 Really Simple Syndication的缩写（对rss2.0而言，是这三个词的缩写，对rss1.0而言则是RDF Site Summary的缩写，1.0与2.0走的是两个体系）。   RSS
• 分页查询实现 g21121 分页查询
  在查询列表时我们常常会用到分页，分页的好处就是减少数据交换，每次查询一定数量减少数据库压力等等。 按实现形式分前台分页和服务器分页： 前台分页就是一次查询出所有记录，在页面中用js进行虚拟分页，这种形式在数据量较小时优势比较明显，一次加载就不必再访问服务器了，但当数据量较大时会对页面造成压力，传输速度也会大幅下降。 服务器分页就是每次请求相同数量记录，按一定规则排序，每次取一定序号直接的数据
• spring jms异步消息处理 510888780 jms
  spring JMS对于异步消息处理基本上只需配置下就能进行高效的处理。其核心就是消息侦听器容器，常用的类就是DefaultMessageListenerContainer。该容器可配置侦听器的并发数量，以及配合MessageListenerAdapter使用消息驱动POJO进行消息处理。且消息驱动POJO是放入TaskExecutor中进行处理，进一步提高性能，减少侦听器的阻塞。具体配置如下：
• highCharts柱状图 布衣凌宇 hightCharts柱图
  第一步：导入 exporting.js,grid.js,highcharts.js;第二步：写controller   @Controller@RequestMapping(value="${adminPath}/statistick")public class StatistickController {  private UserServi
• 我的spring学习笔记2-IoC（反向控制 依赖注入） aijuans springmvcSpring 教程spring3 教程Spring 入门
  IoC（反向控制 依赖注入）这是Spring提出来了，这也是Spring一大特色。这里我不用多说，我们看Spring教程就可以了解。当然我们不用Spring也可以用IoC，下面我将介绍不用Spring的IoC。 IoC不是框架，她是java的技术，如今大多数轻量级的容器都会用到IoC技术。这里我就用一个例子来说明： 如：程序中有 Mysql.calss 、Oracle.class 、SqlSe
• TLS java简单实现 antlove javasslkeystoretlssecure
    1. SSLServer.java package ssl; import java.io.FileInputStream; import java.io.InputStream; import java.net.ServerSocket; import java.net.Socket; import java.security.KeyStore; import
• Zip解压压缩文件 百合不是茶 Zip格式解压Zip流的使用文件解压
     ZIP文件的解压缩实质上就是从输入流中读取数据。Java.util.zip包提供了类ZipInputStream来读取ZIP文件,下面的代码段创建了一个输入流来读取ZIP格式的文件; ZipInputStream in = new ZipInputStream(new FileInputStream(zipFileName));     &n
• underscore.js 学习（一） bijian1013 JavaScriptunderscore
          工作中需要用到underscore.js，发现这是一个包括了很多基本功能函数的js库，里面有很多实用的函数。而且它没有扩展 javascript的原生对象。主要涉及对Collection、Object、Array、Function的操作。       学
• java jvm常用命令工具——jstatd命令(Java Statistics Monitoring Daemon) bijian1013 javajvmjstatd
  1.介绍         jstatd是一个基于RMI（Remove Method Invocation）的服务程序，它用于监控基于HotSpot的JVM中资源的创建及销毁，并且提供了一个远程接口允许远程的监控工具连接到本地的JVM执行命令。         jstatd是基于RMI的，所以在运行jstatd的服务
• 【Spring框架三】Spring常用注解之Transactional bit1129 transactional
  Spring可以通过注解@Transactional来为业务逻辑层的方法(调用DAO完成持久化动作)添加事务能力，如下是@Transactional注解的定义：   /* * Copyright 2002-2010 the original author or authors. * * Licensed under the Apache License, Version
• 我(程序员)的前进方向 bitray 程序员
  作为一个普通的程序员,我一直游走在java语言中,java也确实让我有了很多的体会.不过随着学习的深入,java语言的新技术产生的越来越多,从最初期的javase,我逐渐开始转变到ssh,ssi,这种主流的码农,.过了几天为了解决新问题,webservice的大旗也被我祭出来了,又过了些日子jms架构的activemq也开始必须学习了.再后来开始了一系列技术学习,osgi,restful.....
• nginx lua开发经验总结 ronin47
  使用nginx lua已经两三个月了，项目接开发完毕了，这几天准备上线并且跟高德地图对接。回顾下来lua在项目中占得必中还是比较大的，跟PHP的占比差不多持平了，因此在开发中遇到一些问题备忘一下 1：content_by_lua中代码容量有限制，一般不要写太多代码，正常编写代码一般在100行左右（具体容量没有细心测哈哈，在4kb左右），如果超出了则重启nginx的时候会报 too long pa
• java-66-用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。颠倒之后的栈为{5,4,3,2,1}，5处在栈顶 bylijinnan java
  import java.util.Stack; public class ReverseStackRecursive { /** * Q 66.颠倒栈。 * 题目：用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。 * 颠倒之后的栈为{5,4,3,2,1}，5处在栈顶。 *1. Pop the top element *2. Revers
• 正确理解Linux内存占用过高的问题 cfyme linux
  Linux开机后，使用top命令查看，4G物理内存发现已使用的多大3.2G，占用率高达80%以上： Mem:   3889836k total,  3341868k used,   547968k free,   286044k buffers Swap:  6127608k total,&nb
• [JWFD开源工作流]当前流程引擎设计的一个急需解决的问题 comsci 工作流
       当我们的流程引擎进入IRC阶段的时候，当循环反馈模型出现之后，每次循环都会导致一大堆节点内存数据残留在系统内存中，循环的次数越多，这些残留数据将导致系统内存溢出，并使得引擎崩溃。。。。。。       而解决办法就是利用汇编语言或者其它系统编程语言，在引擎运行时，把这些残留数据清除掉。
• 自定义类的equals函数 dai_lm equals
  仅作笔记使用 public class VectorQueue { private final Vector<VectorItem> queue; private class VectorItem { private final Object item; private final int quantity; public VectorI
• Linux下安装R语言 datageek R语言 linux
  命令如下：sudo gedit  /etc/apt/sources.list1、deb http://mirrors.ustc.edu.cn/CRAN/bin/linux/ubuntu/ precise/ 2、deb http://dk.archive.ubuntu.com/ubuntu hardy universesudo apt-key adv --keyserver ke
• 如何修改mysql 并发数(连接数)最大值 dcj3sjt126com mysql
  MySQL的连接数最大值跟MySQL没关系，主要看系统和业务逻辑了   方法一：进入MYSQL安装目录 打开MYSQL配置文件 my.ini 或 my.cnf查找 max_connections=100 修改为 max_connections=1000 服务里重起MYSQL即可 　　方法二：MySQL的最大连接数默认是100客户端登录：mysql -uusername -ppass
• 单一功能原则 dcj3sjt126com 面向对象的程序设计软件设计编程原则
  单一功能原则[ 编辑]     SOLID 原则 单一功能原则 开闭原则 Liskov代换原则 接口隔离原则 依赖反转原则 查   论   编 在面向对象编程领域中，单一功能原则（Single responsibility principle）规定每个类都应该有
• POJO、VO和JavaBean区别和联系 fanmingxing VOPOJOjavabean
  POJO和JavaBean是我们常见的两个关键字，一般容易混淆，POJO全称是Plain Ordinary Java Object / Plain Old Java Object，中文可以翻译成：普通Java类，具有一部分getter/setter方法的那种类就可以称作POJO，但是JavaBean则比POJO复杂很多，JavaBean是一种组件技术，就好像你做了一个扳子，而这个扳子会在很多地方被
• SpringSecurity3.X--LDAP：AD配置 hanqunfeng SpringSecurity
  前面介绍过基于本地数据库验证的方式，参考http://hanqunfeng.iteye.com/blog/1155226，这里说一下如何修改为使用AD进行身份验证【只对用户名和密码进行验证，权限依旧存储在本地数据库中】。   将配置文件中的如下部分删除： <!-- 认证管理器，使用自定义的UserDetailsService，并对密码采用md5加密-->
• mac mysql 修改密码 IXHONG mysql
  $ sudo /usr/local/mysql/bin/mysqld_safe –user=root & //启动MySQL(也可以通过偏好设置面板来启动)$ sudo /usr/local/mysql/bin/mysqladmin -uroot password yourpassword //设置MySQL密码（注意，这是第一次MySQL密码为空的时候的设置命令，如果是修改密码，还需在-
• 设计模式--抽象工厂模式 kerryg 设计模式
  抽象工厂模式：     工厂模式有一个问题就是，类的创建依赖于工厂类，也就是说，如果想要拓展程序，必须对工厂类进行修改，这违背了闭包原则。我们采用抽象工厂模式，创建多个工厂类，这样一旦需要增加新的功能，直接增加新的工厂类就可以了，不需要修改之前的代码。     总结：这个模式的好处就是，如果想增加一个功能，就需要做一个实现类，
• 评"高中女生军训期跳楼” nannan408
     首先，先抛出我的观点，各位看官少点砖头。那就是，中国的差异化教育必须做起来。    孔圣人有云：有教无类。不同类型的人，都应该有对应的教育方法。目前中国的一体化教育，不知道已经扼杀了多少创造性人才。我们出不了爱迪生，出不了爱因斯坦，很大原因，是我们的培养思路错了，我们是第一要“顺从”。如果不顺从，我们的学校，就会用各种方法，罚站，罚写作业，各种罚。军
• scala如何读取和写入文件内容？ qindongliang1922 javajvmscala
  直接看如下代码： package file import java.io.RandomAccessFile import java.nio.charset.Charset import scala.io.Source import scala.reflect.io.{File, Path} /** * Created by qindongliang on 2015/
• C语言算法之百元买百鸡 qiufeihu c算法
  中国古代数学家张丘建在他的《算经》中提出了一个著名的“百钱买百鸡问题”，鸡翁一，值钱五，鸡母一，值钱三，鸡雏三，值钱一，百钱买百鸡，问翁，母，雏各几何？ 代码如下： #include <stdio.h> int main() { int cock,hen,chick; /*定义变量为基本整型*/ for(coc
• Hadoop集群安全性：Hadoop中Namenode单点故障的解决方案及详细介绍AvatarNode wyz2009107220 NameNode
  正如大家所知，NameNode在Hadoop系统中存在单点故障问题，这个对于标榜高可用性的Hadoop来说一直是个软肋。本文讨论一下为了解决这个问题而存在的几个solution。 1. Secondary NameNode 原理：Secondary NN会定期的从NN中读取editlog，与自己存储的Image进行合并形成新的metadata image 优点：Hadoop较早的版本都自带，

按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他

首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.