angular笔记(1)

这两周我参与了一个angular项目的迭代,说一下我的使用心得。
架构是大师姐搭建的,比较符合范式要求,讲一下我作为一个angular初学者、公司内部平台维护者的一些学习以及实践经验。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
-app

-css //预处理器编译后的css文件

-data //模拟数据

-js

-app.js(项目主入口)

-common.js(路由、过滤)

-main.js(依赖关系,js入口文件)

-routes.js(状态切换)

-less

-lib(reset之类)

-index.less

-lib(js库文件包,在main.js中引入)

-modules

-子模块中html、js文件写在一起

-host.js(开发测试生产环境对应路由,当有新的URL时,需要对应三个环境)

-index.html(默认首页)

下拉列表选项

1
2
3
4
5
6
7
<select class="" name="必填,用于表单校验"
ng-model=""
ng-options="item.id as item.name for item in List"
ng-init="设置初始值,慎用,尽量在js中设置"
ng-change="func()"
ng-disabled="满足条件时不可用"
required>

注意

ng-options :key as value,这样在<option value="value">中保存的是value,显示的是key .

ng-change挂载在$scope.func = function()上

输入框选项

1
2
3
4
5
6
<input class=""
name="inputName"
ng-model=""
ng-pattern="/此处需要正则表达式,用于检验表单的填写/">

<div ng-show="formName.inputName.$dirty && formName.inputName.$invalid">
当表单检验不通过时显示提示语,dirty表示表单获得焦点,即表单初始化时提示语不现实,invalid表示满足表单非法状态下显示提示语</div>

表格

1
2
3
4
5
6
7
8
9
10
11
<table ng-table="tableParams" class="">
<tr ng-repeat="item in $data">
<td class="" data-header="'checkBoxHeader.html'" >
<input type="checkbox" ng-model="checkBoxes.items[item.id]">
</td>
<td data-title="'任务一级分类'">
<div class="text-center" bo-bind="item.firstCategoryName | demoLimit:15" uib-tooltip="{{item.firstCategoryName}}">
</div>
</td>
</tr>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function  checkBox(){
$scope.checkBoxes = { 'checked': false, items: {} };
$scope.$watch('checkBoxes.checked', function(value) {
angular.forEach(list, function(item) {
if (angular.isDefined(item.id)) {
$scope.checkBoxes.items[item.id] = value;
}
});
});
}

function getTableParams() {
$scope.tableParams = new NgTableParams({
count: PAGESIZE
}, {
getData: function(params) {
var pageIndex = params.page();
return httpData.getThemeList({
pageIndex: pageIndex,
pageSize: PAGESIZE,
}).then(function(response) {
params.total(response.totalNum);
$scope.tableCount = response.totalNum;
list = response.list;
checkBox();
return response.list;
});
}
});
}

字符长度过滤

1
2
3
4
5
6
7
8
9
.filter("demoLimit", function () {
return function(string,num){
if(string && string.length > num){
return string.slice(0,num) + "..." ;
}else{
return string;
}
}
})

注意

NgTableParams插件获取表单新数据,存入$data中在页面中使用,bindonce插件表示数据同步一次,bo前缀有自己的html语法,区别ng前缀,在加载图片是bo可能会有问题。

数据实时校验

1
2
3
4
5
6
7
8
9
10
<td>数据one</td>
<td>
<input class="" name="entryFee" ng-model="Item.dataone"/>
<divng-show="dataoneError==0" >数据1不能超过数据2</div>
</td>
<td>数据two</td>
<td>
<input class="form-control" name="challengeReward" ng-model="Item.datatwo"/>
<div class="text-danger" ng-show="dataoneError==0">数据1不能超过数据2</div>
</td>

1
2
3
4
5
6
7
8
9
10
11
12
13
$scope.$watch('Item.dataone',function() {
if(+$scope.dataone < +$scope.datatwo)
$scope.dataoneError = 0;
else
$scope.dataoneError = 1;
})

$scope.$watch('Item.datatwo',function() {
if(+$scope.dataone < +$scope.datatwo)
$scope.dataoneError = 0;
else
$scope.dataoneError = 1;
})

注意

我写了两个watch来同步监视数据变化,若只有一个watch,则可能导致两个数据之一改变另一数据不能检测到,页面中watch过多可能有性能问题,建议有更好的解决方案。

项目启动

1
2
//app目录下
fone s

项目打包

1
2
3
4
5
//index.html打tag
//app目录下
fis3 release -d ../dist
//root目录下
git add/commit/push

附录一

当页面中出现除了提交表单以外的按钮时,当在input输入框填写文字时键盘触发回车,会导致距离输入框最近的按钮触发,解决方式如下:添加不可用的按钮,则回车触发不可用按钮,完美解决。

1
2
3
<button ng-disabled="true" style="display:none"></button>
<button class="" ng-click="doChooseAdvice()">选择</button>
<button ng-disabled="true" style="display:none"></button>

附录二
需要掌握的资料
angular&bootstrap插件合集
angular&bootstrap插件
angular常用插件与指令收集
angularui
javascript时间戳和日期字符串相互转换

附录三

1
Error: [$compile:tplrt] Template for directive 'AAA' must have exactly one root element.

指令error:这个错误表示指令编译成标签的时候出现问题,可能的解决方式:

  • 外层包裹一个div
  • 指令内有标签未闭合,检查代码

附录四

1
cannot set property 'visiblecolumncount' of undefined

angular-error
当时看到这个问题觉得很奇怪,后来发现是接口没有取到数据的问题,检查接口返回。

友情链接
@XB同学改造的angular项目目录生成