发表于： 2016-07-25 23:12:59
0 1970
今天完成的事情：根据中奖统计接口文档，修改假数据和中奖统计模块。
明天计划的事情：修改打磨我负责的中奖统计和渠道统计模块。看看其它别人的模块。接口通了，调接口。
遇到的问题：暂无
收获：
一.楼上的东北哥们问问我项目主页咋写的。我就学习啦一波给他讲啦啦。
在index引入项目必要的js和css文件，和定义angularjs的作用域
<div>
<div ng-app="admin">
<div ui-view></div>
</div>
</div>
<div ng-app="admin">
<div ui-view></div>
</div>
</div>
利用ui-router
.state('field', {
url: '',
templateUrl: 'views/main.html',
controller: 'MainController',
controllerAs: 'vm',
//abstract: true, // true 表明此状态不能被显性激活，只能被子状态隐性激活
resolve: {
loadMyFile: _lazyLoad([
'js/controllers/admin/mainController.js',
'js/directives/ptteng-sidebar/ptteng-sidebar-0.0.1.js',
'js/directives/searchParams/search-params.js',
'js/directives/ptteng-user/ptteng-user-0.0.1.js',
'js/directives/ptteng-paging/pagination.js'
])
}
})
url: '',
templateUrl: 'views/main.html',
controller: 'MainController',
controllerAs: 'vm',
//abstract: true, // true 表明此状态不能被显性激活，只能被子状态隐性激活
resolve: {
loadMyFile: _lazyLoad([
'js/controllers/admin/mainController.js',
'js/directives/ptteng-sidebar/ptteng-sidebar-0.0.1.js',
'js/directives/searchParams/search-params.js',
'js/directives/ptteng-user/ptteng-user-0.0.1.js',
'js/directives/ptteng-paging/pagination.js'
])
}
})
插入main.html
而main.html有导航条和page-wrapper。
导航条利用指令sidebar写下拉菜单，在大于768px，为定宽250px。然后让page-wrapper的margin-left有250px。看着像侧边栏。。。
具体实现方式还没研究。。不过不是用的属性申明的方法，应该是js。
二.关于指令。。
angular.module('admin')
.directive('sidebar', function () {
return {
templateUrl: 'js/directives/ptteng-sidebar/ptteng-sidebar-0.0.1.html',
restrict: 'E',
replace: true,
scope: {},
controller: function ($scope, $rootScope, $state, $location, roleService, managerService, moduleService, recordCookies, commonUtil) {
.directive('sidebar', function () {
return {
templateUrl: 'js/directives/ptteng-sidebar/ptteng-sidebar-0.0.1.html',
restrict: 'E',
replace: true,
scope: {},
controller: function ($scope, $rootScope, $state, $location, roleService, managerService, moduleService, recordCookies, commonUtil) {
以sidebar指令为例：
restrict:描述里指令在模版的使用方式：（元素，样式，属性，注释。。）
而这里的’E’代表的是元素
templateUrl：描述的是加载模块要使用的url地址。。
replace：若为’true’则替代指令所在位置的元素，若为'false’则是追加。。
scope：为指令创建一个新的作用域。
controller：创建一个控制器。。官方说法是暴露一个api（为什么要用暴露这个词。。），利用这个api可以进行多个指令之间的通信
controller里面有许多方法，我还没看明白以后在补充。。
我们看看html文件
<div class="navbar-default sidebar ng-isolate-scope" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav in" id="side-menu" ng-model="collapseVar" role="tablist" aria-multiselectable="true" bs-collapse>
<li ui-sref-active="active" class="active">
<a href="#/dashboard"><i class="fa fa-home fa-fw"></i> 欢迎页</a>
</li>
<!--<li ng-repeat="side in sideList" ui-sref-active="active" class="active">-->
<!--<a href="#/{{side.url}}"><i class="fa fa-home fa-fw"></i> {{side.name}}</a>-->
<!--</li>-->
<li ng-class="{active: collapseVar==($index)}" ng-repeat="side in sideList">
<a href="" bs-collapse-toggle role="tab"><i class="fa {{side.icon}}"></i> {{side.name}}</a>
<ul class="nav nav-second-level" role="tabpanel" bs-collapse-target>
<li ui-sref-active="active" ng-repeat="n in side.nodes">
<a ng-if="n.url" ui-sref="{{n.url}}" ui-sref-opts="{inherit: false}"
ng-class="{'navActive': currentUrl ? currentUrl == n.url : n.selected}" ng-click="getUrl(n)">{{n.name}}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="sidebar-nav navbar-collapse">
<ul class="nav in" id="side-menu" ng-model="collapseVar" role="tablist" aria-multiselectable="true" bs-collapse>
<li ui-sref-active="active" class="active">
<a href="#/dashboard"><i class="fa fa-home fa-fw"></i> 欢迎页</a>
</li>
<!--<li ng-repeat="side in sideList" ui-sref-active="active" class="active">-->
<!--<a href="#/{{side.url}}"><i class="fa fa-home fa-fw"></i> {{side.name}}</a>-->
<!--</li>-->
<li ng-class="{active: collapseVar==($index)}" ng-repeat="side in sideList">
<a href="" bs-collapse-toggle role="tab"><i class="fa {{side.icon}}"></i> {{side.name}}</a>
<ul class="nav nav-second-level" role="tabpanel" bs-collapse-target>
<li ui-sref-active="active" ng-repeat="n in side.nodes">
<a ng-if="n.url" ui-sref="{{n.url}}" ui-sref-opts="{inherit: false}"
ng-class="{'navActive': currentUrl ? currentUrl == n.url : n.selected}" ng-click="getUrl(n)">{{n.name}}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
这个就是侧边栏（。。应该是下拉菜单）的部分。。
有关欢迎页部分是固定的。。
而下面的模块则是根据登录的人动态生成。
<li ng-class="{active: collapseVar==($index)}" ng-repeat="side in sideList">
在这个li里面的ul则是二级菜单的部分。。
好了。。大致我的理解就是这样。。
三.$http的3层封装
虽然task5和信贷的项目都写过，借这次机会详细写一下。。
1.传统的js的ajax交互方式。。和Angularjs的优势
获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应。
1.1新建实例，引用对象
variable=new XMLHttpRequest();
1.2向服务器发送请求。。
xmlhttp.open(method,url,async); ／／编写配置
xmlhttp.send(); ／／发送
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
注意，post操作的send方法要携带字符串
1.3读取响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
| 属性 | 描述 |
|---|---|
| responseText | 获得字符串形式的响应数据。 |
| responseXML | 获得 XML 形式的响应数据。 |
而angularjs一个链式操作一撸到底
$http.get("/a/students/")
.success(function(response) {$scope.names = response.data;});
.success(function(response) {$scope.names = response.data;});
方便快捷，帅
2.angularjs的$http的伪代码模块
$http({
method:'get’,//string
url:"/a/student/"+person, //string
data:person, //string or object
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
}, //object
params:{}, //object
timeout:1 //number
})
method:'get’,//string
url:"/a/student/"+person, //string
data:person, //string or object
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
}, //object
params:{}, //object
timeout:1 //number
})
config对象：
params:键名键值都是字符串的对象（为啥书上说params是一个map。。）。表示需要转换成url参数的键和值
e.g: [{ key1 : “value1” , key2 : “value2”}] 会被转换成
?key1=value1&key1=value2
data:请求参数
timeout:请求超时之前需要等待的毫秒数。
设置请求头：
header：
简便写法：
3.三层封装
channelListService.dayList(vm.params)
dayList: function (params) {
return $http.get(pathProject.dayList_url(),{params:params})
},
return $http.get(pathProject.dayList_url(),{params:params})
},
dayList_url: function () {
// return "ajax/a/channel/statstics/day/";
return "js/json/dayList.json"
},
// return "ajax/a/channel/statstics/day/";
return "js/json/dayList.json"
},
我的理解是请求方式，请求参数，url的3次分离。。方便修改。。
返回列表
评论