AngularJs[笔记]

（一） 使用

1．需要导入依赖 ,

建议是直接复制品优购项目粘贴过来修改一下即可, 有些东西都是固定的,说实话没必要重复的敲.
下面的路径稍微修改一下,引入顺序尽量不要改动,不然可能会出现问题















使用步骤:
1. 导入JS
a) 因为是前端的东西,所有不需要导入坐标依赖,只需要导入Angularjs文件库即可,如果没有导入文件库那么下面的所有的东西都无法进行操作.
导入js完了还需要声明angularjs的作用范围,
类似下面的东西,还需要声明模块才行

2．入门级别指令(表达式)

1. ng-app 指令 作用是告诉子元素一下的指令是归angularJs的,angularJs会识别的,一般设置在 标签里面:
   列如:
   作用:定义angularJS的作用范围,就可以在里面写angularJS指定和表达式等等所有东西
   2. 表达式写法{{表达式}} 表达式可以是变量或者运算式
   {{100+200}}
   这样如果是在angularJs范围内就会被运算
   
   
   

   3．双向绑定(绑定数据和展示数据)

   
   ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上，而表达式可以实时地输出变量。
   
   
   
   {{name}}
   
   意思就是上面输入什么值 内容就会绑定到name属性, 表达式可以事实的输出值

   4．多参数的数据组装

   如果有两个以上属性的话,最好封装成一个对象,如果只有一个的话,给个字符串就可以了.
   ng-click=“imageEntity={}”
   使用的时候需要初始化一下实体类才行,也可以直接在js文件里面获取,还可以通过点击事件的方式初始化实体类
   
   

   5．$scope的详细解释

   $scope:可以理解为模块数据与视图数据的桥梁(就是中间跑腿的)，
   可以理解为一个全局的作用域对象(作用用于注入数据的,数据双向绑定非常关键的数据就是它)
   什么是视图数据:就是展示在页面的内容,以及页面输入的内容会绑定到一个模型数据(ng-model).
   
   如何在JS代码里面获取你绑定的模型数据并把它提交到后台呢?
   用$scope来获取
   如何把你从后台查询出来的数据展示在页面上?
   也通过$scope来完成
   
   自己发现的:
   在HTML代码里面没有编写$scope (用Ctrl+F搜索了一下)
   
   在JS代码里面需要用到页面的数据的时候都是 $scope . XXX (中间是点)
   
   
   

   6．控制器

   在angularJS中，controlle是一个javascript函数/类，用于操作作用域中，各个对象的初始状态以及相应的行为(操作模型数据和视图数据)
   1. 需要声明控制器
   a) 给模块进行初始化操作
   i. ng-app=“自定义的模块” 是一个使用了自定义的模块，该自定义的模块继承了 那个初始的默认的模块，可以调用初始的默认的模块的方法。
   ii. ng-controller用于指定所使用的控制器
   iii.
   1. //初始化模块 参数一：模块名称
   参数二：依赖的其他模块 如果没有依赖其他模块，也需要声明空数组[]
   var app = angular.module(“angulardemo”,[]);
   2.//初始化控制器
   参数1:控制器名称
   2. 函数,控制器里面可以做什么事情都可以写在这里面
   
   app.controller(“angularctrl”,function($scope){
   $scope.name=”czbk”; //为name属性赋值
   });
   demo步骤演示
   

/5这里接收步骤4的赋值操作 Model/
{{name}} /6这里用来显示给页面的 View/

页面显示内容

7．给页面绑定事件

给button绑定事件
相加

$scope可以操作绑定事件
$scope.add=function(){ …………….. }
入门演示



//默认是展示全部的标签效果

如果你只是需要一部分的话:根据官网这个数据进行修改:

可以根据你的情况来选择保留哪个功能,不写的话默认显示全部特效



在html页面里面放置需要富文本编辑器的地方即可,任何textarea(文本域标签)都可以,样式可以自己随意修改,但是需要注意name属性必须是和上面的create里面的name选择器的name属性对应

2．如何设置按钮选项

是基于items来设置的,具体参考官网:
http://kindeditor.net/docs/option.html
http://kindeditor.net/doc.php

3．获取你输入的富文本编辑器内容

文本域输入端内容提交后台就是一段html代码
editor.html(); 就可以取得内容,你也可以用别的参数来接收,列如:

$scope.entity.goodsDesc.introduction=editor.html();

controllerjs
//保存 别的保存业务
$scope.add=function(){
/设置商品介绍属性(文本域赋值操作)
goodsDesc实体对象
introduction是实体类的属性(后台pojo的属性对应)
=editor.html(); 是赋值操作(把kindeditor富文本编辑器输入的值赋值给谁)
!!! 下面意思就是把用户在kindeditor富文本编辑器里面输入的值赋给introduction属性
后台java中 可以通过introduction这个属性接收值

!!!!!保存成功之后还需要清空富文本编辑器
/
$scope.entity.goodsDesc.introduction=editor.html();

//调用service层的add函数,传入属性是刚才HTML页面封装好的entity实体对象
goodsService.add($scope.entity).success(
function(response){
if(response.success){
//清空输入的数据
$scope.entity={}; //保存成功之后清空实体类
editor.html(‘’);//清空富文本编辑器
}else{
alert(response.message);
}
}
);
}
//增加
this.add=function(entity){
return** $http.post(‘../goods/add.do’,entity );
}




后面java代码就是insert语句了就不写了……