发表于： 2017-07-26 23:31:28
1 734
今天完成的事情：
1：学习vue。js；
2：小课堂；
明天计划做的事情：趁着现在手里没什么事，学习vue，有时间的话尝试用vue重写一边任务6-10；
遇到的问题：记得图图师兄讲过一次vue，当时还在学css也听不懂。。。
收获：看了写vue的介绍；感觉也是个mvvm框架，学过angular理解mvvm之后应该不会太难吧，而且现在好几
个毕业的师兄都在学vue，应该还是挺火的。
1.背景介绍
angular是什么：AngularJS 最初由Misko Hevery 和Adam Abrons于2009年开发，后来成为了Google公司的项目。AngularJS弥补了HTML在构建应用方面的不足，其通过使用标识符（directives）结构，来扩展Web应用中的HTML词汇，使开发者可以使用HTML来声明动态内容，从而使得Web开发和测试工作变得更加容易。
constant，可以算作angular的全局数据，想要使用的话，只需要在控制器注入即可。
$filter，angular的过滤器，如果想要在控制器里面使用，也是注入，然后调用，而html中的数据过滤，直接键入过滤器名称和对应值即可。
2.知识剖析
constant
每当搜索constant时候，总会连带出现value的说明。
两者都可以作为全局数据使用，但是有两点不同：
1.value不可以在config里注入，但是constant可以。
2.value可以修改，但是constant不可以修改，一般直接用constant配置一些需要经常使用的数据。
下面是简单的应用例子：
angular.module('myApp', [])
.constant('apiKey', '123123123')
.value('FBid','231231231')
.controller('myController',function($scope,apiKey,FBid){
$scope.a = apiKey;
$scope.b = FBid;
})
.config(function(apiKey) {
// 在这里apiKey将被赋值为123123123
// 就像上面设置的那样
})
.config(function(FBid) {
// 这将抛出一个错误，未知的provider: FBid
// 因为在config函数内部无法访问这个值
});
filter是用来格式化数据用的
基本原型
{{expression | filter}}
多个filter连用版
{{expression | filter1 | filter2}}
AngularJS内建了一些常用的filter：
1、格式化货币：
{{ 12 | currency}} //将12格式化为货币，默认单位符号为 '$', 小数默认2位
{{ 12.45 | currency:'￥'}} //将12.45格式化为货币，使用自定义单位符号为 '￥', 小数默认2位
{{ 12.45 | currency:'CHY￥':1}} //将12.45格式化为货币，使用自定义单位符号为 'CHY￥', 小数指定1位, 会执行四舍五入操作
{{ 12.55 | currency:undefined:0}} //将12.55格式化为货币， 不改变单位符号， 小数部分将四舍五入
2、格式化日期：
{{ 1304375948024 | date:'medium'}}//May 03, 2011 06:39:08 PM
{{ 1304375948024 | date }}//结果：May 3, 2011
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}//结果：05/03/2011 @ 6:39AM
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}//结果：2011-05-03 06:39:08
3、过滤数组：
$scope.arr = [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ]
{{arr | filter:'s'}} //查找含有有s的行//上例结果：[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]
4、将对象格式化成标准的JSON格式：
{{ {name:'Jack', age: 21} | json}}
5、字符串，对象截取：
{{ "i love tank" | limitTo:6 }}//结果：i love
{{ "i love tank" | limitTo:-4 }}//结果：tank
{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | limitTo:1 }}//结果：[{"age":20,"id":10,"name":"iphone"}]
6、大小写转换：
China has joined the {{ "wto" | uppercase }}.
We all need {{ "MONEY" | lowercase }}.
7、数值类：
{{ 1.234567 | number:1 }} //结果：1.2
{{ 1234567 | number }} //结果：1,234,567
9、当然，我们还可以自定义filter方法。
3.常见问题
如何使用angular中constant和$filter
4.解决方案
5.编码实战
html:
1.格式化货币：
2、格式化日期：
3、过滤数组：
4、将对象格式化成标准的JSON格式：
5、字符串，对象截取：
6、大小写转换：
7、数值类：
8、对象排序：
9、自定义：
app.js:
angular.module('myApp',[])
.controller('personCtrl',function($scope){
$scope.arr = [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ]
})
.filter('fMes',function(con){
return function(input,field,str){
if(input >= 0){//input != undefined &&
var name;
var aMes = con[field];
angular.forEach(aMes,function(data){
if(data[str] == input){
name = data.name;
}
})
return name;
}else{console.log('false');}
}
})
.filter('provinceFilter', function (PROVINCE) {//省
return function (id) {
if (id != undefined && id != '') {
var name;
angular.forEach(PROVINCE, function (data) {
if (data.ProID == id) {
name = data.ProName;
}
});
return name;
}
}
})
angular.module("myApp")
.value('val',{
})
//公司编辑常量组
.constant('con', {
//公司人数
companyPop:[
{type: 0, name: '1-10人'},
{type: 1, name: '10-20人'},
{type: 2, name: '30-50人'},
{type: 3, name: '50-100人'},
{type: 4, name: '100-200人'},
{type: 5, name: '200-500人'},
{type: 6, name: '500-1000人'},
{type: 7, name: '1000人以上'}
],
//公司行业
//团队规模：
workGroupScale:[
{type: 0, name: '1-10人'},
{type: 1, name: '10-20人'},
{type: 2, name: '30-50人'},
{type: 3, name: '50-100人'},
{type: 4, name: '100人以上'},
],
workFinanceRound:[
{type:0, name: '无需融资'},
{type:1, name: '天使轮'},
{type:2, name: 'A轮'},
{type:3, name: 'B轮'},
{type:4, name: 'C轮'},
{type:5, name: 'D轮及以上'},
{type:6, name: '上市公司'}
]
})
6.扩展思考
7.参考文献
8.更多讨论
感谢观看
BY : 梁家健| 陈中彬|李仁
返回列表
评论