这个AngularJS课程意在为你揭露Angular各方面话题的最佳资源。我们尽量展示其各方面优势，使得你可得到这些话题完整的全景。

课程

课程的学习曲线就像曲棍球。在初期离开地面时可以轻松的几个基本功能的应用开始，但当应用变大变复杂时，若不注意结构会使开发变得棘手与笨重。

AngularJS入门时, 随便看几篇教程与文档的“准备-射击-瞄准”的学习方法会导致混淆与挫折。 这个课程可以带你遍历Angular的每个关键点。最后你可以流畅高效地架构大型应用。

预备知识

• 掌握HTML、CSS、JavaScript， 以及下面的概念：
  • POJO(plain old JavaScript object)，包括：
  • 面向对象变成，包括封装与继承
  • 对象的创建、原型
• 基本的MVC概念
• DOM
• JavaScript函数、事件、错误处理

资源

与其他JavaScript框架相比，AngularJS还在初期阶段，资源还有所不足。但是，本课程会介绍一批优秀的博客。

• 必修资源
  • AngularJS - O’Reilly Media (available on Amazon)
  • John Lindquist’s egghead.io
  • egghead.io source code
  • AngularJS docs
• 补充读物
  • Jim Hoskins blog
  • Ben Nadel blog
  • OneHungryMind
  • year of moo
  • Bruno Scopelliti blog

剩余部分参看原文：A Better Way to Learn AngularJS

PS： 半年多后才在电脑中发现这篇刚翻译了开头的博客，而我已经从AngularJS转向了KnockoutJS。 Octopress的缺点是发布成本高，导致我的EverNote中躺满了未整理的杂乱资料。 但同时这也是优点，时刻提醒我博客与随手笔记是不同的。 每次写博客时可以从作者角度观察而获得更深入的理解， 感受到写作难度后对网上创作技术文章的人也更加佩服。 最近几年的技术瓶颈始终没有突破，而记博客的时间也反映出自己的碌碌无为，接下来该进行一些知识的整理了，希望会有所帮助。

PSPS： 作为想法和感情异常丰富的我，开本博客的那天便告诉自己这里只记录客观的技术。 所以与这段话类似的内容以后会尽量不出现。

执行：$ rake new_post["arch-linux-reinstall-glibc.markdown"]

报错：zsh: no matches found: new_post[arch-linux-reinstall-glibc]

