从无到有构建angular1框架
2017-03-08 10:49
141 查看
既然是从无到有构建angular1 的框架,就要首先从angular的基本知识说起,本文将从以下几个方面介绍:
Angularjs 技术框架
指令集
Service、Route
Application
由于angular1和angular2是完全不同的两个框架,angular2在性能提升等方面都做了很多改进,有想了解ng2朋友可以查看博客:从无到有构建Angular2 后台管理系统的前端架构博客中提供了源码地址可以直接下载运行。
致力于Single Page Application (SPA)
易于构建页面的CURD操作,以数据为中心
操作思路与Dom及jQuery的先查找元素再操作元素不 同,它一切以数据为中心
2、四大特性
2.1 MVC
2.2 数据双向绑定
Angular 在启动时会给所有的异步交互点打补丁:
超时
Ajax 请求
浏览器事件
Websockets,等等
在那些交互点,Angular 会对 scope 对象进行变动检查,如果发现有变动就激发相应的监视器重新运行变动检查,检查是否有更多的变化发生,重新运行监视器,等等
Angular 1 绑定运行的后果:
结果是 DOM 一直同简单 Javascript 对象进行同步,尽管这样可以工作,但是这使得有时难以进行推论:
- 不清楚哪些监视器会运行,什么顺序,多少次
- 模型更新顺序难以推论和预期
- 摘要循环多次运行导致时间消耗
2.3 依赖注入
依赖注入有三步:
得到模块依赖项
查找依赖项对应的对象
执行时注入
2.4 模块化设计
自定义Directive
内置filter
自定义filter
具体使用请查看示例代码
具体使用请查看示例代码
具体使用请查看示例代码
具体使用请查看示例代码
1 ngRoute 和 ui-route 相比:
2 路由详解
uiRoute中可以嵌套更深层次的路由,也就是路由中可以有路由(大致有两种情况:1.横向的 2.纵向的)。
(1)嵌套路由
(2) 多视图路由
ngRoute中就不能嵌套更深的路由。
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
请查看示例代码相关文章推荐
- 构建插件式的应用法度框架 [转载]
- 基于Dubbo框架构建分布式服务
- 利用开源的Gearman框架构建分布式图片处理平台[原创]
- maven下的ssm框架的简单构建
- skynet框架应用 (三) 构建服务的基础API
- Struts1.2+Spring2.0+Hibernate3.1项目框架构建中的问题及解决方法集锦
- php 使用 restler 框架构建 restfull api
- 构建iOS风格移动Web应用程序的8款开发框架
- 用 Composer构建自己的 PHP 框架之构建路由
- 构建基于MVC+Observer模式的、艺术性的移动开发框架(KJAVA版)(一)
- Golang构建简单web框架
- 构建基于MVC+Observer模式的、艺术性的移动开发框架(KJAVA版)(一)
- Skeljs – 用于构建响应式网站的前端开发框架
- JAVA Eclipse使用Maven构建web项目详解(SSM框架)
- 构建插件式的应用程序框架(八)----视图服务的简单实现
- 从无到有构建一个Mini Linux(4)
- (转)基于MVC4+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面
- 项目工具JavaScript 项目构建工具 Grunt 实践:安装和创建项目框架
- 构建自己的C/C++插件开发框架——系列
- “WCF运行时框架的构建与扩展”系列[共10篇]