每周小结-3 D3 on AngularJS

最新推荐文章于 2020-09-18 19:07:41 发布

HSJMDMG

最新推荐文章于 2020-09-18 19:07:41 发布

阅读量768

点赞数

分类专栏：每周学习小结文章标签： angular d3

本文链接：https://blog.csdn.net/u011255505/article/details/51126831

版权

每周学习小结专栏收录该内容

4 篇文章 0 订阅

订阅专栏

每周小结

这周花的时间不太多，主要是做了一下上周的扫尾工作。把《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 rootScope
var scope2 = Object.create(rootScope); // scope2 inherits from rootScope
// scope1.foobar is 50
// scope2.foobar is 50
rootScope.foobar = 100; // changing `rootScope.foobar` works as expected
// scope1.foobar is 100
// scope2.foobar is 100
scope1.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 rootScope
var scope2 = Object.create(rootScope); // scope2 inherits from rootScope
// scope1.foobar.value is 50
// scope2.foobar.value is 50
rootScope.foobar.value = 100;
// scope1.foobar.value is 100
// scope2.foobar.value is 100
scope1.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？

暂时没有找到为什么……

HSJMDMG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
每周小结-3 D3 on AngularJS

每周小结这周花的时间不太多，主要是做了一下上周的扫尾工作。把《d3 on AngularJS》看完，处理了一下上周留下的问题。顺便吃下了来自同学的一剂安利，markdown用来排版确实非常好用，推荐。1.《D3 on AngularJS》的笔记零基础直接阅读angular部分有些困难，还是需要先看一些入门的基础知识，在图书馆找了一本《AngularJS 权威教程》，和《d3 on angul
复制链接

扫一扫