发表于： 2017-07-05 23:18:58
5 949
今天做了的事：拉了一天，很虚弱，我觉得这次一定瘦了。
明天要做的事：因为今天白天一直躺尸和上厕所，所以并没有进度。所以任务十还剩下立即上线，存为草稿，下线，编辑和删除（包括有几个点，如何让按钮在表单不全的时候禁用，如何使用模态框，如何点击分页后让搜索部分的限制不被重置，如何使用二级联动）。
上述内容准备明天后天两天做完。然后周六周日准备做这几件事：
学习一下自定义指令，把分页，搜索和图片上传三个地方封装成指令。
学习一下三种service，然后把controller里面磨磨唧唧的东西放到factory或者service里面。
学习一下$q，不过这个我估计明后天就要用了可能。
学习url传参，看看能不能用在任务八里面。
在做这四件事的同时，开始做ppt和思考一下方案
今天遇到的问题：
如何才能不拉
截至刚刚提交日报修改的时候，我发现白天丢到洗衣机里面的衣服忘了拿出来，被洗衣机捂出一股味儿。。。只能再洗一次了。所以不是我搞事情啊，，如果明天我衣服干了我就按时到，哎。。
由于今天没有干活，所以趁着现在夜色凉爽，我把剩下的6~8的任务总结一下，也算是让金超师兄给我的总结任务这个活计有始有终。
感悟：“不上班你养我啊” “我养你啊”
前言：任务6~8其实也没有太多东西，主要是提交数据。顺带熟悉安哥拉的各种自带指令啊，零零碎碎的小知识啊，并且使用这些知识后，再次进行提交数据，总之就是各种提交数据
由于任务六是安哥拉的开始使用，并使用ngRoute完成路由，后面改用了性能更好的ui-rooter，所以次处就不再介绍ngRoute了，接下来我们会依次回顾：
如何使用安哥拉
ui-rooter
安哥拉自带指令
第六集 远行客
MVC三层架构
Model(模型)：应用程序中用于处理数据的部分。(保存或修改数据到数据库、变量等)。安哥拉中的Model特指的是：数据
View(视图)：用户看到的用于显示数据的页面；
Controller(控制器)：应用程序中处理用户交互的部分。负责从视图读取数据，控制用户输入，并向模型发送数据。
这里理解的一点也不好，前些天我想要把controller里面封进factory时候，帅哥跟我说这样一句话，controller里面只放控制交互的地方，判断和dom操作之类的东西放到服务里面。还是没有头绪，什么东西是要放在controller里面的，什么东西是不能放在controller里面的。这里等做完任务10整理代码时候在思考。
用户从视图层发出请求，controller接收到请求后转发给对应的model处理，model处理完成后返回结果给controller，并在view层反馈给用户。
安哥拉的使用
首先按照惯例，我们每次使用一个新的框架或者插件，都需要引用写定的js文件。此处需要注意的是，由于安哥拉对于勾圈有所需求，所以引入安格拉的时候需要在引入勾圈之后。
但是在就算是在页面引入了安格拉的文件也不是整个页面都归你管辖了。所以涉及到了第一个自带指令ng-app，此指令用来声明Angular所管辖的区域。一般写在body或html上，原则上一个页面只有一个。
<body ng-app="wifeBackstage">
于此对应的，我们需要在项目的总js文件定义安格拉的模块
angular.module('wifeBackstage',['ui.router'])
两者对应可以看出wifeBackstage作为安格拉模块的名字将两者联系起来，方括号里面是依赖列表，也就是可以被注入到模块中的对象列表。
我们使用安哥拉的指令的时候一般都要在controller里面使用，所以我们要在安哥拉模块上定义controller。
<div class="g-rt" ng-controller="list">
.controller('list',function ($scope,$http,item)
创建一个控制器Controller，需要传递两个参数
① Controller名称，即ng-controller需绑定的名称。
② Controller的构造函数：构造函数可以传入多个参数，包括scope，http以及各种系统内置服务
ui-rooter的使用
与引用安哥拉类似，我们想要使用ui-rooter需要引用ui-rooter的js文件。而且由于ui-rooter依赖于安哥拉，所以这个文件需要在安哥拉文件之后引入。
ui-rooter基于的是操作状态而非仅url，当在ui-router中处理路由和状态时，开发者的重心是当前的状态是什么以及在哪一个页面里。
和ngRoute类似，为特定状态指定的模板将会放在
<div ui-view=""></div>
元素中。在这些模板中也可以包含自己的ui-view,这就是在同一个路由下实现嵌套视图的方法。
路由重定向 $urlRouterProvider
$urlRouterProvider.otherwise("/");
如果输入了不存在的状态就定位到此处。
状态配置 $stateProvider
要定义一个路由，与传统的方法相同：使用.config方式，但使用的不是routeProvider而是stateProvider。
$stateProvider
.state('articlelist', {
url: "/articlelist",
templateUrl: '../views/articlelist.html'
})
上述代码在设置对象上定义了一个叫articlelist的状态。
url选项将会为该应用的状态指定一个url基于用户浏览该应用所在的状态。这样当在浏览该应用的时候便能实现深度链接的效果。
此处当用户浏览到/articlelist时，该应用将状态改为articlelist同时向主ui-view元素中插入templateUrl处定义链接的内容。
ui-view十分强大，还有嵌套路由等其他用法，这里没涉及到就不多说了。
安哥拉自带指令
ng-model
把元素值（比如输入域的值）绑定到应用程序的变量中
<input type="date" placeholder="开始" ng-model="timeBgn">
在这个例子中，我们可以用scope.timeBgn在控制器里进行数据操作。
ng-bind
把应用程序变量中的数据绑定到 html视图中。可用表达式{{ }}替代。
跟上一指令结合起来，若我们想在一P标签里将上例输入框输入的数据显示出来，那我们可以
<p ng-bind="timeBgn"></p>
也可以
<p>{{timeBgn}}</p>
{{}}用来绑定表达式，可以包含文字、运算符和变量。但表达式在网页加载瞬间会看到{{}}。
ng-repeat
ng-repeat跟ng-options很像，都有一写表达语句来控制渲染的规则，不过ng-repeat的更简单：
x in records
(key, value) in myObj
x in records track by $id(x)
ng-repeat指令生明在需要循环内容的元素上，items和控制器上的变量名对应，item是为数组中单个对象起的别名。index可以返回当前引用对象的序号，从0开始，另外还有first、middle、last可以返回布尔值，用于告诉你当前元素是否是集合中的第一个中间的最后一个元素。
<tr ng-repeat="item in data">
<th><b>{{item.id}}</b></th>
<th><b>{{item.title}}</b></th>
<th><b>{{item.type|typeChange}}</b></th>
<th><b>{{item.createAt|date:"yyyy-MM-dd HH:mm:ss"}}</b></th>
<th><b>{{item.updateAt|date:"yyyy-MM-dd HH:mm:ss"}}</b></th>
<th><b>{{item.author}}</b></th>
<th><b>{{item.status|statusChange}}</b></th>
<th><b>{{item.order}}</b></th>
</tr>
下面是几个dom操作类的指令，不给看代码了>.<
ng-disabled=”true/false” 当传入true时，控件禁用。传入false是，启用；
ng-show 默认隐藏 传入true时显示；
ng-hide 默认显示 传入true是隐藏；
ng-click 定义了AngularJS中的点击事件。
filter
安哥拉过滤器可以使用一个管道字符（|）添加到表达式和指令中。
系统内置过滤器：
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
例：
<th><b>{{item.createAt|date:"yyyy-MM-dd HH:mm:ss"}}</b></th>
也可以使用自定义过滤器：
实际上就是将过滤的一一对应关系通过判断事先写好，然后用管道符号添加到表达式中
例：
.filter("typeChange",function () {
return function (inputData) {
var changed = "";
switch (inputData){
case 0:
changed = "首页banner";
break;
case 1:
changed = "找职位banner";
break;
case 2:
changed = "找精英banner";
break;
case 3:
changed = "行业大图";
break;
}
return changed;
}
<th><b>{{item.type|typeChange}}</b></th>
这样的话应该是没有什么盲点了，有就当我忘了。
返回列表
评论