AngularJS初步

  • AngularJS特点

    • 遵循AMD规范
    • 不需要操作节点
    • 对于jquery,一般是利用现有完整的DOM,然后在这戏Dom的基础上进行二次调教了;而对于AngularJS等框架则是根据数据模型以及其对应用dom模板,而后通过模板类似于搭积木那样组合页面。
    • 不适合频繁dom操作的应用。
  • {{}} Angular的表达式
  • 借鉴mvc理念;仅仅只是借鉴,区别在于控制C,Angular弱化了控制器
    • mvvm

      • vm:viewModel,$scope 是一个对象
    • 官方解释 mvw
      • w:whatever,$scope 是什么都无所谓,都可以
  • <html ng-app>
  • 最早是由backbone提出该理念,但封装不够彻底
  • ng-model 双向绑定,只有能在页面下可操作的标签才能双向保定 ##原理
  • $watch
    • 监听列表
    • 页面上所有绑定到页面上的{{}}、ng-model等都会加入监听列表,根据数据变化,来改变页面显示。
    • <pre> scope.age=20; $scope.$watch(‘age‘,function(newValue,oldValue){ console.info(‘监听age’); });</pre>
  • $digest
    • 循环监听列表,当发现监听值发生变化,调用相应回调函数,进行dom操作
    • 需要在anguler上下文环境中才能启动
    • 每次循环到有值的改变,会重新循环,所以为了保证效率,尽量不要让数据相互影响。相互影响超过10次angular会报错。
  • $apply
    • 把环境改变为angular的上下文环境
    • <pre> $scope.$apply(function(){ (angular上下文环境) }); </pre>

mvc

  • model(模型) view(视图) controller(控制器)
  • model相当于数据,view呈现model里的数据,controller是连接model和iew之间的传输

$scope

  • 是一个对象
  • 可以嵌套
  • 顶层$rootScrope,就近原则查找属性,最终查到$rootScrope,没有不会报错
  • function($scope){};依赖注入,被动获取

$index

获取选中节点序号

过滤器

过滤器(filter)正如其名,接受一个输入,通过某种规则处理后,返回处理后的结果。

  • currency
  • date
  • filter
  • json
  • limitTo
  • lowercase
  • uppercase
  • number
  • orderBy

directive

测试指令,在css里面写一个.red;在html中调用ng-class="{red:true}";

  • ng-class
  • ng-style
  • ng-show
  • ng-hide ##事件## 给$scope对象添加一个属性,属性为一个函数,在html中ng-click="调用该函数"。 *ng-click

AJAX $http

  • $http.get("/users/router?username="+$scope.username").success(function(){});
  • $http.post("/users/router",{name:xiaoming,pwd:123456}).success(function(){});
时间: 2024-11-10 07:53:03

AngularJS初步的相关文章

AngularJS——初步认识(1)

学习参考原文:https://segmentfault.com/a/1190000000350125 1. 使用bower安装angular和bootstrap(具体bower的使用参考上一篇 http://www.cnblogs.com/LinSL/p/7119773.html) $ bower install angular $ bower install bootstrap 2. 在项目文件下创建index.html,应用angular,具体实例如下: (1) 1 <!-- 以字符串数组的

【原创教程】鲸吞HTML

首先,我们的angularJS课程分为三大模块: HTML/CSS/JS基础. angularJS详解. angualrJS的一些实用框架讲解. 其中,第一大模块的对象是对前端开发技术有点了解但不熟悉的童鞋,其中会对HTML/CSS的基础进行学习,由于本课程的性质,会对其中的JS着重讲解.第二大模块的面向对象是对前端技术HTML/CSS/JS有了一定了解的童鞋,能构建网页.第三大模块则是我们这个课程的小彩蛋环节,期待一下. 这一节课中,我们将讲解下HTML和CSS的基础,后面我们还会详细讲解JS

AngularJS学习笔记之初步了解

AngularJS简介 AngularJS的四个核心思想 依赖注入 模块化 双向绑定 语义化标签 什么是AngularJS AngularJS 把应用程序数据绑定到 HTML 元素. AngularJS 可以克隆和重复 HTML 元素. AngularJS 可以隐藏和显示 HTML 元素. AngularJS 可以在 HTML 元素"背后"添加代码. AngularJS 支持输入验证.

AngularJs我的学习整理(不定时修改)

最近一月份的日子,学习了AngularJs,还只是刚刚入门而已.了解了基本的语法规则以及很简单的应用.仔细想想,学习AngularJs的时间大概半个月的时间,每天花在AngularJs上两三个小时. 在短短的学习入门时间,也想简简单单地做一个阶段性的总结.下一次的学习应该是进阶.计划准备在NodeJs入门之后进阶AngularJs和NodeJs. AngularJs是什么东东? AngularJS 使得开发现代的单一页面应用程序变得更加容易(单一页面应用程序SPAs:Single Page Ap

AngularJS 学习笔记 1.皮毛

还有几天就要去就要去新公司报道了. 新公司是要用到 AngularJs的. 虽然以前简单看过. 但是没有详细了解过. 趁这几天恶补一下. 早就听说了 出了2.0. 且完全和 1.0 不一样.. 这让我很忧伤. 于是在学习之前查了一下 http://www.oschina.net/news/65407/is-angular-2-ready 似乎还在开发阶段.. 以下初步了解.  Controller 1. 不用复用Controller. 2. 不用操作Dom,尽量使用指令来完成. 3. 不用再Co

angularjs入门整理

之前发过一篇博文,从mobile angular ui的demo和其官网初识整个angularjs的大体使用,但是没很好学习,只是通过一些技术博文初步认识,陷入很多坑.所以现在在中文官网正式整理下知识点巩固 模板内置指令 引导程序 ng-app 设置变量 ng-model 获取变量 {{}} 遍历 ng-repeat="row in rows" 搜索功能 ng-repeat="row in rows | filter:查询变量名" 排序功能 ng-repeat=&q

深究angularJS系列 - 第二弹

深究angularJS系列 - 第二弹,在初步了解了Angular的基础上,进一步的针对Angular的控制器和作用域问题深入探究O(∩_∩)O~~ Angular控制器 控制器(Controller)的理解 控制器是对view的抽象,用来接收view的事件,响应view的请求: 控制器包含view的静态属性和动态的方法: 控制器与view是一对一的关系. 控制器(Controller)的结构 1 .controller("控制器的名字",function($scoppe){ 2 ..

AngularJS作用域

AngularJS作用域 一.概要 在AngularJS中,子作用域(child scope)基本上都要继承自父作用域(parent scope). 但,事无绝对,也有特例,那就是指令中scope设置项为对象时,即scope:{…},这将会让指令创建一个并不继承自父作用域的子作用域,我们称之为隔离作用域(isolated scope). 指令中的scope一共可以有三个值,下面我们再来温习下: 指令之scope scope: false 默认值,指令不会新建一个作用域,使用父级作用域. scop

对于angularJS的一点思考

已经找好工作近两周了,入职基本上还算顺利,自己两年来的挑灯夜战也算是有了收获,于是这两周基本上是按部就班的工作,没有学习什么新技术.在上个公司的时候,同事在项目中使用angularJs,之前他也没有接触过angularJs,一边学习一边做项目,结果给项目团队造成了很大的困扰.angularJS他研究的不透彻,在使用的过程中造成了很大的弊端,比如标签闪烁,暴露出未解析的源代码等.在商业的项目上尝试使用新技术是十分危险的,轻则项目留坑,给维护留下巨大的安全隐患,重则项目流产,商业计划因此而毁于一旦,