原因：zsh中若出现‘*’, ‘(’, ‘|’, ‘<’, ‘[’, or ‘?’符号，则将其识别为查找文件名的通配符

快速解决：用引号括起来$ rake "new_post[arch-linux-reinstall-glibc.markdown]"

彻底解决：取消zsh的通配(GLOB), 在.zshrc中加入alias rake="noglob rake"

PS：在git回滚操作git reset --soft HEAD^时出现报错： zsh: no matches found HEAD^，

也为同样原因，因为^也为正则中的符号， 需要转义为git reset --soft HEAD\^。

参考

Not compatible with Zsh

起因

$ pacman -Syu时提示错误， 因为Arch前段时间将/lib目录链到了/usr/lib， 见公告The /lib directory becomes a symlink。 当时没有看到这篇公告，而在网上搜到某贴说使用--force参数， 结果执行完后系统挂掉，因glibc不存在，所有命令行不可使用。

解决方法

• 从光盘启动Arch。
• $ fdisk -l查看磁盘状态， 我的系统分区为/dev/sda6。
• 创建目录：$ mkdir /root/tmp_disk。
• mount分区，我机子上是：$ mount /dev/sda6 /root/tmp_disk。
• 下载相应的glibc安装包（网络或U盘，配置网络参考下面相关部分）, 我的为x86_64 v2.16.0-2， 所以wget http://www.archlinux.org/packages/core/x86_64/glibc/download/
• 安装pacman -U glibc-2.16.0-2-x86_64.pkg.tar.xz -r /root/tmp_disk
• pacman -Su

注意

其它

配置网络

用启动光盘进入系统后，需要配置网络来下载最新glibc。 配置/etc/rc.conf

1
2
3
4

interface=eth0
address=192.168.0.2
netmask=255.255.255.0
gateway=192.168.22.1

配置/etc/resolv.conf

1

nameserver 8.8.8.8

最后重启网络服务$ /etc/rc.d/network restart

目录

/lib、/lib64皆应软链到/usr/lib目录。 在修复过程中查看/lib发现里面只有一个modules目录， 将其移至/usr/lib里后建立软链。 系统正常运行，但之后执行pacman后无法升级。 移除/usr/lib/modules目录后$ pacman -Su解决问题。

时间错误的解决

遇到报错

1
2
3
4
5
6
7

******************* FILESYSTEM CHECK FAILED *************
* Please repair manually and reboot. Note that the root *
* filesystem is currently mounted read-only. To remount *
* it read-write type: mount -n -o remount,rw / *
* When you exit the mantenance shel the system will *
* reboot automatically. *
*********************************************************

因为BIOS时间设置有问题。

参考

bug修复方案：How to re-install glibc?

Arch网络配置：Configuring Network

简介

tmux是与screen类似的工具，但是功能更强大。

tmux的三个层级概念：
- session(会话)
- window(窗口)
- pane(面板)

命令：
$ tmux
$ tmux attach -t session

快捷键

C-b激活控制台，然后输入下面命令

系统

窗口

面板

复制/粘贴模式

(以Emacs模式为例)
1. C-b [进入视图模式
2. C-Space开始选择（可能与输入法快捷键冲突，最简单的办法是使用C-@，同样效果）
3. C-n/p/f/b/...选择结束后C-w复制
4. C-]粘贴

配置

~/.tmux.conf

1
2
3

#将激活控制台键绑定与Emacs相同
unbind C-b
set -g prefix C-x

其他

• 默认快捷键为Emacs模式，也可设置为vi模式。
• Ubuntu下翻页的M-v与菜单键可能有冲突，需要在终端窗口菜单Edit -> Keyboard Shortcuts取消Enable menu access keys前面的勾。

前几天终于买了Linode的VPS，配置过程中遇见一个灵异问题：
Emacs无法远程SSH编辑文件，状态一直卡在Tramp: Waiting for prompts from remote shell。

折腾了好久，终于定位到zsh的配置oh-my-zsh上。
最后查到原来Emacs Wiki上已经有解决方案，在.zshrc底部加上：

1
2
3
4
5
6
7
8
9

if [[ "$TERM" == "dumb" ]]
then
  unsetopt zle
  unsetopt prompt_cr
  unsetopt prompt_subst
  unfunction precmd
  unfunction preexec
  PS1='$ '
fi

参考：TrampMode Troubleshooting

Emacs编辑远程文件

非常简单：C-x C-f后/ssh:user@host#port:file

由此可以推出一个小技巧：

Emacs编辑本地需要sudo的文件

/ssh:root@locahost:file

过程中可能会遇到的问题：

• 1
  问题：ssh: connect to host localhost port 22: Connection refused
  原因：没装openssh-server
  解决：安装即可

• 2
  问题：ssh root@localhost并输入密码后报permission denied
  原因：发现直接用su也不行（之前一直都只是sudo），因为没设root密码
  解决：sudo passwd root
  注： /etc/ssh/sshd_config中有个参数PermitRootLogin需设置为yes。
  虽然有安全问题，不过是本机，问题不大。
  修改配置后需重启服务：sudo /etc/init.d/ssh restart

升级博客后，在另一台电脑上无法启动了。

在新电脑上Octopress写博客时没法$ bundle install

现象：

$ bundle install安装到fast-stemmer时报一大堆错， 无法继续。

原因：

不详，可能是rvm里的bundle没升级

解决

做了一通操作，不知怎么就好了。。。 其中包括：

1

$ rvm gem update

不过我2次都引发了下面几个问题

Githug将git的入门与游戏相结合，太有意思了。
游戏过程中少不了网上查找资料，man，难度4以后不停的hint。
通关后对git的了解又加深了许多。
取连接名时很是矛盾，写完博客后还是将链接中的walkthrough改为了cheat sheet。
希望大家不需要使用到这篇博客吧。

因关卡随时处于更新状态，可能会稍有不同
- 最后更新时间2012-11-14
- 最后更新时间2013-05-17
- 最后更新时间2016-02-25

准备

安装Githug：$ gem install githug。
安装完成后直接执行$ githug开始游戏，同一条命令进入下一关。
$ githug hint查看过关提示，
当操作错误无法过关时，可以$ githug reset重置当前关卡。

开始

0

1

y

1 初始化git项目

1
2

$ cd git_hug
$ git init

2 配置git用户信息

1
2

$ git config user.name xxx
$ git config user.email xxx@gmail.com

或者直接在.git/config文件里添加

1
2
3

[user]
        name = xxx
        email = xxx@gmail.com

回答时分别输入xxx和xxx@gmail.com
- 扩展
使用--global参数修改本机全局设置

1

$ git config --global user.name = xxx

• 问题
  命令行里不要带等号$ git config user.name = xxx, 否则去文件里查时会发现等号变成值name = =。 (之前好像可以用的？待解决)

3 stage一个文件

1

$ git add README

4 提交已stage的文件

1

$ git commit -m '-'

之前讲到过CSS实现背景透明完美解决方案，
在Sass里可以通过mixin将其封装起来。

先回顾一下

1
2
3
4
5
6
7
8
9

/* 白色背景,透明度0.6 */
.alpha60 {
  background: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.6);
  background: transparent\9;
  zoom: 1;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff)";
}

