慕课网懒懒交流会AngularJs专场学习笔记

1、Angular表单验证
原理：
form.$valid($invalid,$pristine,$dirty)
form.inputname.$valid
提出的问题：同时编辑多组用户的信息输入，要求：各用户之间的错误信息互不影响。
解决办法一：ng-form，隔离每个ng-show的作用域。
解决办法二：黑科技addControl
坑：因为angular变量名不支持表达式，所以不同的变量名不会被注册到scope中，所以要手动注册。
解决的问题，angular支持的内部表单实现ng-show错误信息隔离处理。
Angular表单验证的不足：

需要在HTML中编写处理错误的DOM
大量相似的错误展示逻辑
错误信息出现的位置与方式
对键盘的支持不好
缺少常用的验证组件

其他的小知识点：ng-class为表单添加bootstrap的has-error类，简单处理错误信息显示颜色。

（二）基于公共组件的开发心得
Angular是重型的航空母舰，backbone
service、路由、模板双重绑定、指令很多地方都替你考虑到了，在使用angular时着重点放在理解angular的思维方式上。
Angular UI Bootstrap
$route组织路由根据url，不方便。
ui-router是ui组件下的。
五个值：
abstract
resolve子状态处理
url
bindonce：多个值进行绑定，超过2000个性能会变低，cpu在转。ng-repeat带来的性能问题。bo-text，把不需要绑定的元素去掉。

sanitize，$sce支持，过滤html
animate
growl，简单的消息提醒
base64
translate,多语言支持
cookie
html2js将html打包成js文件。
为什么用ui-bootstrap，丰富的组件，官方支持，基于bootstrap。
ui-bootstrap存在的问题：
popover，小的弹窗，不能自定义模板，不支持鼠标hover在弹出的窗体上。
decorator，发现组件不好用，装饰器，

app.config(function($provide){
  $provide.decorator('fooDirective',function($delegate){
    var directive = $delegate[0];
    directive.scope.fn = "&";
    var link = directive.link;
    directive.compile = function(){
      return function(scope,element,attrs){
        link.apply(this,arguments);
        element.bind('click',function(){
          scope.$apply(function(){
            scope.fn();
          });
        })
      }
    }
    return $delegate;
  });
});

方法并不完美，运行的时候才执行，会带来性能的损耗。
更好的方法，写出更好的代码，遵循一些常用的设计模式，这样别人才能在我们的基础上进行扩展。
一些重要的service
Dialog，简单的例子，阿里云的dialog。
公共的service服务，利用config灵活定制dialog配置。

app.provider('aliyunDialogConfig',function(){
  var defaultConfig = {
    defaultButtonConfig : [
      {result:true,label:'确定'，cssClass:'btn-primary'},
      {result:false,label:'取消'，cssClass:'btn-default'}
    ]
  };
  return {
    setButtonLabels:function(labels){       angular.forEach(defaultConfig.defaultButtonConfig,function(item,index){
      item.label = labels[index];
      });
    },
    setProviderOptions:function(options){
      angular.extend(defaultConfig,options);
    },
    $get:function(){
      return defaultConfig;
    }
  }
});

真正在执行的时候，取得一些配置，去执行ui-bootstraps提供的modalService。

var showDialog = function(dialogOptions){
  var defaultOptions = {
    backdrop: 'static'
  };
  var options = angular.extends({},defaultOptions,dislogOptions)
  var dialogInstance = $modal.open(options);
  return dialogInstance;
}

$http
aliyunConsoleSettingProvider:
* 配置拦截url的函数
* 配置注入options的参数，例如为post请求自动注入token。
* 配置sessionTimeout的开关
* 配置sessionTimeout重新登录的loginUrl
包装$http服务，依赖于SettingProvider
*get 请求默认添加timer阻止缓存
*sessionTimeout异常拦截
*通过successMessage可以自动弹出growl message提醒用户操作成功
*通过ignoreErrorHandle避免弹出错误信息对话框
*通过注入SessionTimeout的key决定什么情况下提醒用户操作超时
前后端分离实践，模板在前端、路由在前端，json就成为和后端交流的途径，对发送请求的地方进行包装。
“`
databaseMigration:function(options){
options.method = ‘POST’;
options.successMessage = ‘请稍后’;
return sendRequest(‘/db/migrate_db.json’,options);
//(promise对象)，请求出错时不做任何处理
}
最后讲了他们封装的directive。（然并卵）。
最最后还讲了他们的开发方式。（使用provider，将参数暴露出来）。
（三）Animate
ng-animate的基本原理

angular通过介入元素的创建与销毁、显示与隐藏，在中间过程多次改变dom元素的class状态，如此，定义一个动画只需要按照规则写对应的CSS即可，也就是angular替我们做了改变dom的class状态的工作。

基本指令	class	说明
ng-if,ngView,ngInclude,ngSwitch	ng-enter,ngleave	元素与创建销毁
ng-repeat	ng-move	两个列表循环交叉
ng-repeat	ng-enter-stagger	transition-delay,transtion-duration控制延迟

animate暂停！

总的来说，讲了一下如何优美的山寨别人代码（decorator），再就是普及了一下provider。
第一个视频半天讲了个ng-form。
第二个视频讲了decorate和provider。
不过讲明白一个知识点也不容易啊。
后面几集明天再看。