求知若饥,虚心若愚。
从Angular的Github官网上可以看出创造者对该框架的简单定义:HTML enhanced for web apps.即Angular主要是针对Web应用,对HTML标签进行了增强。
Angular的使用在我看来和JavaEE的有些理念挺相似,什么依赖注入,控制反转,双向绑定等概念。那么使用Angular主要运用在哪些Web应用上呢?它给Web前端带来的好处又有哪些呢?
从Github上看使用Angular可以给开发者的带来的优势有以下几点:
运用场合:经常CRUD的Web应用
AngularJS的语法及概念在这就不一一细说了,因为里面涉及到的东西太多,去官网看API和网上教程就行。想了解一个框架的本身,不在于可以用它实现什么,而在于它是怎么实现的。
下面的内容主要围绕”怎么实现”及”项目实战”开讲。
Angular核心原理
源码解析Angular启动过程分析步骤:
1.自执行加载完整个angular.js暴露全局变量angular
1 | (function(window,document){ |
2.是否存在angular对象
1 | if (window.angular.bootstrap) { |
两种启动方式:
1 | //自动启动:ng-app |
3.绑定jQuery
1 | bindJQuery(); |
该方法判断用户是否自己导入jQuery,如果没有就导入jQlite:
1 | function bindJQuery(){ |
4.注入angularAPI
1 | publishExternalAPI(angular); |
该方法给全局变量angular扩展方法及属性,构建模块加载器,注入内置provider注册器和ng指令:
1 | function publishExternalAPI(angular) { |
5.初始化
1 | jqLite(document).ready(function() { |
该方法查找ng-app,如果找到执行bootstrap方法,没找到执行手动启动的bootstrap方法
1 | function angularInit(element, bootstrap){ |
bootstrap方法创建注册器,开始编译
1 | function bootstrap(element, modules, config){ |
看源码的地方搜createInjector:
1 | function createInjector(modulesToLoad, strictDi) { |
Provider目的是让接口和实现分离。
进行注注入的有:provider、factory、service、constant、value
上面方法核心都是provider实现的,只是参数不同,从左到右灵活性越来越差。
接受注入的有:controller、config、module、run、filter等
注入的方式:
1 | var app=angular.module('demo',[]); |
内置Inject注册器有:
1 | $provide.provider({ |
看源码的地方搜compile:
1 | function compile($compileNodes,transcludeFn,maxPriority,ignoreDirective,previousCompileContext){ |
指令的compile与link:
1 | var app=angular.module('demo',[]); |
compile指令作用是对指令的模板进行转换;
link指令作用是在模型和视图之间建立关联,元素上的注册监听事件等;
内置指令有:
1 | directive({ |
看源码的地方搜scope:
1 | function Scope() { |
双向数据绑定:一维结构(表单)、二维结构(表格)、Tree型结构(建议不用双向绑定)
在使用Angular开始应用的时候,需要明确一些步骤:
有空在细说每个步骤的内容,So Sorry!