• angularJs学习笔记


    1.AngularJS 应用组成如下:

    • View(视图), 即 HTML。
    • Model(模型), 当前视图中可用的数据。Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
    • Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。controller与view层的交互式通过$scope(作用域)来实现的

    2.AngularJS 表达式 与 JavaScript 表达式

    类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。
    与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。
    与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。
    与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。

    关于模块(module):

    1.对应的是java中包的概念(或是类的概念),每个相对独立的模块都用这个命名空间规则来区分开来

    2.光定义是不会执行module中的方法的,还得具体的执行。执行的方法是:1.要么显示调用module("xxx")方法;2在别人的module("",["xxx"])方法中被调用(继承);3.html代码中有ng-app="xxx"的指令

    关于控制器:

    1.控制器的变量属性也可以直接绑定函数(方法)

    2.angular的control方法不能直接放在JQ的ready(function(){})中,因为这时传入ready方法的是个闭包函数,其中的作用域和全局的作用域隔离了,所以angular无法渲染上下文

    3.jquery操作angular生成的DOM树时,无法判断是否加载完成的问题。解决办法是使用

    关于作用域($scope):

    1.scope是controller和view层的胶水

    2.不在scope中定义的属性,视图无法更新

    3.$scope与$rootScope区别,$scope是controller特有的一个参数,而$rootScope是一个全局的服务,也可以看做一个全局的作用域来使用(看API就知道它其实是个服务)

    关于过滤器:

    1.过滤器除了在表达式中外,还可以添加到指令中,还可以绑定模型(用户输入),实现排序和搜索功能

    2.可以自定义过滤器

    关于服务:

    1.$http 服务:用于读取远程服务器的数据(ajax)

    2.其它服务:$location、$timeout、$interval

    3.可以自定义服务

    关于指令:

    1.尽量在属性中声明指令,避免IE中出现的兼容性问题。如果不用指令而用{{变量}}占位符的话,会出现兼容性问题

    关于双向绑定:

    1.双向绑定可以说是angular的一个核心,要学习双向绑定可以去研究"ngModelController",它是ng-model的控制器。学好了可以自己写双向绑定(高级)

    2.有空研究下这篇文章:http://www.tuicool.com/articles/yAr6N3i

    3.有时在使用外部插件的时候,由于不在angular里面,绑定会失效,这时就要使用scope.$apply方法,详见http://www.cnblogs.com/zhrj000/p/3383898.html

    关于加载文件:

    1.angular由于是单页面应用,首页的数据一次性加载,会有很多文件。量大了以后优化必不可少,有2个思路:一是压缩合并文件,二是使用类似requireJS这种框架来(异步)加载

    常用指令:

    ng-app: 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。

    ng-controller :定义了控制器

    ng-model: 指令把输入域的值绑定到应用程序变量 name。指令可以为应用数据提供状态值(invalid, dirty, touched, error):

    ng-bind: 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

    ng-init :指令ng-init 指令为 AngularJS 应用程序定义了 初始值。(不常用)

    ng-options:下拉选择框。选项是对象,可以直接在controller里调用。注意"x for (x, y) in sites"的写法,如果绑定的是一个对象(带:号的)则必须写成x for (x,y)而不是x for x。

    ng-repeat :指令ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。也可以用于制作表格,表格中可以使用下面的ng-if指令

      warn:有重复字符或数字的时候会报错,对象没关系(详见http://www.111cn.net/wy/js-ajax/90324.htm)

    ng-if:条件选择

    DOM属性相关指令: ng-disabled、ng-show、ng-hide、ng-click

    ng-include:包含其它html页面(模板)

    ng-view: 指令遵循以下规则。
     每次触发 $routeChangeSuccess 事件,视图都会更新。
     如果某个模板同当前的路由相关联:
     创建一个新的作用域;
     移除上一个视图,同时上一个作用域也会被清除;
     将新的作用域同当前模板关联在一起;
     如果路由中有相关的定义,那么就把对应的控制器同当前作用域关联起来;
     触发 $viewContentLoaded 事件;
     如果提供了 onload 属性,调用该属性所指定的函数。

    自定义指令:略 

    常用函数:

    run():运行块。假设我们需要在每次路由发生变化时,都执行一个函数来验证用户的权限,放置这个功能唯一合理的地方就是 run 方法。

    $interval():轮询的方法,需要配合$scope.$on('$destroy', function())方法,在离开当前页时清除轮询事件,具体使用详见API。

  • 相关阅读:
    Codeforces Round #251 (Div. 2) A
    topcoder SRM 623 DIV2 CatAndRat
    topcoder SRM 623 DIV2 CatchTheBeatEasy
    topcoder SRM 622 DIV2 FibonacciDiv2
    topcoder SRM 622 DIV2 BoxesDiv2
    Leetcode Linked List Cycle II
    leetcode Linked List Cycle
    Leetcode Search Insert Position
    关于vim插件
    Codeforces Round #248 (Div. 2) B. Kuriyama Mirai's Stones
  • 原文地址:https://www.cnblogs.com/xujanus/p/5557001.html
Copyright © 2020-2023  润新知