今天师姐让我讲一下如何看懂项目代码

如何读懂官网的代码

项目结构

js部分

• config

整个angular项目的配置文件，主要由2个函数组成，config和run，config用来配置$http请求默认请求头,编码格式这些。run方法用来定义全局变量和方法，如自定义的模态框alert方法，验证用户是否登录。

• route

基本的路由配置，不再详细介绍。

• constant

常量文件，比如上架下架，日报等级，职业分类这些常量都放在这个js文件

• vendor

插件文件夹，用来存放angular-strap，bootstrap等插件代码

• filter

angular自定义过滤器文件

• factory

存放一些公告方法，比如时间戳处理，判断对象是不是空

• service（划重点）

该文件夹下一般有2个文件，projectService和ajaxAddress。 一个http请求如何将地址和请求抽象出来？ 传统写法：

$http({

  method: 'PUT',

  url:  '/carrots-admin-ajax/a/u/article/status',

    headers: {'Content-Type': 'application/x-www-form-urlencoded'},

  withCredentials: true,

  data: $.param({'id':$scope.id,'status':$scope.status})

                                        // data: $scope.vm.artParams

  }).then(function successCallback(res) {);

第一步： 使用$http.put代替$http，将header设置成默认值

$http.put(

   '/carrots-admin-ajax/a/u/article/status',

  {params:{'id':$scope.id,'status':$scope.status}})

  .then(function successCallback(res) {);

第二步：将url放到一个函数中，以函数的形式返回，数据放到对象中。

getStatusPath(){

    return '/carrots-admin-ajax/a/u/article/status'

}

var params={'id':$scope.id,'status':$scope.status}

$http.put(getStatusPath(),{params:params})

第三步：将整个put请求进行封装

var changeArticleStatus:function(params){

    return $http.put(getStatusPath(),{params:params})

}

changeArticleStatus();

• directives

自定义指令，公司已经封装好了一些毕竟常用而且方便的指令，比如分页，只能输入数字的输入框。平时可以多学习一下。

• controller

控制器文件夹，不再详细介绍。

如何快速的找到当前页面对应的js和html文件

根据url找到路由的名字，比如url是http://www.jnshu.com/school/7317/daily，那么我们打开route.js文件，crtl+f搜索daily即可。

官网html结构

首页