从无到有构建angular1框架
来源:互联网 发布:羽绒服 知乎 编辑:程序博客网 时间:2024/06/05 08:41
既然是从无到有构建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,和$apply1.每次你绑定一些东西到你的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-bind2、ng-repeat3、ng-if4、ng-class5、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、template3、templateUrl
具体使用请查看示例代码
3 内置filter
1、number2、currency3、date4、uppercase5、lowercase6、filter7、json8、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
请查看示例代码
2 0
- 从无到有构建angular1框架
- 从无到有构建红黑树
- 从无到有构建react项目
- Angular1
- angular1
- webpack+es6+angular1.x项目构建
- 数据库框架之Greendao从无到有(一)
- 广州沙龙 - 《从无到有,构建自动化测试体系!》接受报名中
- 广州沙龙 - 《从无到有,构建自动化测试体系!》接受报名中
- 如何用Revit API从无到有创建构建的类型对象?
- 从无到有构建Angular2 后台管理系统的前端架构
- angular1基础
- angular1资源
- Angular1 笔记
- 基于java后台,angular1为框架的admin管理系统完整项目体验报告
- Build an embedded Linux distro from scratch 从无到有打造Linux发布包 之3 构建内核
- 进化--从无到有
- Redis从无到有
- [codevs2596]售货员的难题
- 位运算
- C#-WinForm设置托盘程序
- 第001讲 html介绍 html运行原理①
- html span标签详解
- 从无到有构建angular1框架
- java中的接口、抽象类和类
- leetcode_middle_76_274. H-Index
- E php短信平台接口
- 柔性数组
- 软件框架-无绪开发2
- Servlet基础
- JavaScript正则表达式大全
- codeforces 246 E. Blood Cousins Return (set+dsu on the tree)