从头构建自己的AngularJS：深入了解框架核心实现

需积分: 7 194 浏览量更新于2024-07-18 收藏 4.12MB PDF 举报

创建你自己的 AngularJS AngularJS 是一个流行的 JavaScript 框架，用于构建复杂的单页应用程序。要充分理解 AngularJS 的内部核心实现，需要具备一定的 JavaScript 编程能力和测试驱动开发（TDD）模式的经验。本文将从 AngularJS 的内部机理入手，介绍如何创建自己的 AngularJS 框架，并探讨 TDD 开发模式对 JavaScript 能力的提升。 AngularJS 的核心是 Scope 和 Digest 机制。Scope 是 AngularJS 中的核心概念，负责管理应用程序的状态和行为。Digest 机制是 AngularJS 的核心机理，负责检测和更新应用程序的状态。了解Scope 和 Digest 机制是创建自己的 AngularJS 框架的基础。在创建自己的 AngularJS 框架时，需要了解以下几个关键概念： 1. Scopes 和 Digest：了解 Scope 的生命周期、Scope 对象的创建和销毁、Digest 机制的工作原理等。 2. Watching Object Properties：了解如何使用 $watch 和 $digest 方法来检测和更新应用程序的状态。 3. Checking for Dirty Values：了解如何检查对象属性的变化和检测应用程序的状态。 4. Initializing Watch Values：了解如何初始化 Watch 值和检测应用程序的状态。 5. Getting Notified of Digests：了解如何获取 Digest 事件通知和检测应用程序的状态。 6. Keep Digesting While Dirty：了解如何在检测到脏值时继续执行 Digest 机制。 7. Giving Up On An Unstable Digest：了解如何处理不稳定的 Digest 机制。 8. Short-Circuiting The Digest When The Last Watch Is Clean：了解如何短路 Digest 机制以提高性能。 9. Value-Based Dirty-Checking：了解如何基于值的脏值检测机制。 10. NaNs：了解如何处理 NaN 值在检测应用程序的状态时的影响。此外，还需要了解 TDD 开发模式的基本概念，包括单元测试、集成测试和功能测试等。使用 TDD 开发模式可以提高 JavaScript 编程能力和代码质量。在创建自己的 AngularJS 框架时，需要具备一定的 JavaScript 编程能力和 TDD 开发模式的经验。通过了解 AngularJS 的内部核心实现和 TDD 开发模式，可以创建自己的 AngularJS 框架，并提高 JavaScript 编程能力。通过本文，可以了解 AngularJS 的内部核心实现、TDD 开发模式和 JavaScript 编程能力的提升。同时，也可以学到如何创建自己的 AngularJS 框架和如何使用 TDD 开发模式来提高代码质量。

Build Your Own Angular Contents

21 Interpolation 979

The $interpolate service . . . . . . . . . . . . . . . . . . . . . . . . . . . 979

Interpolating Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 981

Value Stringiﬁcation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 987

Supporting Escaped Interpolation Symbols . . . . . . . . . . . . . . . . . 990

Skipping Interpolation When There Are No Expressions . . . . . . . . . . 991

Text Node Interpolation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 993

Attribute Interpolation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1000

Optimizing Interpolation Watches With A Watch Delegate . . . . . . . . 1010

Making Interpolation Symbols Conﬁgurable . . . . . . . . . . . . . . . . . 1017

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1023

22 Bootstrapping Angular 1025

The ngClick Directive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1025

Bootstrapping Angular Applications Manually . . . . . . . . . . . . . . . 1029

Bootstrapping Angular Applications Automatically . . . . . . . . . . . . . 1038

Building The Production Bundle . . . . . . . . . . . . . . . . . . . . . . . 1042

Running An Example App . . . . . . . . . . . . . . . . . . . . . . . . . . . 1044

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1047

Introduction

This book is written for the working programmer, who either wants to learn Angu-

larJS, or already knows AngularJS and wants to know what makes it tick.

AngularJS is not a small framework. It has a large surface area with many new

concepts to grasp. Its codebase is also substantial, with 35K lines of JavaScript in

it. While all of those new concepts and all of those lines of code give you powerful

tools to build the apps you need, they also come with a learning curve.

I hate working with technologies I don’t quite understand. Too often, it leads to

code that just happens to work, not because you truly understand what it does, but

because you went through a lot of trial and error to make it work. Code like that is

diﬃcult to change and debug. You can’t reason your way through problems. You

just poke at the code until it all seems to align.

Frameworks like AngularJS, powerful as they are, are prone to this kind of code.

Do you understand how Angular does dependency injection? Do you know the

mechanics of scope inheritance? What exactly happens during directive transclusion?

When you don’t know how these things work, as I didn’t when I started working

with Angular, you just have to go by what the documentation says. When that isn’t

enough, you try diﬀerent things until you have what you need.

The thing is, while there’s a lot of code in AngularJS, it’s all just code. It’s no

diﬀerent from the code in your applications. Most of it is well-factored, readable

code. You can study it to learn how Angular does what it does. When you’ve done

that, you’re much better equipped to deal with the issues you face in your daily

application development work. You’ll know not only what features Angular provides

to solve a particular problem, but also how those features work, how to get the most

out of them, and where they fall short.

The purpose of this book is to help you demystify the inner workings of AngularJS.

To take it apart and put it back together again, in order to truly understand how it

works.

A true craftsman knows their tools well. So well that they could in fact make their

own tools if needed. This book will help you get there with AngularJS.

Build Your Own Angular Chapter 0. Introduction

How To Read This Book

During the course of the book we will be building an implementation of AngularJS.

We’ll start from the very beginning, and in each chapter extend the implementation

with new capabilities.

While there are certain areas of functionality in Angular that are largely independent,

most of the code you’ll be writing builds on things implemented in previous chapters.

That is why a sequential reading will help you get the most out of this book.

The format of the book is simple: Each feature is introduced by discussing what it

is and why it’s needed. We will then proceed to implement the feature following

test-driven development practices: By writing failing tests and then writing the code

to make them pass. As a result, we will produce not only the framework code, but

also a test suite for it.

It is highly encouraged that you not only read the code, but also actually type it in

and build your own Angular while reading the book. To really make sure you’ve

grasped a concept, poke it from diﬀerent directions: Write additional test cases. Try

to intentionally break it in a few ways. Refactor the code to match your own style

while keeping the tests passing.

If you’re only interested in certain parts of the framework, feel free to skip to the

chapters that interest you. While you may need to reference back occasionally,

you should be able to poach the best bits of Angular to your own application or

framework with little diﬃculty.

Source Code

The source code and test suite implemented in this book can be found on GitHub,

at https://github.com/teropa/build-your-own-angularjs/.

To make following along easier, commits in the repository are ordered to match the

order of events in the book. Each commit message references the corresponding

section title in the book. Note that this means that during the production of the

book, the history of the code repository may change as revisions are made.

There is also a Git tag for each chapter, pointing to the state of the codebase at the

end of that chapter. You can download archives of the code corresponding to these

tags from https://github.com/teropa/build-your-own-angularjs/releases.

Contributors

I would like to thank the following people for their valuable feedback and help during

the writing of this book:

剩余1078页未读，继续阅读

小猪john

粉丝: 0
资源: 7

从头构建自己的AngularJS：深入了解框架核心实现

构建你自己的angularjs

Angularjs 合集 Angularjs 合集

angularJs权威和精通angularjs

angularjs教学

如何使用angularjs实现chatgpt的打字效果

angularjs 入门

angularjs教程

angularjs 使用jointjs

angularjs的生命周期

angularjs实现登录注册

最新资源