AngularJS学习散记

[chenkan]

学习文档：
https://github.com/basestyle/angularjs-cn/blob/master/Chapter2.markdown

学习产出代码：
https://github.com/chenkan/CodeKata/tree/master/angularJS

[chenkan]

打算尝试使用 纯命令行 的方式来学习和编辑JS，尽量减少鼠标的使用

第一步，设置zsh在终端里面直接开打html文件

编辑.zshrc文件，加入以下一行

alias -s html=/usr/bin/open -a "/Applications/Google Chrome.app"

作用是在终端中直接输入xxx.html就可以以Chrome浏览器打开这个html文件

参考：
Zsh 使用技巧一则: 文件关联
How can I open a URL in Google Chrome from the terminal in OS X?

[chenkan]

然后是一些Chrome浏览器的快捷键（Mac版，https://support.google.com/chrome/answer/165450?hl=zh-Hans）

• ⌘-T 【打开新标签页】
• ⌘-数字 【跳转至第N个标签页】【当标签页总数少于9的时候，⌘-9跳转至最后一个标签页】
• ⌘-Option 和向右箭头键 【切换到下一个标签页】
• ⌘-W 【关闭当前标签页或弹出窗口】

[chenkan]

这个是 Windows 版的Chrome快捷键（ https://support.google.com/chrome/answer/157179?hl=zh-Hans&ref_topic=25799 ），其中下面这几个在 Mac 下也有效：）

[chenkan]

下一步是配置 VIM

我这里采用了一套现成的配置：https://github.com/humiaozuzu/dot-vimrc
按照Installation一步步安装即可

一些新学的VIM快捷键（注意大小写）：

• =号 【缩进调整：按一下=号，再按一下右方向键，当前行就正确缩进了；也可以使用vim的visual模式选中多行，再按一下=号，批量缩进】
• \cc【配合Nerd Commenter插件，注释当前行代码，其中\符号其实是vim默认的<leader>值】
• o 【另起一行，插入文本】
• p 【另起一行，粘贴文本】
• yy 【复制当前行】

[chenkan]

文摘

基本的运作流程看起来像这样:
1. 用户请求你的应用程序的第一个页面
2. 用户浏览器发出一个HTTP请求连接到你的服务器, 然后加载包含模板的index.html页面
3. Angular载入到页面中, 等到页面完全加载, 然后查询定义在模板范围内的ng-app
4. Angular遍历模板并查询指令和绑定. 这将导致注册事件监听器和DOM操作, 以及从服务器上获取初始数据. 
这项工作的最终结果是展示应用程序并将模板作为DOM转换为视图.
5. 连接到你的服务器加载你需要展示给用户所需的附加数据.

[chenkan]

修正了学习文档的一些错误，发起了有史以来第一次pull request
https://github.com/basestyle/angularjs-cn/pull/33

@chenkan 非常感谢.

[chenkan]

@baseStyle
开源共建
小小助益
：）

[chenkan]

文摘

如果我们的系统面临这种耦合问题时, 这里有一个简单的测试可以帮助我们找出来: 
我们可以给我们的应用程序逻辑创建一个单元测试, 而不需要DOM的存在.

在Angular中, 是的, 我们可以在控制器中只编写包含业务逻辑的代码而不必引用DOM. 
在我们之前编写的JavaScript中, 这个问题在事件处理程序中是不存在的. 
注意, 在这里以及在这本书的其他地方, 目前我们所编写的控制器中, 都没有引用DOM和任何DOM事件处理程序. 
你可以很轻松创建出这些不带DOM的控制器. 所有的元素定位和事件处理程序都发生在Angular中.

对于这个问题在编写单元测试时. 如果你需要DOM, 你在测试中创建它, 只会增加测试程序的复杂度. 
当你的页面发生变化时, 你需要在你的测试中改变DOM, 这样只会带来更多的维护工作. 
最后, 访问DOM是很慢的, 测试缓慢意味着反馈不会及时以及最终解析都是缓慢的. 
Angular的控制器测试并没有这些问题.

[chenkan]

vim插件：https://github.com/terryma/vim-multiple-cursors

按一次 ctrl - n ，选中当前单词

• 继续按ctrl - n， 额外 选中下一个重复单词，变成多选，可以多选同时操作
• 继续按ctrl - x，选中下一个重复单词

[chenkan]

接上一条，也可以设置:set hlsearch
然后 shift + * 或者 shift + #

[chenkan]

[chenkan]

Difference between Service, Factory and Provider in AngularJS

• https://gist.github.com/Mithrandir0x/3639232
• http://stackoverflow.com/questions/15666048/angular-js-service-vs-provider-vs-factory

[chenkan]

VIM继续补充：

• :vsplit - 垂直切分窗口
• :split - 水平切分窗口
• :close - 关闭窗口
• ctrl + w + w - 下一个窗口
• ctrl + w + 方向键 - 转至指定方向窗口

[chenkan]

如何与服务器通信，使用$http

function ShoppingController($scope, $http){
        $http.get('/products').success(function(data, status, headers, config){
            $scope.items = data;
        });
    }