AngularJS入门知识概括

一、简介

AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库，为于实现动态WEB应用。

 

表达式：{{}}

四大特征：

1、MVC模式：(Model -View - Controller)

服务层（Ajax 请求）- 业务层（Controller）- 展现层（HTML 模板）

Model:数据,其实就是angular变量($scope.XX);

View: 数据的呈现,Html+Directive(指令);

Controller:操作数据,就是function,数据的增删改查;

 

2、双向绑定

框架采用并扩展了传统HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。

AngularJS的工作原理是：HTML模板将会被浏览器解析到DOM中，DOM结构称为AngularJS编译器的输入。AngularJS将会遍历DOM模板，来生成响应的NG指令，所有的指令都负责这对View(即HTML中的ng-model)来进行数据绑定。

$scope对象充当着数据模型的作用，可以用沟通controller层与view层的数据传输

 

3、依赖注入

某个对象依赖的其他对象无需手工创建，由框架来自动创建并注入进来

简单例子：

函数依赖注入：functionMyController($scope,其他参数)

Controller依赖注入：App.controller(‘mycontroller’,function($scope,myservice)){}

4、模块化设计

高内聚低耦合法则

   1)官方提供的模块           ng、ngRoute、ngAnimate

   2)用户自定义的模块    angular.module('模块名',[ ])

模块化设计可以提升代码的复用率

二、指令

（1）ng-app ：指定当前的模块名称

（2）ng-controller:指定控制器

（3）ng-init  ：初始化调用方法，可以初始化方法，也可以初始化变量

（4）ng-model:  绑定变量  

（5）ng-repeat:  迭代循环

（6）ng-click:   点击指定某方法

（7）ng-if :  判断当条件成立时，显示div或span 里的内容

（8）ng-options:  指定下拉列表（select）的数据来源  ,语法格式如下：

        集合成员.值属性  as  集合成员.文本属性  for 集合成员 in 集合

（9）ng-checked :用于复选框 ，返回值为true则选中  返回值为false则不选中

（10）ng-true-value: 当用户选中复选框，提交的值

（11）ng-false-value:当用户取消选中复选框，提交的值

 

三、内置服务

1、$http:发送http请求

Get请求：$http.get(url).success(function(response){ } ).error( function(){ } );

Post请求：$http.post(url,entity ).success(function(response){ } ).error(function(){ } );

文件上传:

$http({

        method:'POST',

        url:"../upload.do",

        data: formData,

        headers: {'Content-Type':undefined}, //指定头信息

        transformRequest: angular.identity //表单数据序列化

});

2、$location:地址栏服务

获取参数： $location.search()[参数名称]

注意 url   ?前加#  

angulars两个页面之间相互传参

例如http://localhost:8080/admin/edit.html#?id=14

var id= $location.search()['id'];//获取传输到该页面的id值

 

3、$controller  控制器服务

伪继承解决$scope通用

$controller('baseController',{$scope:$scope});//继承

其他

$watch : $scope的内置方法，用于监控参数的改变