AngularJS1

Angularjs1培训

Angularjs1培训: angularjs解决什么问题? 从无穷无尽的DOM操作中解放出来,专注于业务逻辑,DOM操作不叫业务逻辑,那是试图呈现. 组件化,模块化为构建大型项目铺平道路,模块发开发,充分解耦,维护变得可行,组件重用. 利用angularjs构建项目要解决哪些问题? 多页应用还是SPA 多页应用其实就是将多个视图分不到不同的页面,然后有单独的url访问,SPA在一个入口文件中统一管理和展示所有的视图,这是未来的趋势. 如何定义模块,MVC各个部分如何完成,如何衔接 - scop…

Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定

一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定,在开发中非常常见,也是Angularjs1.x的宣传点之一,使用中并没有太多问题. 1.1数据从html流向controller 也就是从视图层流向模型层,原生html中需要使用表单元素(例如input标签)来收集用户输入信息,Angularjs中通过在表单元素上使用ng-model标签,当用户输入信息时,同步将用户输入的信息赋值给controller中的变量: <body ng-app="…

angularjs1 自定义图片查看器(可旋转、放大、缩小、拖拽)

笔记: angularjs1 制作自定义图片查看器(可旋转.放大.缩小.拖拽) 2018-01-12 更新可以在我的博客查看我已经封装好的纯 js写的图片查看器插件博客链接懒得把它封装成插件(其实把angularjs的点击事件成js的点击事件就行了) 下面贴代码(打包好的记得用服务器打开.火狐也行) 打包文件(百度网盘上) 链接: https://pan.baidu.com/s/1o9dMl8A 密码: n3ue 里面有个详细的demo 文件包括 angular.…

关于vue，angularjs1,react之间的对比

1.时间投入的问题:相对于react和angularjs,学习vue的时间成本低,而且容易上手. 2.JSX的可读性比较一般.代码的可读性不如vue,当然,vue也支持jsx,但是vue更提倡template,这样设计人员和开发人员可以更容易的分析代码和贡献代码. 3.React的设计在于它的纯净以及干净的单向数据流.也就是说要为10个输入创建10个函数,而80%这样的函数可能只包含了一行this.setState()代码. 4.对于Angularjs1 ,刚开始能快速的开发,但是随着开发的进行…

Angular系列-AngularJs1使用Ace编辑器

Ace编辑器 Ace编辑器是一个嵌入web的代码编辑器,支持语法高亮,自动补全等功能,如果想在页面展示或编辑代码,使用该工具是很合适的. 参考项目地址:https://github.com/ajaxorg/ace 结合AngularJs1使用目前已经有结合使用的项目了:Ui-ace 我仅做展示使用,所以参考该项目,写一个简单使用例子: 嵌入web的指令 app.directive('uiAce',[function () { return { restrict : 'EA', require:…

AngularJS1.X版本基础

AngularJS 知识点: DataBinding Providers Validators Directives Controllers Modules Expressions Factories Services Filters Dependency Injection Scope AngularJS优缺点比较优点 MVVM 数据和视图绑定,省去频繁操作jquery更新dom,自带了丰富的Angular指令,整体功能比较完善, 包含模板,数据双向绑定,路由,模块化,服务,过滤器,依…

Angular企业级开发-AngularJS1.x学习路径

博客目录有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] 6.[AngularJS控制器] 7.[AngularJS视图] 8.[AngularJS模型] 9.RESTful服务介绍 10.[AngularJS指令] 11.[AngularJS性能优化] 12.[AngularJS安全相关] 13.[AngularJS项目打包和部署]…

angularjs1 实现地图添加自定义控件（搜索功能）及事件

// 添加地图自定义控件的事件 function addEventHandler(target, eventName, handler) { if (target.addEventListener) { target.addEventListener(eventName, handler, false); } else if (target.attachEvent) { target.attachEvent("on" + eventName, handler); } else { ta…

AngularJS1.3一些技巧

前言框架选择.在上一篇文章评论中,有人说angular1.3是个过时的东西,建议使用angular2.其实这种说法很像拿jQuery1.x和jQuery2.x做比较,新的版本当然会有优化优势的地方,但并不一定是最适合你项目的.当你项目必须支持IE6/7/8时,那又得使用jQuery1.x版本.所以不要以新不新去选择一个框架或者某个版本,而是看是不是适合的.当初用angular1.3是他比较成熟有配套的文档,而angular2的文档是不健全的,另外有一点是1.x与2.x的区别太大了,两者的用法没…

【原创】angularjs1.3.0源码解析之service

