angularjs教程

当前位置:首页>AngularJS>angularjs教程>启动和JQuery绑定--AngularJS学习笔记(二)

启动和JQuery绑定--AngularJS学习笔记(二)

时间:2015-06-23 15:23来源:网络整理 作者:KKWL 点击:
第七城市th7cn 上一篇简单的分析了AngularJS的项目结构,后面就开始分析具体的源代码了。 从angularFiles.js中的定义可以看出有几个文件直接位于src根目录,并不是隶属于某个模块。这几

第七城市th7cn

上一篇简单的分析了AngularJS的项目结构,后面就开始分析具体的源代码了。

从angularFiles.js中的定义可以看出有几个文件直接位于src根目录,并不是隶属于某个模块。这几 个分别是minErr.js,Angular.js,loader.js,AngularPublic.js,jqLite.js,apis.js。

这几个提供了AngularJS中很基础的工具,比如angular.equals等,在文档中它们中的部分被归属于 Global API中。

本文主要看看AngularJS的启动和JQuery绑定。

minErr.js

Javascript中有Error对象,用于表示运行时错误,但是它的功能比较单一,一般使用

new Error(message)

但是它的功能比较单一。而minErr是一个提供更丰富信息的工具。这样生成的错误信息将包含模块名 称和其他信息,同时还提供了模板功能。比如

var exampleMinErr = minErr('example');var detailMinErr=exampleMinErr('one', 'This {0} is {1}', "v1", "v2");detailMinErr.stack

显示如下:

screenshot13

可以看出错误还提供了对应了文档地址,不过其中的NG_VERSION_FULL看着有点奇怪,这里应该显示诸如1.2.7这样的版本号。在 lib/grunt/utils.js中有一个处理,将NG_VERSION_FULL、NG_VERSION_MAJOR等替换了。

function(src, NG_VERSION, strict){ var processed = src .replace(/"NG_VERSION_FULL"/g, NG_VERSION.full) .replace(/"NG_VERSION_MAJOR"/, NG_VERSION.major) .replace(/"NG_VERSION_MINOR"/, NG_VERSION.minor) .replace(/"NG_VERSION_DOT"/, NG_VERSION.dot) .replace(/"NG_VERSION_CDN"/, NG_VERSION.cdn) .replace(/"NG_VERSION_CODENAME"/, NG_VERSION.codename); if (strict !== false) processed = this.singleStrict(processed, '/n/n', true); return processed;}

这里的NG_VERSION信息是getVersion从package.json文件的version值中读取的。

function(){ if (version) return version; var package = JSON.parse(fs.readFileSync('package.json', 'UTF-8')); var match = package.version.match(/^([^/-]*)(?:/-(.+))?$/); var semver = match[1].split('.'); var fullVersion = match[1]; if (match[2]) { fullVersion += '-'; fullVersion += (match[2] == 'snapshot') ? getSnapshotSuffix() : match[2]; } version = { full: fullVersion, major: semver[0], minor: semver[1], dot: semver[2].replace(/rc/d+/, ''), codename: package.codename, cdn: package.cdnVersion }; return version; function getSnapshotSuffix() { var jenkinsBuild = process.env.BUILD_NUMBER || 'local'; var hash = shell.exec('git rev-parse --short HEAD', {silent: true}).output.replace('/n', ''); return 'build.'+jenkinsBuild+'+sha.'+hash; } }

现在来看看minErr的源码,其实主要是模板替换功能。

message = prefix + template.replace(//{/d+/}/g, function (match) {...}

这里的prefix是module名称组成而成的,而这里使用了replace方法,匹配诸如{0},{1}的字符串,而 /g命令表示全局替换。而 function(match)是根据匹配的字符串生成对应的替换字符串。

function (match) { var index = +match.slice(1, -1), arg; if (index + 2 < templateArgs.length) { arg = templateArgs[index + 2]; if (typeof arg === 'function') { return arg.toString().replace(/ ?/{[/s/S]*$/, ''); } else if (typeof arg === 'undefined') { return 'undefined'; } else if (typeof arg !== 'string') { return toJson(arg); } return arg; } return match; }

因为传入的参数实质上是类似{0},{1}这样的字符串,所以首先用slice(1,-1)去掉两端的大括号,然 后比较剩余的数字范围是否正确,这里的+2是因为传入的参数中第一个是code码,第二个是模板,从第 三个开始才是替换用的字符串。这里还针对不同的类型有不同的处理。

Angular.js

这个文件涉及到了AngularJS的初始化,还提供了若干基础方法,比如大小写转化,浏览器适配, forEach,Uid生成,浅复制,深复制等。

其实这些基础方法比较简单,这里只分析nextUid方法。调用它可以生成一个供Angular使用的唯一ID 。初始的uid为

uid = ['0', '0', '0'];

 

Angular的uid不是单纯的数字,而是字母和数字的组合,这样就不会增长太快,也不会超值。

function nextUid() { var index = uid.length; var digit; while(index) { index--; digit = uid[index].charCodeAt(0); if (digit == 57 /*'9'*/) { uid[index] = 'A'; return uid.join(''); } if (digit == 90 /*'Z'*/) { uid[index] = '0'; } else { uid[index] = String.fromCharCode(digit + 1); return uid.join(''); } } uid.unshift('0'); return uid.join('');}

首先是获取uid的长度,然后获取最后一位,如果是9就变成“A”,如果是Z就变成0,不 然就是直接+1。如果长度不够了就增加uid数组长度。这样首先生成的就是001,然后是002…然后 是00Z,接下来就是010。nextUid方法在Scope中会被使用。

然后AngularJS的启动了,这里就涉及了两个比较重要的方法:angularInit和bootstrap。

AngularJS官方文档的第一个列子就是一个数据绑定的例子,显示Hello {yourName}。

例子中html标签中添加了执行ng-app,文档说这是告知AngularJS,这里是它的管理范围,而实现就在angularInit中。

------分隔线----------------------------