从无到有构建angular1框架

既然是从无到有构建angular1 的框架，就要首先从angular的基本知识说起，本文将从以下几个方面介绍：

Angularjs 技术框架 指令集Service、Route

Application

由于angular1和angular2是完全不同的两个框架，angular2在性能提升等方面都做了很多改进，有想了解ng2朋友可以查看博客：从无到有构建Angular2 后台管理系统的前端架构博客中提供了源码地址可以直接下载运行。

一、Angularjs 技术框架

1、Angular.js 概述

致力于Single Page Application (SPA)易于构建页面的CURD操作，以数据为中心操作思路与Dom及jQuery的先查找元素再操作元素不 同，它一切以数据为中心

2、四大特性

2.1 MVC

1.1.1 MVC介绍 Model：模型，业务数据，存储于特定作用范围内变量 controller中声明模型数据，可以实现module与view的分离 VIEW： 视图，HTML+directive Controller：控制器 1.1.2 MVC步骤 1、声明自定义模块 angular.module('模块名'，[依赖列表]) 2、把自定义的模块注册给当前的应用 ng-app='模块' 3、模块中声明控制器函数 module.controller('控制器名'，function(){...}) 4、调用控制器函数、创建控制器对象 <div controller='控制器名'></div> 5、在控制器中增删改查数据 $scope.a=b; 6、在View中呈现数据 {{a}}

2.2 数据双向绑定

digest循环以及dirty-checking，包括watch,digest,和$apply 1.每次你绑定一些东西到你的UI上时你就会往$watch队列里插入一条$watch。$watch就是那个可以检测model变化的东西。 2.当浏览器接收到事件时，Angular使用$apply将事件添加到angular context（事件循环机制）中 3.digest循环就会触发。digest将会遍历我们的$watch，然后询问它是否有属性和值的变化，直$watch队列都检查过。

Angular 在启动时会给所有的异步交互点打补丁：

超时 Ajax 请求 浏览器事件 Websockets，等等

在那些交互点，Angular 会对 scope 对象进行变动检查，如果发现有变动就激发相应的监视器重新运行变动检查，检查是否有更多的变化发生，重新运行监视器，等等 Angular 1 绑定运行的后果： 结果是 DOM 一直同简单 Javascript 对象进行同步，尽管这样可以工作，但是这使得有时难以进行推论： - 不清楚哪些监视器会运行，什么顺序，多少次 - 模型更新顺序难以推论和预期 - 摘要循环多次运行导致时间消耗

2.3 依赖注入

angular.module(‘myApp’, []) .controller(‘Ctl’, function ($scope) { $scope.name = ‘leonwgc’; }); 上面这段代码就用到了angular的依赖注入，代码首先创建了一个myApp模块，然后在此模块中创建了Ctl控制器，创建控制器函数的第二个参数则是控制器的构造函数， 构造函数声明了对$scope和$log服务的依赖。 当构造函数执行时， 即可获得$scope和$log服务实例，进行操作。

依赖注入有三步：

得到模块依赖项查找依赖项对应的对象执行时注入

2.4 模块化设计

Angular.module(name,[,requires]) ng–app = “name” 1.作用： 定义一个应用程序 模块是应用程序中不同部分的容器 模块是应用控制器的容器，控制器必须属于一个模块 2、优点 保持全局命名空间整洁 使应用可以按照任意顺序加载代码

二、指令集

内置Directive自定义Directive内置filter自定义filter

1 内置Directive

最常用的内置Directive有：（更多查看官网）

1、ng-bind 2、ng-repeat 3、ng-if 4、ng-class 5、ng-click

具体使用请查看示例代码

2 自定义Directive

属性： 1、restrict：“EACM” E:元素 <my-directive></my-directive> A:属性 <div my-directive></div> C:类 <div class=“my-directive”></div> M:注释<!– directive: my-directive -- > 2、template 3、templateUrl

具体使用请查看示例代码

3 内置filter

1、number 2、currency 3、date 4、uppercase 5、lowercase 6、filter 7、json 8、limitTo

具体使用请查看示例代码

4 自定义filter

示例： app.filter('toFixedTwo', function () { return function (text) { if(!text){ return "0.00"; }else{ var data = parseFloat(text); return data.toFixed(2); } }

具体使用请查看示例代码

三、路由

请查看示例代码

1 ngRoute 和 ui-route 相比:

$when —> $state 路由状态配置的时候 $routeParams —> $stateParams 带参数的时候的配置$routeProvider —> $stateProvider 依赖注入的模块 <div ng-view></div> —> <div ui-view></div> 页面中绑定的指令

2 路由详解 uiRoute中可以嵌套更深层次的路由，也就是路由中可以有路由（大致有两种情况：1.横向的 2.纵向的）。 （1）嵌套路由 （2) 多视图路由 ngRoute中就不能嵌套更深的路由。

四、angular1 application

请查看示例代码