angularJS 笔记

angular : 把JS重新封装了一遍 , 来对[数据]进行操作的时候比较适合用angular开发，省略了复杂的DOM操作( 那么DOM操作谁来完成的呢？angular框架已经实现了 )

 

jquery : 把JS重新封装了一遍 , 比原生JS写起来比较简单 , 对DOM的操作非常的方便，做一些炫酷的效果。

 

angular的官网 : https://angularjs.org/ , 是google团队开发的(2009年开始的) , 版本 : angular.1.x 和 angular.2.x(react的诞生迫使angular做出改变，融入了很多react的思想)

 

jquery的官网 : http://jquery.com/ , 2006开始的 jquery两个大的版本 : jquery.1.x jquery.2.x , 这两个版本区别 : jquery.1.x支持所有浏览器   jquery.2.x不支持IE6,7,8

 

angular : 

 

表达式( Expression )  :  {{  }} 表达式里面的代码是可以运算的

 

指令( Directive )  :  ng-app : 初始化angular的作用范围 , 有的范围可能不需要用到angular，所以可以控制那一部分代码受angular控制(在一个文件中只能有一个ng-app)

 

MVC : M(model:数据)  V(view:试图)  C(controller : 控制器) , MVC是一种思想：就是把MVC三部分进行分离式开发。

 

模块 (module) : node seajs requirejs(模块加载器，在JS模块中去引用JS模块) , 把一个一个的功能独立的封装起来，然后模块与模块之前互相引用来实现具体功能。好处 : 不用把代码写成一坨，而是分开，容易开发和维护。

 

创建一个模块 : angular.module() : 第一个参数 : ng-app的名字 第二个参数 : [] 引入其他模块

 

模块下的方法 : m1.controller() : 第一个参数：控制器的名字 第二个参数 : 回调函数

 

服务( service ) : $scope ( 局部作用域的服务 )

 

ng-controller : 控制器指令（指令）

 

$rootScope :  全局作用域 (服务) , 作用在ng-app的范围内，不用写控制器 。局部的作用域大于全局作用域

 

依赖注入 : 函数的形参已固定的格式返回 angular中依赖注入有三种模式( 推断式注入 , 标记式注入 , 内联式注入 )

 

//-----------------下午------------------------

 

ng-click : 点击操作 ( 指令 ) 其他事件 : ng-mouseover ng-blur ng-keyup ...

 

angular中没有提供的功能去修改数据的时候，视图是不会改变的 : 像setTimeout setInterval( 默认情况下 , 有两种方法可以改变试图 : 1. $timeout这个服务  2. 利用$scope.$apply()来手动更新试图 )

 

$timeout : 延迟执行 ( 服务 )

 

ng-repeat : 重复输出DOM结构 ( 指令 )   $index 循环中的索引值

 

ng-model : 绑定输入框中的相关数据 ( 指令 ) , 这个过程angular叫做双向数据绑定(MVVM)

 

angular的核心内容 : 工具函数(function)   指令(directive)  供应商(provider)  服务(service)  过滤器(filter)  插件( 额外的功能 )    自定义部分

 

jquery的工具函数 : $.type()   $.param()   $.extend()    $.proxy()   $.get()  $.ajax()... 辅助开发的功能

 

angular.isArray() : 判断是不是数组 ( 工具函数 )

 

angular.isDate() : 判断是不是日期 ( 工具函数 )

 

angular.isDefined() : 判断是不是undefined ，如果不是返回true，如果是就返回假 ( 工具函数 )

 

angular.isUndefined() : 判断是不是undefined ，如果是返回true，如果不是就返回假 ( 工具函数 )

 

angular.isElement()  :  判断是不是DOM节点   （工具函数 )

 

angular.isFunction() :  判断是不是函数   （工具函数 )

 

angular.isNumber() : 判断是不是数字   （工具函数 )

 

angular.isObject() : 判断是不是对象   （工具函数 )

 

angular.isString() : 判断是不是字符串   （工具函数 )

 

----------------------------------

 

angular.bind() : 改变函数中的this指向的 （工具函数 )

 

angular.bootstrap() : 跟ng-app类似的功能，来启动我们的应用程序的 , 但是要保证等所有DOM加载完再去执行,一般我们放到程序的最后。跟ng-app区别 : 可以启动多个区域

 

 

angular.copy() : 两个参数，第一个参数是一个对象，来实现深拷贝

第二个参数对象可选，可以让第一个参数修改第二个参数的对象值 (工具函数)

 