Angular服务在angular中,服务(service)是以提供特定的功能的形式而存在的. angular本身提供了很多内置服务,比如: $q: 提供了对promise的支持. $http: 提供了对ajax的支持. $location: 提供了对URL的解析. ... 这些服务,或多或少地会出现在我们控制器(controller).指令(directive)或者某个被依赖注入的函数中,帮助我们实现特定的功能. 当然,除了调用官方的服务,我们也可以定义适合于自己业务的"服务",这…

【原创】angularjs1.3.0源码解析之directive

# Angular指令编译原理前言 angular之所以使用起来很方便,是因为通常我们只需要在html里面引入一个或多个(自定义或内置的)指令就可以完成一个特定的功能(这也是angular推荐的方式),比如:一个简单的双向绑定(用ng-model指令),或者模板循环渲染(用ng-repeat指令),又或者是模板是否显示(用ng-if指令),而对于这些指令的内部实现一般我们无需太多关心(除非你想深入了解),我们更乐意于把侧重点放在指令如何使用(即API)上. 我们知道一个应用是由多个功能组成的,…

【原创】angularjs1.3.0源码解析之scope

Angular作用域前言之前我们探讨过Angular的执行流程,在一切准备工作就绪后(我是指所有directive和service都装载完毕),接下来其实就是编译dom(从指定的根节点开始遍历dom树),通过dom节点的元素名(E),属性名(A),class值(C)甚至注释(M)匹配指令,进而完成指令的compile,preLink,postLink,这期间就有可能伴随着作用域的创建和继承(有些指令通过scope字段要求创建自己的(孤立)作用域),从而形成一个作用域(scope)的继承关系.…

如何Angularjs1.3在页面中输出带Html标记的文本

基于安全考虑,Angularjs不允许用ng-bind或者{{}}的方法输出html文本. 在实际的应用中,比如信息管理系统,用在线编辑器编辑出来的文章都带有html标记,这种情况下可以用ng-bind-html将其输出到前台页面. 1.在前台页面中包含sanitize.js <script type="text/javascript" src="webjars/angular-sanitize/1.3.11/angular-sanitize.min.js"&…

MVC 中集成 AngularJS1

在 ASP.NET MVC 中集成 AngularJS(1) 介绍当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 REST 的 Web API 服务.另外,还有最新的数据库技术.最新的设计模式和技术. 当选择最新的软件技术时,有几个因素在起作用,其中包括如何将这些技术整合起来.过去两年中,我最喜欢的一项技术就是设计单页面应用(SPA)的 AngularJS.作为一个微软stack开发者,我也是使用 ASP.NET…

Ⅰ.AngularJS的点点滴滴--引导 AngularJS已经被很多人像炒冷饭一样炒过啦,大部分都是直接复制官方文档没有说明一些注意事项,不过什么都要从头开始吧 ###页面引导实例化 * * * ######1.自动实例化 ```html <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script> <body…

(译)AngularJS1.3.0 开发者指南(四) -- 控制器

理解Controllers 在AngularJS中, Controller是一个Javascript构造函数, 常常被用来扩展 Angular Scope 对象. 控制器通过 ng-controller 指令依附在DOM元素上, Angular通过指定的控制器构造函数, 实例化一个新的Controller对象. 这时, 一个被声明为$scope的新的子作用域被注入到控制器的构造函数中. 使用Controllers我们将可以: 设置$scope对象的初始化状态给$scope对象添加行为不要使用…

AngularJS1.X学习笔记6-控制器和作用域

经过一番艰苦卓绝的鏖战,我终于来到了控制器和作用域部分.控制器作为MVC的C,其重要性不可谓不重要:作用域决定了你可以拿到哪些东西,亦是分外重要.现在就来学习一下两个东西.去看看$apply,$watch,$broadcast是个什么鬼. 一.谈谈MVC 阮一峰老师说Angular是一个叫MVVM的模式(http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html),而自由男人说这是一个MVC框架,个人认为都差不多,目标都是分层,便于协作和维护,…

AngularJS1.X学习笔记5-加强版的表单

大家愚人节快乐!表单是沟通服务器端和客户端的桥梁,为数据从客户端传到服务端打开了一扇大门.AngularJS增加了一些新特性,使我们能够更加方便的操作表单.OK!开始学习!学习使我快乐. 一.双向数据绑定前面已经提到了双向数据绑定,一般而言我们总是从模型中拿到数据放到视图,双向数据绑定提供了这样一种机制,可以将视图中的数据放到模型.下面测试一下 <!DOCTYPE html> <html lang="en" ng-app='myApp'> <head&g…

