一.利用yeoman搭建angular框架
Yeoman其实是三个工具的集合：yo，grunt, bower。
yo（脚手架工具），简单来说就是利用yo创建我们需要的项目工程依赖目录和文件,以及生产环境和编译环境,我们在这里用它创建了angularJS的框架;
grunt（前端构建工具）；
bower（是Web开发的包管理器），概念上类似npm，bower专注于CSS、JavaScript、图像等前端相关内容的管理。他们的关系图如下：
yeoman的安装介绍，我推荐网址：http://www.tuicool.com/articles/mIfIVf.
（1）安装yeoman（利用npm安装，确定已安装好npm，在Linux环境配置已介绍）
$ npm install -g yo grunt-cli bower //安装yo grunt-cli bower，也可以分别安装.
$ yo --version && bower --version && grunt --version //安装完成后，检测一下版本信息，看是否安装成功
（2）安装yeoman生成器
$ yo //进入yeoman菜单
通过上下键选择Install a generator 。接下来我们需要寻找一个合适的生成器。搜索’angular’的话，你会得到很多搜索结果。这些生成器都是由许多Yeoman开源社区贡献的。在这个例子里，我们使用的是’generator-angular’。当选中了’generator-angular’后，按下回车执行安装，它所依赖的Node包就会开始被下载了。
如果我们直接知道生成器的名字，那直接执行下面的命令即可。
$ npm install -g generator-angular当你比较熟悉Yo的时候，就可以不通过菜单直接运行生成器：
$ yo angular
generator-angular会询问你需不需要使用Sass和/或者Bootstrap，使用’n'和’y'进行选择。然后 按下enter键进行框架生成。
（4）关于yeoman构建的文件的目录结构，我推荐看看教程http://blog.jobbole.com/65399/
- app/：Web应用的父级目录。
- index.html： Angular应用的基准HTML文件
- 404.html、favicon.ico和robots.txt：通用的Web文件，Yeoman已经将它创建出来了，你不需要再手动去创建
- bower_components：存放项目相关的JavaScript或Web依赖，由bower安装的
- scripts：我们的JS文件
- app.js：主程序
- controllers：Angular控制器
- styles：我们的CSS文件
- views：Angular模板
- Gruntfile.js、package.json 以及node_modules：Grunt需要使用的依赖以及配置。
- test和karma.conf.js/karma-e2e.conf.js：测试框架以及针对这个项目的单元测试，包括了为控制器写的样板测试（boilerplate tests）。
$ grunt serve //运行命令后本地会启动一个基于Node的http服务。通过浏览器访问http://localhost:9000就可以看到你的应用了
二.学会使用Git
Git是目前世界上最先进的分布式版本控制系统。推荐学习资料：http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 相信看完这个资料以后，你会大大加深对git的了解，也知道每一步命令操作的意义。
而我们最常用的操作一般有以下几条命令
git add . //添加修改，存入暂存区
git commit -m " 这里面可以写自己定义的一些关键字，以方便查找确定提交修改到本地git库里
git push -u origin master //远程推送，把自己的git库给push到Github网站上去其他一些常用操作：
情况一：修改了工作内容，但是想直接放弃，不修改git checkout --file（file是指某个具体的文件路径）
情况二：修改了内容，还存到了暂存区（即：git add .）这时候想要撤销修改：git reset HEAD file （回到了情况一），再重复情况一的操作即可
情况三：在情况二的基础上，还添加到了版本库里（即git commit了）那么需要将当前版本回到上一个版本里：git reset --hard HEAD^
但是，在我们的开发过程中最好是创建一个新的开发分支进行开发，当完成完成功能后再与主分支即master合并，这样便保证了master上都是稳定的，可用的。
三、angularJS中的各种ng
1.作用域ng-app：标记了angularJS的脚本作用域，表明整个html都是其作用域
2.局部作用域：将ng-app用于某一个块标签，如<div ng-app……></div>作用域<div>就是标签的内部
3.绑定控制器ng-controller：
4.双向数据绑定：它不光显示出变量的值，也把显示上的数值变化反映给了变量。即数据与表现绑定，数据变化了表现也变化，表现变化了数据也跟着变化。但这并不与模型与视图分离相冲突。
5.重复（迭代器的概念）ng-repeat：
<pre name="code" class="plain">
<span style="font-family:KaiTi_GB2312;font-size:18px;">
<div ng-controller="TestCtrl" ng-init="a=[]1,2,3,4,5">
<ul ng-repeat="member in a">
<li>{{ member }}
</li>
</ul>
</div><
/span>上面的代码说明在<ul>标签内部，每一个<li>标签处都会插入一个{{member}}变量，而该变量来自于数组obj_list，该数组可以在js控制器里绑定，也可以在html页面中直接初始化。
6.赋值ng-init：
<span style="font-family:KaiTi_GB2312;font-size:18px;">
<div ng-controller="TestCtrl" ng-init="a=[1,2,3,4,5]">
<ul ng-repeat="member in a">
<li>{{ member }}
</li>
</ul>
</div>
</span>7.显示ng-show：
<span style="font-family:KaiTi_GB2312;font-size:18px;">
<div ng-show="true">1</div>
<div ng-show="false">2</div></span>上面的代码结果是：1显示，2不显示
8.隐藏ng-hide
9.使能（可用与不可用）ng-disabled：⑧⑨的用法与ng-show差不多
10.选择性显示ng-switch
<span style="font-family:KaiTi_GB2312;font-size:18px;"> <div ng-init="a=2"> <ul ng-switch on="a"> <li ng-switch-when="1">1</li> <li ng-switch-when="2">2</li> <li ng-switch-default>other</li> </ul> </div></span>
11.事件绑定：ng-click,ng-change，ng-dbclick，ng-mousedown等等
四.localstroage（本地数据存储）
localStorage作为HTML5本地存储web storage特性的API之一，主要作用是将数据保存在客户端中. localStorage保存的数据，一般情况下是永久保存的，也就是说只要采用localstorage保存信息，数据便一直存储在用户的客户端中。即使用户关闭当前web浏览器后重新启动，数据让然存在。知道用户或程序明确制定删除，数据的生命周期才会结束。 在安全性方面，localstorage是域内安全的，即localstorage是基于域的。任何在该域内的所有页面，都可以访问localstorage数据。但让然存在一个问题，就是各个浏览器厂商的浏览器之间的数据是各自独立的。也就是说，如果在firefox中使用localstorage存储一组数据，在chrome浏览器下是无法读取的。同样，由于localstorage数据是保存在用户的设备中的，因此同一个应用程序在不同设备上保存的数据是不同的。
个人理解：相当于一个本地数据库
使用方法：
读写、删除都是以键值对的形式
（1）存储数据：存储数据的方法就是直接给localStorage添加一个属性，例如：localStorage.a 或者localStorage["a"]
localStorage.a = 3;//设置a为"3"
localStorage["a"] = "sfsf";//设置a为"sfsf"，这一步会覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac" （2）获得数据：
var a1 = localStorage["a"];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem("b");//获取b的值 （3）清除数据：
localStorage.removeItem("c");//清除c的值
localStorage.clear();//一次性清除所有
另外，目前javascript使用非常多的json格式，如果希望存储在本地，可以直接调用JSON.stringify()将其转为字符串。读取出来后调用JSON.parse()将字符串转为json格式，如下所示：
var details = {author:"isaac","description":"fresheggs","rating":100};//定义数据
storage.setItem("details",JSON.stringify(details));//存储至localstorage
details = JSON.parse(storage.getItem("details"));//获得localstorage里面的数据
一般常用以下方法：
1、存储：localStorage.setItem(key,value)：如果key存在时，更新value
2、获取：localStorage.getItem(key)：如果key不存在返回null
3、删除：localStorage.removeItem(key)：一旦删除，key对应的数据将会全部删除
4、全部清除：localStorage.clear()：某些时候使用removeItem逐个删除太麻烦，可以使用clear,执行的后果是会清除所有localStorage对象保存的数据
5、遍历localStorage存储的key
.length 数据总量，例：localStorage.length
.key(index) 获取key，例：var key=localStorage.key(index);
6、存储JSON格式数据
JSON.stringify(data) 将一个对象转换成JSON格式的数据串,返回转换后的串。
JSON.parse(data) 将数据解析成对象，返回解析后的对象。备注：localStorage存数的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M。
五.初始化判断
我们可以设定工程一打开进入的根目录页面是活动列表页面（大多数情况下是有活动记录的吧！除非第一次使用app或者用户手动删除了localstorage），那么在初始化时，只用一个if就可以判断是否。也可以用三目运算符或者||运算符
注：通过<a href="……" 链接标签也可以实现页面跳转，但是这种方法不安全，也不容易控制。每次跳转是根据路径来实现的，容易发生错误。这里不能用。
利用$location.path(pagename); 注：pagename是将要跳转的页面的路由名，需要与路由配置保持一致。
六."use strict"的功能
使用"use strict"指令的目的是说明（脚本或函数中）后续的代码将会解析为严格代码(strict code)。如果顶层（不存在任何函数内的）代码使用了"use strict"指令，那么它们就是严格代码。如果在函数体内定义，则函数整体使用的是严格代码。严格代码和非严格代码之间的区别如下：
1）在严格模式中禁止使用with语句;
2）在严格模式中，所有变量都要先声明，如果给一个未声明的变量、函数、函数参数，catch从句参数或全局对象的属性赋值，将会throw一个引用错误（在非严格模式下，这种隐式声明的全局变量的方法是给全局对象添加一个新属性）
3）在严格模式中，调用的函数（不是方法）中的一个this值是undefined。（在非严格模式下，调用函数中的this值总是全局对象）。可以利用这种特性来判断js实现是否支持严格模式。
4）同样，在严格模式中，当通过call()或apply()来调用函数时，其中的this值就是通过call()或apply()传入的第一个参数（在非严格模式下，null和undefined值被全局对象和转换为对象的非对象值所代替）
5）在严格模式下，给只读属性赋值和给不可扩展的对象创建新成员都将抛出一个类型错误异常（在非严格模式下，这些操作只是简单的操作失败，不会抛错）
6）在严格模式下，传入eval_r()的代码不能在调用程序所在的上下文中声明变量或定义函数，而在非严格模式中是可以这样的。相反，变量和函数定义是在eval_r()创建的新作用域中，这个作用域在eval_r()返回时就弃用了。
七.实现活动列表最新的活动在显示在最上层
利用数组倒叙方法，因为localstorage中添加对象信息，是依次存在数组后面的，第一个最先创建，最后一个是最新存入的数据，所以在提取出数组后，利用数组的reverse（）反转方法，实现数组的倒叙再显示即可。JavaScripts关于数字和字符串处理的方法有很多，我将进行单独总结。
1182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
