从本质上讲,在浏览器加载AngularJS web应用的方式与加载非AngularJS引用的方式一样。但是,它们的运行方式略有不同。
本文从新人角度讲一讲对angular中MVVM模式的理解,以及angular特性的源码实现。
本文作者:IMWeb daihuimi 原文出处:IMWeb社区 未经同意,禁止转载 本文从新人角度讲一讲对angular中MVVM模式的理解,以及angular特性的源码实现。 MVVM核心
scope是angularJS中的作用域(其实就是存储数据的地方),很类似javascript的原型链 。搜索的时候,优先找自己的scope,如果没有找到就沿着作用域链向上搜索,直至到达根作用域rootScope。
@(Angular) $compile,在Angular中即“编译”服务,它涉及到Angular应用的“编译”和“链接”两个阶段,根据从DOM树遍历Angular的根节点(ng-app)和已构造完毕的 $rootScope对象,依次解析根节点后代,根据多种条件查找指令,并完成每个指令相关的操作(如指令的作用域,控制器绑定以及transclude等),最终返回每个指令的链接函数,并将所有指令的链接函数合成为一个处理后的链接函数,返回给Angluar的bootstrap模块,最终启动整个应用程序。 ---- [
ng-bind 单向数据绑定($scope -> view),用于数据显示,简写形式是 {{}}。
transclude有三个选项,true, false, 和object.如果不显示指明的话,默认为false. 当为false的时候,则那个directive里面的指令不会嵌入到你写的模板里,举个例子 下面是html代码
之前工作以Angular1.x为主,主要做业务系统,以后工作中技术栈可能以vue为主,在此对Angular1.x的使用做一个简单总结,这里使用1.5+版本。
其实本人接触框架里面,可能是Angular最多吧,之前项目都是Angular1,现在项目在用Angular2。
假如我们发现要写很多公共或是重用的dom、class、attr属性或是需要操作scope作用域,就要考虑代码最好不要copy、不要出现重复的代码段,好像是哪位大牛说的话,具体记不清了,反正就是为了性能优化等方面。
每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。
一种解决办法是,对于正常用户的访问,服务器响应 AngularJS 应用的内容;对于 搜索引擎的访问,则响应专门针对 SEO 的HTML页面。
angualr 要点温习 1、一些 ng 指令 ng-disabled true|false ,规定一个元素是否被禁止,但不会为隐藏 ng-keydown/ng-keypress/ng-keyup ng-mousedown/ng-seenter 鼠标穿过 2、一些 angular 内置方法/类比 jq angular.lowercase() angular.uppercase() angular.copy() 深克隆 angular.forEach() 类比 forEach var objs = [
| 导语 本文跟随着Angular的变迁聊聊这个框架,分享一些基础的介绍,以及个人的理解。 也用过其他框架,像React和Vue。 但与Angular结识较深,或许也是缘分吧。 谈谈Angular ---- 内容概要 数据绑定 (updated) 模块化组织 (new) 依赖注入 路由和lazyload (new) Rxjs (new) 预编译AOT (new) 拥抱变化,迎接未来 updated: 原有特性,有更新 new: 新增特性 ---- 数据绑定 ---- 常用模版绑定 常用模版引擎 1. S
如上所示,return的对象中会有很多的属性,这行属性都是用来定义directive的。
directive [ng] a form input input [checkbox] input [email] input [number] input [radio] input [text] input [url] ngApp ngBind ngBindHtmlUnsafe ngBindTemplate ngChange ngChecked ngClass ngClassEven ngClassOdd ngClick ngCloak ngController ngCsp ngDblclick ng
这个ng模块是当AngularJS应用启动的时候默认加载的。这个模块自己包含了一个AngularJS应用工作必需的组件。下面的表格用等级的分类列出了核心模块中可用的每个services/factories,filters,directives和测试组件。
在做angular的SPA开发时,我们经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁。对于这个问题由于JavaScript去操作DOM,都会等待DOM加载完成(DOM ready)。对于angular会在DOM ready完会才回去解析html view Template,所以对于Chrome这类快速的浏览器你会看见有闪烁的情况出现。而对于IE7,8这类解析稍慢的浏览器大部分情况下是不会出现这个问题的。
注意:本指南是针对已经熟悉AngularJS基础的开发者。如果您只是想要开始,建议您先去看教程。如果你在寻找指令的API,我们最近把他移动到$compile
ViewModel:视图模型层,用来连接Model和View,是Model和View之间的通信桥梁
1.Angular内置service Angular为了方便开发者开发,本身提供了非常多的内置服务。可以通过https://docs.angularjs.org/api/ng/service查看AngularJS提供的内置服务。在企业级开发中,常用的服务有以下这些: $cacheFactory 缓存服务 $compile 编译服务 $filter 通过 $filter 服务可以格式化输出数据,也可以对数据进行过滤操作 $http AngularJS内置的核心的服务,主要和后台请求相关 $location 基
目前几种主流的mvc(vm)框架都实现了单向数据绑定,而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素(input、textare等)添加了change(input)事件,来动态修改model和 view,并没有多高深。所以无需太过介怀是实现的单向或双向绑定。 实现数据绑定的做法有大致如下几种:
AngularJS是啥?(一脸懵逼) 简介: AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款
AngularJs诞生于2009年,最初由MiskoHevery和Adam Abrons开发,后来成为Google的项目。AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚、简洁地构建你的应用组件。它的创新点在于,利用 数据绑定 和 依赖注入,它使你不用再写大量的代码了。这些全都是通过浏览器端的Javascript实现,这也使得它能够完美地和任何服务器端技术结合。(达观数据陈高星) 本文主要涵盖:AngularJsMVC模型、$s
Squid3.0之前,一直不能完美支持http1.1。所以对gzip内容的支持,始终有很多问题。我也看过很多帖子,号称解决了这个问题。但是其实一直没有把问题说清楚。我今天试着把问题的原因和解决方法彻底说清楚。 squid不支持常见的gzip压缩的原因,有以下两点: 1, squid只支持gzip的静态压缩,不支持动态压缩。具体一点说,就是response header里必须有content-length, 不可以用chunked方式。 2, response header中必须有Vary : Accept-Encoding 只要具备以上几点,squid就可以完美的识别压缩和不压缩的内容。 下面说一下nginx针对这个问题的解决方案: nginx默认的NginxHttpGzipModule, 采用的是chunked方式的动态压缩,而squid是不支持的。需要使用http_gzip_static_module这个模块,进行pre-compress。 具体方法如下: ngx_http_gzip_static_module was introduced in nginx 0.6.24. You must enable support at compile time: ./configure --with-http_gzip_static_module ... 配置文件写法: gzip on gzip_static on; gzip_http_version 1.0; gzip_proxied any; gzip_disable "MSIE [1-6]\."; gzip_comp_level 9; 注意,这里没有加入gzip_vary on;。这是因为http_gzip_static_module这个模块,只给没压缩的内容加入了vary header,而不是所有内容都加。 所以不能打开这个参数。可以在nginx.conf中手动设置vary header。这样不管压缩与否,返回的文件都会被加上Vary: Accept-Encoding。 至此,nginx的gzip压缩,就能够被squid完美支持了。如果你使用Http1.0,就会返回你没压缩的内容。如果你使用http1.1,并且发送Accept-Encoding:gzip,deflate,就会返回压缩后的内容。 PS: 我又发现了一个问题,就是squid的cache保存问题。按照文档上说,squid是根据url来缓存对象的。 也就是说,一个url应该只保留一个cache。如果你交替的申请压缩的和不压缩的内容,是会出现反复MISS的情况的。 但是我实际测试的过程中,发现不是这样的,交替的申请压缩的和不压缩的内容,是会一直HIT的。这说明squid是同时保存两份cache的(压缩的和不压缩的)。
创建自定义的指令 这个文章将解释什么需要在自己的angularjs应用中创建自己的指令,以及如何实现它。 什么是指令 在高的层面上讲,指令是DOM元素中的标记(例如一个属性,一个节点名,注释或者CSS类),它告诉angularjs编译器去给这个元素附加一个指令的行为或者转换DOM元素和它的子元素。 Angularjs拥有一些内建的指令,像ngBind、ngModel和ngClass。非常类似于你创建自己的controller和service,你可以创建你自己的指令个angularjs使用,党angula
本篇基于ng-route来讲下angular中的路由,路由功能主要是 $routeProvider服务 与 ng-view 实现。 ng-view的实现原理,是根据路由的切换,动态编译html模板——$compile(html)(scope)。 更多内容参考:Angularjs总结 前提 首先需要在页面引入angular和angular-route,注意要在angular-route之前引入angular <script src="../../bower_components/angular/an
EM算法是带隐变量概率模型的推断算法。今天我们介绍 EM 算法的原理和应用。我们先介绍推导出 EM 算法的一般方法,再介绍另一种 EM 算法推导方法,最后将 EM 算法应用于高斯混合模型。
做项目的时候遇到的问题 1、问题描述 用户在表单某个值输入多个空格,例如:A B,保存至服务器 在列表查询页面中使用bg-bind的指令单向绑定,结果展示位A B,连续的空格被替换为单个空格 2、定位分析 2.1 从用户输入到最终查询展示经理太多环节,可能转换的地方有: 输入时的事件中,请求服务器前,http传输,服务器接收解析,服务器处理,服务器保存至数据库,数据库查询服务,查询服务返回,界面展示 因此逆向定位问题好些 通过Chrome中network看到服务器返回的数据带有
谈起angular的脏检查机制(dirty-checking), 常见的误解就是认为: ng是定时轮询去检查model是否变更。 其实,ng只有在指定事件触发后,才进入$digest cycle:
上篇《AngularJS入门心得3——HTML的左右手指令》初步介绍了指令的概念和作用。已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与scope有关,可以看做是《AngularJS入门心得1——directive和controller如何通信》在scope上的补充和延伸。 小时候,老师就教会了我们盲人摸象这个成语,教导我们认识事物不能片面,缺少对于一个事物全局的认知。所以,说到指令,它的一个完整结构如下: angular.module('myA
在《AngularJS入门心得1——directive和controller如何通信》我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。这里AngularJS就应运而生,弥补了HTML的天然缺陷,用于构件Web应用等。” 那么AngularJS如何弥补HTML的缺陷,指令可能是最好的回答。 指令是什么??? 指令就是一些附加在HTML元素上的自定义标记(可以是属性A、元素E、css类
Vue.js简介 Vue.js(读音 /vjuː/, 类似于view)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 作为前端的三大框架之一(其他两个是Angular、React),Vue得到了大多前端开发者的
自定义指令 1、第一个参数是指令的名字,第二个参数任然应该使用一个数组,数组的最后一个元素是一个函数。定义指令的名字,应该使用驼峰命名法 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstr
本文能帮你做什么? 1、了解vue的双向数据绑定原理以及核心代码模块 2、缓解好奇心的同时了解如何实现双向绑定 为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考虑到数组的处理、数据的循环依赖等,也难免存在一些问题,欢迎大家指正。不过这些并不会影响大家的阅读和理解,相信看完本文后对大家在阅读vue源码的时候会更有帮助 本文所有相关代码均在github上面可找到 https://github.com/DMQ/mvvm 相信大家对mvvm双向绑定应该都不陌生了,一言不
随着浏览器性能提升,更多Web Page演变为Web App,特别是在中大型的项目中,就需要一个 前端框架 来:
由于升级了 Angular 版本,同样也升级了 Angular-CLI 版本,导致 v8.x 版本的 node 已经无法编译 angular 项目,至少需要使用 node v10.x 版本。
Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面。当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强。如今,已有许多开发人员开始使用 Vue.js 来取代 Angular 和 React.js 。 那么对于 Angular 和 React.js ,开发者该如何选择呢? 下面我们会对这两种框架进行介绍和深度对比。 Vue.js 是前 Google 员工 Evan You 的开发的,并于2014年发布,现已获得了超过57,000个 GitHub
使用 git 管理的代码库,若在提交时能保持一定的格式,则能使维护者一眼看懂每次提交的目的和含义。除了注释之外,我们还可以在提交时加一些标识进行说明。
领取专属 10元无门槛券
手把手带您无忧上云