每周小结-3 D3 on AngularJS

来源：互联网发布：mac移动硬盘无法分区编辑：程序博客网时间：2024/06/09 18:12

每周小结

这周花的时间不太多，主要是做了一下上周的扫尾工作。把《d3 on AngularJS》看完，处理了一下上周留下的问题。

顺便吃下了来自同学的一剂安利，markdown用来排版确实非常好用，推荐。

1.《D3 on AngularJS》的笔记

零基础直接阅读angular部分有些困难，还是需要先看一些入门的基础知识，在图书馆找了一本《AngularJS 权威教程》，和《d3 on angularJS》的作者都是Ari Lerner，觉得书上讲得挺清楚。

2. AngularJS的笔记：

2.0

AngularJS 应用组成：
- View(视图), 即 HTML。
- Model(模型), 当前视图中可用的数据。
- Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
- AngularJS 创建实时模板来代替试图，而不是将数据合并进模板之后更新DOM
自动数据绑定：视图 = 模型状态的映射
数据绑定的最佳实践：在视图中通过对对象的属性而非对象本身来进行引用绑定

2.1 模块 module

2.2 作用域 scope

作用域包含了渲染试图时所需的功能和数据
不会对不包含AngularJS特殊声明的元素进行任何处理
<h1> Hello world </h1>
<h3> Hello {{ name }}} </h3>
The scope is checked for changes when call scope.apply()
可嵌套，引用父级scope，继承机制与Javascript Prototype类似：

JavaScript prototype
常见的小问题：

<body ng-app="myApp" ng-init="foobar=50">    <div ng-controller="HelloController">        <input type="range" ng-model="foobar">        <input type="range" ng-model="foobar">    </div>    <div ng-controller="HelloController">        <input type="range" ng-model="foobar">        <input type="range" ng-model="foobar">    </div></body>

var rootScope = { foobar: 50 };var scope1 = Object.create(rootScope); // scope1 inherits from rootScopevar scope2 = Object.create(rootScope); // scope2 inherits from rootScope// scope1.foobar is 50// scope2.foobar is 50rootScope.foobar = 100; // changing `rootScope.foobar` works as expected// scope1.foobar is 100// scope2.foobar is 100scope1.foobar = 2; // but assigning a value to `foobar` creates a new// property on the child scope which shadows `rootScope.foobar`.// rootScope.foobar is 100 instead of 2

One way to fix this is : use another object as a wrapper to prevent shadowing properties of the parent scope.

var rootScope = { foobar: { value: 50 } };var scope1 = Object.create(rootScope); // scope1 inherits from rootScopevar scope2 = Object.create(rootScope); // scope2 inherits from rootScope// scope1.foobar.value is 50// scope2.foobar.value is 50rootScope.foobar.value = 100;// scope1.foobar.value is 100// scope2.foobar.value is 100scope1.foobar.value = 2;// rootScope.foobar.value is 2

2.3 控制器 controller

The simplest way to create a new scope： create a “controller”.
Angular会在创建作用域时调用控制器方法
Controllers are normally used to modify scope variables programmatically in JavaScript.
控制器并不适合用来执行DOM操作、格式化操作或数据操作，以及除存储数据模型之外的状态维护操作
控制器嵌套：childController 可以访问 ParentController内部

<div ng-controller = "ParentController">    <div ng-controller = "ParentController">        <a ng-click = "sayHello()">Say hello</a>    </div>      {{ person }}</div>

控制器应该尽量保持短小精悍，避免在控制器中进行DOM操作和数据操作，将复杂的逻辑放到指令和服务中。

2.4 服务

具体的设置见《angularJS权威指南》第14章

能在应用的整个生命周期内保持数据，在控制器之间进行通信，并且能保证数据的一致性。
单例对象，在每个应用中只被实体化一次($injector)，延迟加载
创建服务的方法:
- factory()
- service()
- constant()
- value()
- provider()

2.5 一些细节

ng-model : 动态绑定用户输入（有值的html标签）和js中的变量
scope.$watch(‘scope variable’, function(){}) : 和listener类似

$watch callbacks will not be fired for changes to the elements of arrays unless you pass true as the third argument .

2. 上周的遗留问题

2.1 关于AMD规范：

Asynchronous module definition

2.2 关于svg作图：

使用chrome浏览器：没有设置width和height的时候图片会被吞掉一部分，似乎默认大小是300px X 150px？

暂时没有找到为什么……

0 0

每周小结-3 D3 on AngularJS

每周小结

1.《D3 on AngularJS》 的笔记

2. AngularJS的笔记：

2.0

2.1 模块 module

2.2 作用域 scope

2.3 控制器 controller

2.4 服务

2.5 一些细节

2. 上周的遗留问题

2.1 关于AMD规范：

2.2 关于svg作图：

1.《D3 on AngularJS》的笔记