AngularJS入门笔记

Angular学习笔记

AngularJS

下载方式

使用nodejs下载，npm install angular

什么是AngularJS

Google开源的前端JS结构化框架

AngularJs特性和优点

- 双向数据绑定
	- 声明式依赖注入
	- 解耦应用逻辑，数据模型和视图
	- 完善的页面指令
	- 定制表单验证
	- Ajax封装
           

与Jquery的比较

• Jquery：JS函数库 封装简化dom操作
• angular：JS结构化框架 主题不再是DOM，而是页面中的动态数据

AngularJS能做什么项目

• 构建单页面（SPA）Web应用或者web App应用

  单页面应用（SAP）：Single page application

  特点：

  ​ 1、将所有的活动局限于一个页面

  ​ 2、当页面中有部分数据发生了变化不会去刷新整个页面

  ​ 3、利用Ajax技术，路由。

  • 应用

ng-app指令

ng-app：告诉angular核心他管理当前标签所包含的整个区域，并且会自动创建$rootscope根作用域对象

双向数据绑定

数据可以根据view流向model，也可以从model流向view

ng-model是双向数据绑定，而{{}}是数据绑定

ng-init：初始化当前作用域变量

三个重要对象

1、作用域与控制器对象

• 作用域对象

  一个JS实例对象，ng-app指令会默认创建一个根作用域对象$scope，他的属性和方法与页面中的指令或表达式是关联的

• 控制器对象

  用来控制iAngularJs应用数据，实例对象

  ng-controller：指定控制器构造函数，Angular会自动new此函数创建控制器对象

  同时Angular还有一个新的作用于对象 s c o p e ， 它 是 scope，它是 scope，它是rootscope的子对象

  在控制器函数中声明 s c o p e 形 参 ， A n g u l a r 会 自 动 将 scope形参，Angular会自动将 scope形参，Angular会自动将scope传入

2、模块和控制器

依赖注入

依赖对象：完成某个特定的功能徐涛某个对象才能实现，这个对象就是依赖对象。

• 依赖注入：依赖的某个对象以形参的形式被注入进来使用，这种方式就是声明式依赖注入。
• angular的’$scope‘对象就是依赖对象，并且是依赖注入的形式进行使用
• 回调函数的event就是依赖对象
• 回调函数有形参就是依赖注入

开发的两种方式

• 命令式

  更加注重的是执行过程

• 声明式

  更加注重的执行的结果

  声明式是命令式的局部包装

  创建模块化对象

  生成作用域对象

  myModule.controller('MyController',function($scope){
      $scope.empName = 'kobe'
  })
  myModule.controller('MyController2',function($scope){
      $scope.empName = 'wade'
  })
  //优化  链式调用
  angular.model('myApp'[])
      .controller('MyController',function($scope){$scope.empName = 'kobe';//隐式声明依赖注入
      }).myModule.controller('MyController2',function($scope){
          $scope.empName = 'wade'
      })
  
  //以上的代码有问题：
  //JS代码压缩后形参会用abcd字母代替
  //代码压缩的$scope会被abcd代替，angular无法解析
  //解决方案
  angular.module('myApp',[])
  	.controller('MyController',['$scope',function($scope){//显示声明依赖注入
          $scope.empName = 'kobe';
      }])
  	.controller('MyController2',['$scope',function('$scope'){
          $scope.empName = 'wade';
      }])
             

angularJs表达式

• 使用Angular表达式：

  语法：{{expression}}

  作用：显示表达式的结果数据

  注意：表达式中引用的变量必须是当前与对象有的属性(包含其原型属性)

• 操作的数据

  基本类型数据：number/string/boolean

  undefind,Infinity,NaN,null,解析为空串："",不显示任何效果

  对象的属性或方法

  数组

常用指令

• Angular指令：Angular为HTML页面扩展的，自定义标签属性或标签
• 与Angular的作用域对象(scope)交互，扩展页面的动态表现力

常用指令一

ng-app:指定模块名，angular管理的区域

ng-model:双向绑定，输入相关标签

ng-init:初始化数据

ng-click:调用作用域对象的方法（点击时）

ng-controller:指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）

ng-bind:解决使用{{}}显示数据闪屏(在很短时间内显示{{}})

ng-repeat:便利数组显示数据，数组有几个元素就会产生几个新的作用域

$index,$first,$last,$middle,$odd,$even
           

<div>
    	<h2>人员信息列表</h2>    
    	<ul>
    		<li ng-repeat="person in persons">
    		{{$index}}--{{person.username}}
    		</li>
    	</ul>
    </div>
           

ng-show:不二类型，如果为true才显示

ng-hide:不二类型，如果为true就隐藏
           

常用指令二

ng-class:动态引用定义的样式{aClass:true,bClass:false}

ng-style:冬天引用通过js指定的样式对象{color:'red',background:'blue'}

ng-click:点击监听，值为函数调用，可以传$event

ng-mouseenter:鼠标移入监听，值为函数调用，可以传$event

ng-mouseleave:鼠标移出监听，值为函数调用，可以传$event