分析

需要做的工作有：
- 颜色和透明值应该通过参数传入
- 需要能计算出rgba值：rgb(255, 255, 255)
- 需要计算出IE下的值#99ffffff
- 封装成minix模块，以便调用

过程

Sass的文档不全，为了查找一些计算函数，我只好去源码里找。
开始想寻求的是一个转十六进制的方法，结果发现ie_hex_str已经实现了。
在这里贴段里面的实现代码，来看看Sass的计算功能：

1
2
3
4

# Sass
alpha = (color.alpha * 255).round.to_s(16).rjust(2, '0')
# 等价于JS中的：
Math.round(0.6 * 255).toString(16);

最后的rjust方法，应该是空位补零。

非常有用的两个页面： 函数源码， 在线调试Sass

总结

最终代码如下：

1
2
3
4
5
6
7
8
9

@mixin better_transparentize($color, $alpha)
  $c: rgba($color, $alpha)
  $ie_c: ie_hex_str($c)
  background: rgba($color, 1)
  background: $c
  background: transparent\9
  zoom: 1
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c})
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c})"

然后在需要的地方直接引用即可，如：

1
2

.box
  @include better_transparentize(white, .8)

原因

Bug出现需要同时满足以下3个条件:
- 顶部导航条navbar使用classnavbar-fixed-top
- 参考Bootstrap官方网站, 给body添加样式padding-top: 60px;
- 使用响应式(Responsive design), 并且处在此状态下(默认为宽度<=980时触发)

解决方案1

给此段样式加上条件

1
2
3
4
5

@media (min-width: 981px) {
    body {
        padding-top: 60px;
    }
}

解决方案2

将bootstrap-responsive.css放在body样式之后

1
2
3
4
5
6
7

<link href="../css/bootstrap.css" rel="stylesheet">
<style type="text/css">
      body {
        padding-top: 60px;
      }
</style>
<link href="../css/bootstrap-responsive.css" rel="stylesheet">

Rails3.2的Asset Pipeline就更方便了，放在import中即可（我用的是Sass）

1
2
3
4
5
6

@import compass
$baseFontSize: 15px
@import compass_twitter_bootstrap
body
  padding-top: 60px
@import compass_twitter_bootstrap_responsive

结论

我在某项目中因为使用的是customize出来的单个css文件, 所以采用了解决方案1.
在另一RoR项目中考虑使用解决方案2.

参考

navbar-fixed-top breaks when using responsive css