angular.extend() : 继承的操作 , 浅继承  (工具函数)

 

angular.merge() :  合并的操作 ，深继承  (工具函数)

 

angular.element() : 内置了一个简版的jquery (jqLite) , 类似$ (工具函数) 

在内部使用的比较多

 

angular.equals() : 优化了原生JS的比较操作 (工具函数)

 

angular.forEach() : 遍历集合的操作，既支持数组又支持JSON，比原生的要强大

 

angular.fromJson() , angular.toJson() :  JSON.parse()  JSON.stringify() 类似

 

angular.toJson()的第二个参数可以格式化数据字符串结构

 

angular.identity() , angular.noop() : 防止代码报错的,容错写法 

 

angular.reloadWithDebugInfo() : 刷新页面

 

//----------------------下午---------------------------

 

过滤器 ( filter ) : 写法分为两种 : 第一种在HTML表达式中写 ，利用 | 管道符号。

           第二种在JS中写 , 利用  ： $filter服务 

 

currency : 金额 （过滤器）两个参数：货币格式和小数点个数

 

date : 日期 （过滤器）  二个参数 : 输出格式  和  时区（不常用）

 

filter : 过滤 （过滤器） 三个参数 : 匹配的字符串 , 是否匹配整体和大小写 

 

json : 把json格式的字符串给格式化 （过滤器） 必须用pre标签来格式化

 

limitTo : 截取数据 (过滤器)  两个参数 : 截取的个数和起始位置

 

lowercase , uppercase : 转大小写 (过滤器)

 

number : 数字格式化，加千分符 (过滤器)  参数 ：加小数点，默认是没有的

 

orderBy : 数据排序 (过滤器)  参数 : 三个参数 : 要排序的key值 , 

          布尔值决定排序方式 ，排序过程的回调函数(不常用)

 

$filter : 过滤器的操作 （服务） $scope $rootScope $filter $timeout ..

 

-----------------------------------------

 

$scope.$watch() ：监听数据的变化 : 参数 : 1.要监听的具体数据 , 

                  2.数据发生改变就会触发对应的对调函数

                  3.一个布尔值，可以监听整个数据，默认只能监听单一数据

 

 

依赖注入 : 函数的形参已固定的格式返回 angular中依赖注入有三种模式( 推断式注入 , 标记式注入 , 内联式注入 )

 

内联式注入 ：有利于压缩代码的时候使用。

 

标记式注入 : $inject = [] 的方式 （不常用）

 

ng-controller : 的面相对象写法 : myCtrl as obj

 

ng-model : 可配合ng-model-options ：1.{updateOn : 'blur'} 2.{debounce: 5000} 3.剩下的再说...

 

ng-repeat : $first $last $middle $even $odd 都是返回布尔值，配合其它指令开发.

ng-repeat-start ng-repeat-end 针对兄弟节点之间的多次遍历

 

ng-class : { 样式1 : true , 样式2 : true } : 当前算是class="样式1 样式2"

 

ng-hide ng-show : 显示隐藏 : display样式的控制

 

ng-if : 显示隐藏 : 控制的就是DOM节点的添加appendChild、删除removeChild

 

ng-init : 在指定的元素上初始化数据

 

ng-switch : 切换多个不同的视图 ng-switch on="数据"   ng-switch-when="对应数据的值"

 

---------------------下午-------------------------

 

ng-value : 控制value值 ( 指令 )

 

ng-bind : 给标签绑定内容 ，跟{{表达式}}类似的功能 , 但是没有表达式功能强大，

          只能接受一个数据 , 好处：当网络慢的情况下，是不会有任何影响的

 

ng-cloak : 网络慢的情况下，不去显示{{表达式}}，提高用户体验

 

ng-bind-template : 解决ng-bind的缺陷的

 

ng-bind-html : 可以把数据中的标签当html渲染出来 , 必须要引入第三方的插件 : sanitize.js 。

免费的CDN :　http://www.bootcdn.cn/

 

ng-cut : 剪切事件

ng-paste : 粘贴事件

ng-copy : 复制事件

 

ng-include ：渲染不同的模板地址 ( 尽量在服务器环境下运行 )

 

还有一类指令是重写了原生的标签 : 

        一共有4种指令 : 另外两种指令不常用:样式指令和注释指令

        a input form 标签指令 ng-init ng-model 属性指令( 这两种常用 )

 

标签指令 : 

a : 阻止了a标签的默认行为 , 不用再写javasript:;

