#0 系列目录#
- AngularJs学习笔记
#1 前端开发工具介绍#
-
Grunt – Js任务管理工具，通过各种插件对项目进行各种操作，比如文件转换、运行测试、打包部署等。相当于java里的ant/maven/gradle，ruby中的rack，scala中的sbt。
-
Bower – Js库依赖管理工具，当你需要jquery时，不需要手动下载，只需要执行 bower install jquery。
-
RequireJs – Js库加载管理，及模块化支持，可以按需及并行加载js库，可以把我们的代码以模块化的方式组织。
-
AngularJs – Js前端框架，支持依赖注入，双向绑定等我认为很重要的功能。
这套东西都是比较基础且使用比较广泛的。一般一旦在项目中引入前端框架，或者需要写比较多的Js代码时，我们都会采用它们，所以很有必要学习并掌握它们。
#2 创建项目目录# 下面我们从零开始，首先在任意位置新建一个目录作为我们的项目根目录，比如：
mkdir ~/myproject
然后进入该目录：
cd ~/myproject
#3 为npm创建package.json# 首先我们需要为npm提供一个 package.json，告诉它我们的项目信息，特别是项目中将会使用的插件。我们不需要手动创建，因为可以直接调用以下命令：
npm init
它会问我们一些问题，我们可以按需回答，也可以全部使用默认值，反正以后可以改起来也很容易。最后将会产生如下的 package.json 文件：
{ "name": "myproject", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC"} 对于像我们这样的非nodejs项目来说，里面的大部分内容都没用，可以删掉大部分，只剩下：
{ "name": "myproject", "version": "1.0.0",} #4 安装 grunt#
npm install grunt --save-dev
将使用npm下载grunt插件，它们将保存到项目根目录下的 node_modules 目录下。后面的 --save-dev 参数是说，把这个插件信息，同时添加到 package.json 的 devDependencies 中：
"devDependencies": { "grunt": "^0.4.5"} 由于grunt仅在开发阶段使用，所以使用 --save-dev 。如果是运行时使用的，则用 --save。
#5 安装 grunt-cli# 上面安装的 grunt 并不包含命令行工具，我们还需安装相应的 grunt-cli ，才能在命令行中调用 grunt 命令：
npm install grunt-cli -g
后面的 -g 是说，把 grunt-cli 安装成全局工具，以便在任意目录下使用。安装后，输入:
grunt --version
我这里显示为：
grunt-cli v0.1.13grunt v0.4.5
#6 为grunt创建配置文件Gruntfile.js#
- 安装grunt-init
npm install grunt-init -g
- 下载grunt模板
git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
- 生成Gruntfile
grunt-init gruntfile
根据需要回答问题，或者使用默认值，将得到以下 Gruntfile.js 文件：
/*global module:false*/module.exports = function(grunt) { // Project configuration. grunt.initConfig({ // Metadata. pkg: grunt.file.readJSON('package.json'), banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %>\n' + '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' + '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' + ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n', // Task configuration. concat: { options: { banner: '<%= banner %>', stripBanners: true }, dist: { src: ['lib/<%= pkg.name %>.js'], dest: 'dist/<%= pkg.name %>.js' } }, uglify: { options: { banner: '<%= banner %>' }, dist: { src: '<%= concat.dist.dest %>', dest: 'dist/<%= pkg.name %>.min.js' } }, jshint: { options: { curly: true, eqeqeq: true, immed: true, latedef: true, newcap: true, noarg: true, sub: true, undef: true, unused: true, boss: true, eqnull: true, browser: true, globals: { jQuery: true } }, gruntfile: { src: 'Gruntfile.js' }, lib_test: { src: ['lib/**/*.js', 'test/**/*.js'] } }, qunit: { files: ['test/**/*.html'] }, watch: { gruntfile: { files: '<%= jshint.gruntfile.src %>', tasks: ['jshint:gruntfile'] }, lib_test: { files: '<%= jshint.lib_test.src %>', tasks: ['jshint:lib_test', 'qunit'] } } }); // These plugins provide necessary tasks. grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-qunit'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-watch'); // Default task. grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);}; 它里面已经包含了一些常用的插件，比如 grunt-contrib-jshint 等，我们可根据需要删减一些用不上的。它同时还会在 package.json 里添加上这些插件的依赖：
"grunt-contrib-concat": "~0.4.0","grunt-contrib-jshint": "~0.10.0","grunt-contrib-qunit": "~0.5.2","grunt-contrib-uglify": "~0.5.0","grunt-contrib-watch": "~0.6.1"
这些插件还未下载，如果需要，可以运行:
npm install
#7 安装bower# bower跟npm在某种意义上相似，它是用来管理常用的js库的依赖的，比如jquery, underscore, angularjs等。我们可以通过npm安装它：
npm install bower -g // 把它装为全局工具
bower也有它自己的配置文件 bower.json ，我们不需要手动创建。
bower init
将会生成如下的 bower.json :
{ "name": "myproject", "description": "", "main": "", "authors": [ "TaoBangren " ], "license": "MIT", "homepage": "", "private": true, "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ]} 对于我们的项目来说，里面的东西基本上都没用。有用的是后面将会出现的dependencies。
#8 下载requirejs、jquery、angularjs#
bower install requirejs --savebower install jquery --savebower install angularjs --save
将会自动下载jquery到angularjs相应的文件，到项目根目录下的 bower_components 目录。并在 bower.json 中添加：
"dependencies": { "requirejs": "~2.1.22", "jquery": "~2.2.0", "angular": "angularjs#~1.4.9" } #9 安装grunt-bower-task# bower只负责把依赖下载到本地的 bower_components 目录，并不负责把它们拷贝到我们项目中实际使用的地方，比如 public/js/lib 目录下。为了实现这样的功能，我们还需要另一个插件的帮助：
npm install grunt-bower-task --save-dev
然后打开其文档： ，按照上面的提示进行配置。
首先在 Gruntfile 中合适位置添加：
grunt.loadNpmTasks('grunt-bower-task'); 然后在 grunt.initConfig({...}) 参数中，添加相应的配置项：
bower: { install: { options: { targetDir: './public/js/lib', layout: 'byComponent', install: true, verbose: false, cleanTargetDir: false, cleanBowerDir: false, bowerOptions: {} } }} 这里指定拷贝的目标目录为 public/js/lib ，且文件按照模块分成单个目录(byComponent)。如果想把所有的js放在同一个目录，所有的css文件放在同一个目录，则使用 byType。
#10 关于RequireJs使用# 在前面我们已经使用bower安装了requirejs:
bower install requirejs
RequireJs可用来管理页面中使用的js库之间的依赖关系，可以按需、并行、延迟加载js库。同时它可以让我们以模块化的形式组织js代码。
前面我们第三方的依赖，通过grunt-bower-task拷贝到了 public/js/lib 目录下。我们自己写的js，将会放置在 public/js 目录下。我们需要手动创建一个 config.js 文件，用来配置和初始化requirejs。
如果我们使用了requirejs，则在HTML中，我们通常只需要一个 <script src="..."></script> 标签引入requirejs并指定入口文件即可，而不需要写多个 script 标签手动加载其它js文件。
在HTML中合适位置加入：
这里首先加载了require.js，并通过 data-main 属性告诉requirejs：当你加载完以后，请加载config.js文件进行初始化。config.js 内容如下：
requirejs.config({ baseUrl: '/public/js', paths: { app: 'app', jquery: 'lib/jquery/jquery', angular: 'lib/angularjs/angular' }, shim: { }});requirejs(['app'], function(app) { app.hello();}); 我们在 paths 中声明了几个模块，其中的 app 是我们自己创建的js文件，用于放我们自己的业务代码，它对应于 /public/js/app.js . jquery 与 angular 对应的文件是我们使用grunt-bower-task拷贝过来的第三方js库。
shim 中用来处理一些没有遵守requirejs规范的js库，比如 underscore 之类。可在里面对它们进行一些依赖声明、初始化操作等。这里暂时用不上。
最后用 requirejs 来导入我们自己的模块，可在后面的callback中拿到对应模块的实例，并对它进行一些操作，比如我们调用了 app.hello() 方法。
为了让这个例子完整，我们可以定义相应的 app.js :
define([], function() { return { hello: function() { alert("hello, requirejs"); } }}); 为了能让例子跑起来，我们还需要创建一个 public/index.html ，内容如下：
Hello, world!
#11 Angularjs例子# 由于angularjs并不是按requirejs的模块方式组织代码的，我们需要在 config.js 中添加：
shim: { angular : { exports : 'angular'}} Angularjs会在全局域中添加一个名为 angular 的变量。我们必须在 shim 中显式把它暴露出来，才能通过模块注入的方式使用它，比如：
define(['angular'], function(ng) { // we can use argument `ng` instead of gloabl `angular` now}); 在index.html中添加angular代码：
{ {name}}
准备相应的controller，把 app.js 的内容改为：
define(['angular'], function(angular) { angular.module('myApp', []).controller('MyController', ['$scope', function ($scope) { $scope.name = 'Change the name'; }]); angular.element(document).ready(function() { angular.bootstrap(document, ['myApp']); });}); 在这段代码里，我定义了一个angularjs自己的模块 myApp ，以及相应的 MyController 。在后面，通过 angular.bootstrap 方法，把该模块与 document 结合在了一起。
在html中显示angularjs里的一个字段时，我们使用 {
{}} 来占位，比如：{ {name}} 如果我们同时使用了mustcahe模板，就会有冲突。我们可以更改angularjs的配置：
angular.module('myApp', []).config(function($interpolateProvider){ $interpolateProvider.startSymbol('[[').endSymbol(']]'); }); 然后我们就可以写成：
[[name]]