AngularJS1.X学习笔记4-内置事件指令及其他

AngularJS为我们定义了一系列事件指令,方便我们对用户的操作作出响应.甚至他还有一个可选模块提供了触摸事件和手势事件的支持,为移动端开发提供了可能.现在开始学习一下AngularJS的事件指令. 一.事件指令先盗张图,这个图展示了AngularJS中定义的事件指令,下面来做一些测试. 指令作用描述 ng-blur 属性.类对blur事件指定自定义行为,在元素失去焦点时被触发 ng-change 属性.类对change事件指定自定义行为,在表单元素的内容状态发生变化时被触发(例如…

AngularJS1.X学习笔记3-内置模板指令

前面学习了数据绑定指令,现在开始学习内置模板指令.看起来有点多,目测比较好理解.OK!开始! 一.ng-repeat 1.基本用法 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>databinding1</title> </head> <…

AngularJS1.X学习笔记2-数据绑定

上一篇从整体上认识了Angular,从现在开始更加深入的学习Angular的特性.本次学习的是数据绑定.应该所有的MVC框架都会用到数据绑定,比如我所知道的ThinkPHP.struts等,只有实现了数据绑定才能将模型层和视图层分离,实现MVC.Angular的数据绑定比较特别,它支持双向数据绑定. 1.ng-bind <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> &…

AngularJS1.X学习笔记1-整体看看

听说明天是愚人节,这与我有什么关系呢!我可不想被愚弄,但是但是,我这么笨怎么才能不被愚弄呢?左思右想,我决定从现在开始闭关,闭关干啥哩?学习!学习AngularJS.以前学习过Angular的,不过很久没用都忘的差不多了,所以决定好好复习一下.这两天我将多发几篇随笔,记录一下我的学习过程.参考用书<AngularJS高级程序设计-Adam Freeman>,我会参考书中的例子做一遍,谈谈自己的理解.现在按照作者的思路先总体把握一下,后面再一个一个看. 一.Module对象调用angula…

AngularJS1.X学习笔记14-动画(解读文档)

最近在看算法分析,那个大O啊,小o啊,分治法啊(目前就看到这里),真是搞死了.这回呢休息一下,学学AngularJS动画,上一篇文章根据自由男人的书简单谈到了动画的话题,发现反响很大(好吧,我说慌了,那篇文章的动画谈得太简单了),今天来看看官方文档.嗯,边看边写. 一.安装这个应该都知道了,和其他的扩展模块安装相同.这里为了文章完整性简单提一下.文档给到了获取动画扩展angular-animate.js的多种方式. 1.cdn,自己去查 2.npm install --save angular…

Angularjs1.2版本与1.3版本中控制器的问题

写写今天用ng遇到的一个问题吧.因为刚学习就学视频里面写例子,视频里用的是ng1.2.10版本,我用的是1.5.0. 刚开始的时候我按照ng视频的里面的写,但是控制器就是不能绑定好,后来和同学讨论加搜索终于解决了,接下来看解释:从ng1.3开始就不支持全局的controller,这话怎么理解,ng1.3以前的版本我们设定好控制器后就可以直接在我们要引入的文件中直接引用而不报错.1.3以后的版本后再直接引用就会报错,错误描述:Error [ng:areq]http://errors.angula…

angularjs-1.3代码学习模块

花了点时间,阅读了下angularjs的源码.本次先从模块化开始. angular可以通过module的api来实现前端代码的模块化管理.跟define类似.但不具备异步加载脚本的功能.先从最基本的module开始.查看代码发现angular对module的定义是在setupModuleLoader方法中定义的 function setupModuleLoader(window) { var $injectorMinErr = minErr('$injector'); var ngMinErr…

angularjs-1.3代码学习-$parse

这次我们来看一下angular的Sandboxing Angular Expressions.关于内置方法的,核心有两块:Lexer和Parser.其中大家对$parse可能更了解一点.好了不多废话,先看Lexer的内部结构: 1.Lexer //构造函数 var Lexer = function(options) { this.options = options; }; //原型 Lexer.prototype = { constructor: Lexer, lex: function(){}…

angularjs1.6.4中使用ng-table出现data.slice is not a function的问题

这个问题困扰了我2个小时. 项目中angularjs的版本从1.4.8升级到1.6.4,升级完成之后,发现ng-table不能用了.主要报错信息是ng-table中data.slice is not a function 先说解决方法, Factory.getIndex().then(function (data) { // $scope.tableParams = new NgTableParams({ count: 4 }, { counts: [], dataset: data });升级…

【AngularJS1】的更多相关文章