AngularJS 最佳实践

johnpapa/angularjs-styleguide

  • Watch 419
  • Star 5,141
  • Fork 569

mgechev/angularjs-style-guide

  • Watch 191
  • Star 2,625
  • Fork 313

中文版:
README-zh-cn.md

turingou/Angular-Best-Practices

本repo由支付宝前端开发工程师 @莫登(新浪微博@郭宇)维护,部分案例包括Angular在 支付宝某些系统上的使用经验

  • Watch 7
  • Star 21
  • Fork 6

AngularJS移动开发中的坑汇总

  • Watch 7
  • Star 21
  • Fork 6

AngularJS 最佳实践 – 尘埃落定

AngularJS 中 $scope 的原型继承问题

问题描述

如下 AngularJS 代码的 INPUT 中键入“Separate reality”,执行效果是什么?

1
2
var HelloCtrl = function ($scope) {
};
1
2
3
4
5
6
7
<body ng-app ng-init="name='World'">
<h1>Hello, {{name}}</h1>
<div ng-controller="HelloCtrl">
Say hello to: <input type="text" ng-model="name">
<h2>Hello, {{name}}!</h2>
</div>
</body>

执行结果

  • 外层 H1 始终显示 World
  • 内层 H2 先显示 World在 INPUT 中键入之后,H2 显示“Separate reality”。

原因

ng-controller 创建了一个新的 Scope,该作用域原型继承于父 Scope。

解决方案

方案 1 - 采用 $parent 访问父作用域

这种方法带导致强耦合,不提倡!

1
<input type="text" ng-model="$parent.name">

方案 2 - 绑定到对象的属性

最佳实践!

1
2
3
4
5
6
7
<body ng-app ng-init="thing = {name : 'World'}">
<h1>Hello, {{thing.name}}</h1>
<div ng-controller="HelloCtrl">
Say hello to: <input type="text" ng-model=" thing.name">
<h2>Hello, {{thing.name}}!</h2>
</div>
</body>

模拟

以下例子模拟了原始问题 vs 解决方案 2。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var a = {
x: 1,
y: {
z: 2
}
};

var b = {};
b.__proto__ = a;

console.log(b.x); // 1
console.log(b.y.z); // 2

// 原始问题
b.x = 11; // 模拟在 INPUT 中输入
console.log(a.x); // 1

// 解决方案 2
b.y.z = 22; // 模拟在 INPUT 中输入
console.log(a.y.z); // 22

AngularJS 学习路线

AngularJS 是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足,诞生以来吸引了大量的目光,也迅速成为了Web开发领域的新宠。

AngularJS

网站

博客

入门

官方使用指南

w3school

链接合集

请展开看以下链接内容*

DEMO 项目

参考手册

视频教程

纸质书籍

用AngularJS开发下一代Web应用

图表

  • 一张图告诉你Angular的内核结构
    一张图告诉你Angular的内核结构

指令收藏(Directives)

  • jirikavi/AngularJS-Toaster - AngularJS Toaster is a customized version of “toastr” non-blocking notification javascript library.