发表于: 2017-02-22 23:19:09

1 1209


今天完成的事情:

1、完成了【找职位-公司搜索】搜索框的html部分;

2、完成了【找职位-公司搜索】轮播的手动和自动切换效果;

3、学习angular关于自定义指令方面的知识,并拓展学习了ng-include和ng-template;

4、听邓杰仁讲css关于position定位方面的知识。

明天计划的事情:

1、写【找职位-公司搜索】搜索框的js部分;

2、写【找职位-公司搜索】侧边栏部分的静态页面和js部分;

3、继续学习、研究成都之星李绍博的萝卜多项目的代码;

遇到的问题:

获取数据的时候出了问题。第一是接口给的有点儿问题,获取banner图片本来是:a/article/search,但接口文档给的是:a/article。第二是用postman测了,能够成功获取数据,但是就是无法通过浏览器来获取数据。经胡思豪提醒,才明白原来是nginx配置错了。错的原因有点儿隐蔽,不是路径和接口有问题,是#proxy这部分出来问题。

把红色方框的内容删除就可以了。

收获:

1、学习李绍博的萝卜多项目代码,大概了解了如何把项目的代码;

2、学习ng-include、ng-template和angular自定义指令的收获如下:

ng-template封装html片段在一个html文件里,ng-include用于提取该html的部分代码。
ng-template用法:
<script type="text/ng-template" id="html_part.html">
  <!-- HTML片段的实际内容 -->
</script>
注:一个id表示一个片段的名字,ng-include使用相同的id名,就可以引用该片段
ng-include用法:
  1. <!--  'view/part.html' 外部有单引号 -->
  2. <div ng-include="'views/part.html'"></div>
  3. <!-- 假设$scope中有template:{url:"http://..."}这个对象 -->
  4. <div ng-include="template.url"></div>
  5. <div ng-include="getUrl()"></div>
与之相对应的是使用directive来封装部分html的方法:
js部分:
  1. var App = angular.module("App", []);
  2. App.directive("formDirective", function () {
  3.     return {
  4.         restrict: "A",
  5.         scope: {
  6.         },
  7.         templateUrl:"part.html"
  8.     }
  9. });
  10. App.controller("FirstCtrl", function ($scope) {
  11. });
html部分:
  1. <div ng-controller="FirstCtrl">
  2.     <div form-directive></div>
  3. </div>
因此,我们看到,自定义指令的template和ng-template很相似,而自定义指令的templateUrl和ng-include很相似。前者完成代码的封装,后者用于引用代码。



返回列表 返回列表
评论

    分享到