angularjs 源码分析1

1、angularJS的实现原理是什么
angularJS通过在html文件里加入特定的标签来进行相应事件绑定等各种动作，简化了前端程序的开发。


2、angularJS是怎样运行起来的？
angularJS脚本执行时进行了三步操作
1、绑定jquery，可以使用jquery方便的操作页面元素。
2、发布angular API函数，可以调用然后进行不同的操作。
3、渲染页面，识别页面的特定标签，调用相关API 进行事件注册等动作。


3、绑定jquery 这一步做了什么
如果已有JQuery则使用JQuery，同时扩展JQuery，使之拥有
scope、isolateScope、controller、injector、inheritedData 五个jqLite的属性
如果木有jquery，就使用jqLite充当jquery。
修改jquery的remove、empty、html 函数，也就是在用query修改html的时候，会进行相应的angularJS的事件绑定等操作的移除。

4、发布API 做了什么
使angular成为window的对象，这样我们就可以直接使用angular调用函数，
扩展angular的函数，使用angular.function的方式，可以调用以下常用的js方法。
               bootstrap: bootstrap,
               copy: copy,
               extend: extend,
               equals: equals,
               element: jqLite,
               forEach: forEach,
               injector: createInjector,
               noop: noop,
               bind: bind,
               toJson: toJson,
               fromJson: fromJson,
               identity: identity,
               isUndefined: isUndefined,
               isDefined: isDefined,
               isString: isString,
               isFunction: isFunction,
               isObject: isObject,
               isNumber: isNumber,
               isElement: isElement,
               isArray: isArray,
               version: version,
               isDate: isDate,
               lowercase: lowercase,
               uppercase: uppercase,
               callbacks: {
                    counter: 0
               },
               $$minErr: minErr,
               $$csp: csp


注册angularJS 提供的指令directive
           页面要素指令：
                         a: htmlAnchorDirective,
                         input: inputDirective,
                         textarea: inputDirective,
                         form: formDirective,
                         script: scriptDirective,
                         select: selectDirective,
                         style: styleDirective,
                         option: optionDirective,
                         ngBind: ngBindDirective,
                         ngBindHtml: ngBindHtmlDirective,
                         ngBindTemplate: ngBindTemplateDirective,
                         ngClass: ngClassDirective,
                         ngClassEven: ngClassEvenDirective,
                         ngClassOdd: ngClassOddDirective,
                         ngCloak: ngCloakDirective,
                         ngController: ngControllerDirective,
                         ngForm: ngFormDirective,
                         ngHide: ngHideDirective,
                         ngIf: ngIfDirective,
                         ngInclude: ngIncludeDirective,
                         ngInit: ngInitDirective,
                         ngNonBindable: ngNonBindableDirective,
                         ngPluralize: ngPluralizeDirective,
                         ngRepeat: ngRepeatDirective,
                         ngShow: ngShowDirective,
                         ngStyle: ngStyleDirective,
                         ngSwitch: ngSwitchDirective,
                         ngSwitchWhen: ngSwitchWhenDirective,
                         ngSwitchDefault: ngSwitchDefaultDirective,
                         ngOptions: ngOptionsDirective,
                         ngTransclude: ngTranscludeDirective,
                         ngModel: ngModelDirective,
                         ngList: ngListDirective,
                         ngChange: ngChangeDirective,
                         required: requiredDirective,
                         ngRequired: requiredDirective,
                         ngValue: ngValueDirective
                    }).

     事件指令：
directive(ngAttributeAliasDirectives).directive(ngEventDirectives), $provide.provider({
                         $anchorScroll: $AnchorScrollProvider,
                         $animate: $AnimateProvider,
                         $browser: $BrowserProvider,
                         $cacheFactory: $CacheFactoryProvider,
                         $controller: $ControllerProvider,
                         $document: $DocumentProvider,
                         $exceptionHandler: $ExceptionHandlerProvider,
                         $filter: $FilterProvider,
                         $interpolate: $InterpolateProvider,
                         $interval: $IntervalProvider,
                         $http: $HttpProvider,
                         $httpBackend: $HttpBackendProvider,
                         $location: $LocationProvider,
                         $log: $LogProvider,
                         $parse: $ParseProvider,
                         $rootScope: $RootScopeProvider,
                         $q: $QProvider,
                         $sce: $SceProvider,
                         $sceDelegate: $SceDelegateProvider,
                         $sniffer: $SnifferProvider,
                         $templateCache: $TemplateCacheProvider,
                         $timeout: $TimeoutProvider,
                         $window: $WindowProvider

5、最后一步渲染页面做了什么
首先是搜索页面中的 ["ng:app", "ng-app", "x-ng-app", "data-ng-app”] 这几个元素。我们一般使他们成为属性。其实class什么的也是会搜索的。
得到ng-app 和其后module名字之后，angularJS调用bootstrap函数对ng-app的范围的内的html进行解析。