今天完成的事情：

1.看了看聚金融的需求文档

2.从svn下了前端的静态文件

3.发现看不懂，学了一天AngularJS1

AngularJS 通过被称为 指令 的新属性来扩展 HTML。 

AngularJS 通过内置的指令来为应用添加功能。 

AngularJS 允许你自定义指令。

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-

ng-app

指令初始化一个 AngularJS 应用程序。，标记AngularJs的范围，这个范围内AngularJs可以识别。一般放在html标签里，整个html一个就好，多了也只是第一个有作用，值一般不要为空。

这里写图片描述

ng-init

指令初始化应用程序数据，基本写法就是ng-init=”xxx=’xxx’”，有多个元素的时候，以”;”间隔

<div ng-init="name='HAHA';age='100'">

  <p>姓名：{{name}}，年龄：{{age}}</p>

  <!--显示:姓名：HAHA，年龄：100-->

</div>

ng-model

指令把元素值（比如输入域的值）绑定到应用程序。

<div ng-init="name='HAHA';age='100'">

  <p>姓名：{{name}}，年龄：{{age}}</p>

  <input ng-model="name"></input>

</div>

这里写图片描述

ng-bind

这个指令也是用来绑定数据。

<div ng-init="name='HAHHA'">

  <p ng-bind="name"></p>

</div>

ng-model是用于表单元素的，支持双向绑定。对普通元素无效； 

ng-bind用于普通元素，不能用于表单元素 

当ng-bind和{{}}同时使用时，ng-bind绑定的值覆盖该元素的内容。

<div ng-init="name='HAHHA';age='122'">

  <p ng-bind="age">{{name}}</p>

</div>

这个最后只会显示122

ng-repeat

指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。看一下列子。 

这里写图片描述 

从图上可以看出，是创建了2个ul,然后数据显示在li上，可以加个背景颜色看一下 

这里写图片描述

html:

<div ng-controller="MainController">

  <ul ng-repeat="m in emails">

    <li>{{$index+1}}:</li>

    <li>{{m.id}}</li>

    <li>{{m.name}}</li>

    <li>{{m.message}}</li>

  </ul>

</div>

js

 //邮件

  var messages=[{

    id:100,

    name:"哈哈哈",

    message:"今天星期五啊，明天不上班。"

  },{

    id:300,

    name:"猪八戒",

    message:"约了师兄逛公园"

  }];

  app.controller('MainController',function($scope){

    console.log(messages);

    $scope.emails =messages;

  });

自定义指令

  app.directive('myDirective',function(){

    return{

      template:"<p>这是一个自定义指令</p>"

    }

  });

使用的时候可以这样的使用，会输出 这是一个自定义指令

<my-directive></my-directive>

有关指令的使用有多种方法，具体通过restrict 的值来判断

 app.directive('myDirective',function(){

    return{

      restrict : "E",//元素名使用

      template:"<p>这是一个自定义指令</p>"

    }

  });

1.作为元素名使用

 restrict : "E",//元素名使用

<my-directive></my-directive>

2.作为属性使用

 restrict : "A",//属性使用

<div my-directive></div>

3.作为类名使用

 restrict : "C",//类名使用

<div class="my-directive"></div>

4.作为注释使用

 restrict : "M",//作为注释名使用

  replace : true//这个要加上否则注释使用没效果

<!-- directive:my-directive -->

明天计划的事情：继续看AngularJS，看懂前端代码大概的一个逻辑，方便以后改代码

遇到的问题：一堆问题，前端框架，单页面令人窒息 

收获：慢慢等人吧，一个人不好做