今天主要的工作是完成任务7，开始预习任务8，首先整理一下js任务7的思路

1. 配置路由，控制器和懒加载

.state("home", {
    url:"/home",
    templateUrl: "view/home.html",
    controller:'homeCtrl',
    resolve: {
        loadFile: ['$ocLazyLoad', function ($ocLazyLoad) {
            return $ocLazyLoad.load([
                'css/bootstrap.min.css',
                'css/home.css',
                'js/home.js'
            ])
        }]
    }
})

登录之后页面默认跳转到home页，引入控制器homeCtrl，懒加载对应js和css文件

2. 完成对应静态页面

这个部分不多做整理了，做不出的样式用开发者工具多调试一下

收了一个在线矢量图网址http://www.fontawesome.com.cn/，很多小图标不用再截图了，直接用代码就可以体现

3. ng-repeat实现列表项的动态加载

这个是本次任务的重点，最开始的思路是错的，实际上本次任务需要的是从后台得到所需的表格内容，然后再动态显示出来

首先还是通过$http传参从后台抓取数据，路径等参考js6-10任务资源，当连接出错的时候，弹窗提示

angular.module("theApp",[])
    .controller('homeCtrl',function ($scope,$http) {
        $http({
            method: "get",
            url: "/a/a/article/search"
        }).then (function success(response) {
            $scope.upperForm = response.data.data.articleList
        }, function error(response) {
            alert("连接出错")
        });
})

接下来完成表格动态生成的代码

<tr ng-repeat="msg in upperForm">
    <td>{{msg.id}}</td>
    <td>{{msg.name}}</td>
    <td>{{msg.type | typeFliter}}</td>
    <td>{{msg.createAt | date:"yyyy/dd/mm HH:mm:ss"}}</td>
    <td>{{msg.updateAt | date:"yyyy/dd/mm HH:mm:ss"}}</td>
    <td>{{msg.author}}</td>
    <td>{{msg.state}}</td>
    <td>{{msg.status | statusFilter}}</td>
</tr>

根据任务资源中给出的名称，通过msg.名称的方式将数组内容动态加载出来

 但是实际加载出来的是数组中的原始数据，很多部分需要用过滤器进行格式以及内容的转换

过滤器的格式是ng-repeat后加“| 过滤器”，可以进行自定义

时间过滤器是最基本的“| date:"yyyy/dd/mm HH:mm:ss”

接下来是自定义过滤器

.filter('typeFliter',function () {
    var typeAll = ["首页banner","找职位banner","找精英banner","行业大图"];
    return function (type) {
        return type = typeAll[type];
    }
})

给过滤器自定义命名，将需要过滤的内容定义为数组，将对应内容过滤出来并返回

明天的计划是进行任务8