select : 通过 for in 输出 options

form : 表单的操作 novalidate属性是取消表单的默认行为

表单中的元素通过name调用的方式来找到

        表单中的元素 : 有5个重要的属性 : (必须要写ng-model来绑定数据)

                       $valid $invalid $pristine $dirty $error

$valid : 验证成功返回true

$invalid : 验证失败返回true 

$pristine : 初始数据返回true 

$dirty : 修改过数据返回true

$error : 验证是否成功的全部信息 如果里面有值返回真，就说明验证不通过 , 所有值都返回false , 那么验证成功.

 

required 这个属性 ：代表必填项，不能为空

ng-pattern 这个属性 ：代表正则验证

ng-minlength , ng-maxlength : 代表最小长度和最大长度

 

 

ng-style : { 'background' : 'red' }

 

服务 : 

 

$filter , $timeout , $interval , $window , $document

 

$http : 前后端数据交换的接口，实现ajax的操作

 

有些服务存在对应的供应商 : 

写法 : 服务 + provider

对我们的服务进行初始化配置的

所有的供应商都要写到config()方法中

 

$interpolateProvider : 插值计算(表达式)的供应商

 

 

$log : 调试信息 (服务)

 

$logProvider : 调试信息的初始配置 (供应商)  debugEnabled():可关闭调试功能

 

$location : 获取网址信息 (服务) 常用的search() hash()的值得获取

 

$anchorScroll : 配合$location.hash() 进行锚点跳转  (服务) 

 

$cacheFactory : 缓存数据的  (服务) 

 

$filterProvider : 过滤器的配置 (供应商) register() : 自定义服务的功能

 

$interpolate : 插值计算的 (服务)

 

-------------------------------------------------------

 

自定义指令 :

 

angular自带的指令 : ng-*  我们自定义一般不叫ng，my-*

 

m1.directive() : 来实现自定义指令

 

 

return {   //进行配置自定义指令的

restrict : 'EA',    //什么类型的指令 :

//标签类型的指令 : E 

                                //属性类型的指令 : A

                                //样式类型的指令 : C (不常用)

//注释类型的指令 : M (不常用)

  

template : '<div>hello angular</div>'

scope : {}   //隔离作用域 可以设置绑定策略

@ 单向绑定 : 字符串

                                = 双向绑定 : 数据变量

                                & 方法

                controller : function(){ //我们的自定义指令有自己的作用域

                }

};

 

m1.filter() : 来实现自定义过滤器

 

http://www.ionic.wang/  : 有时间自己先看看 在angular框架的基础上开发的一个框架，主要针对移动端web app的实现  :  angular + ionic + phonegap

 

 

 

 

 

自定义服务 : 

 

m1.factory()    ->  高级接口   ->  底层调用 provider()

m1.provider()   :  区别就是这种形式是可以拥有供应商的

 

m1.constant() m1.value() m1.service() : 也都可以创建服务(不常用的)

 

m1.constant() m1.value() : 常量的服务方式

m1.service() : 基于面相对象的方式

 

供应商 : 对服务进行初始配置的

 

--------------------插件--------------------------

 

ngRoute : 路由的插件 : 在一个页面中进行视图的切换 , 利用的就是hash值进行操作的

 

ng-view : 切换我们的视口内容

 

在$routeProvider下来设置切换的操作 , 有一个when()方法，两个参数，路径和配置

.otherwise({

redirectTo : '/aaa'  默认首页调用 /aaa的地址

});

 

when()的路径：可以接受变量的形式 :args

$location.path();  //通过JS方式来进行view视口的切换

 

学习完angular1应该掌握什么？

angular适用场景？主要来进行前后端数据交互的开发，对数据进行增删改查的操作，比较适合用angular来开发。

MVC概念  MVVM概念(双向数据绑定)  依赖注入  表达式

模块的概念(依赖其他模块的方式)

路由的操作 ngRoute

供应商的概念 

服务 $scope(作用域)  $http  $location  $timeout  .....

指令 ng-*  a input form ...

过滤器  | number  | orderBy  | filter | uppercase ...

工具函数  angular.isArray()  angular.bind() ... 

自定义部分 : 自定义服务？自定义指令？自定义过滤器？

很多好用的插件(第三方模块 , ngRoute , ngSanitize...)

        

 

 

 

 

 

 

 

 

 

 

 

来自为知笔记(Wiz)

转载于:https://www.cnblogs.com/dannydong/p/6111376.html