从学习angular，到实际项目开发不到一周，完全是边写边学呀，都是为了项目，已使用angular 开发了两个项目了，有些技术当时只是会用，都没好好回顾一下，现在有时间回顾一下，项目中用到的一些指令，服务，路由，filter 等，

一点点记录一来

  1. // 初始化
  2. angular.bootstrap(dom,['appName']);
  1. //html 转化
  2. // 需传参 $sce
  3. $scope.escape = function(html) {
  4.    return $sce.trustAsHtml(html);
  5. };
  6. // html
  7. <div ng-bind-html="escape(data)"></div>
  1. // http
  2. $http({
  3.      method:'get',  // post ....
  4.      url:'/Service/resume', // url
  5.      params: {id: uid}
  6. }).success(function(data){
  7.      console.log(data)
  8. })
  1. // filter
  2. .filter('getCity', function(){
  3.         return function(city){
  4.             return $.parseJSON(city).city;
  5.         }
  6. });
  7.  
  8. //html
  9. {{city | getCity}}
  1. //标签切换
  2. <span class="{{curShow=='register'?'current':''}}" ng-click="switchView('register')">个人注册</span>
  3. <span class="{{curShow=='login'?'current':''}}" ng-click="switchView('login')">个人登录</span>
  4. <div class="{{curShow!='register'?'hide':''}}">
  5.     // register
  6. </div>
  7. <div class="{{curShow!='login'?'hide':''}}">
  8.     //login
  9. </div>
  10. //初始化
  11. $scope.curShow = 'register';
  12. $scope.switchView = function(view) {
  13.     $scope.curShow = view;
  14. }
  15.  
  16. //ng-click="switchView('login')"
  1. <div class="jd">
  2.     <label " checked="checked" id="company">企业</label>
  3.     <label " id="personl">个人</label>
  4. </div>
  5.  
  6. //ｒａｄｉｏ　切换
  7. <div class="jd">
  8.    <div ng-show="isCheckboxSelected('1')">
  9.         <label for="leader"><input type="radio" name="guanxi" id="leader">主管</label>
  10.         <label for="hr"><input type="radio" name="guanxi" id="hr">HR</label>
  11.    </div>
  12.    <div ng-show="isCheckboxSelected('2')">
  13.         <label for="workmate"><input type="radio" name="guanxi" id="workmate">同事</label>
  14.         <label for="students"><input type="radio" name="guanxi" id="students">同学</label>
  15.         <label for="friend"><input type="radio" name="guanxi" id="friend">朋友</label>
  16.    </div>
  17. </div>
  18.  $scope.checkboxSelection = ';
  19. $scope.isCheckboxSelected = function(index) {
  20.     return index === $scope.checkboxSelection;
  21. };
  1. //　ｆａｃｔｏｒｙ
  2. var app = angular.module('factory',[]);
  3.         app.factory('testFactory', function () {
  4.            //   return {
  5.            //      lable: function(){
  6.            //          return  [
  7.                     //     {'id' : 1, 'name':'Ted', 'total': 5.996},
  8.                     //     {'id' : 2, 'name':'Michelle', 'total': 10.996},
  9.                     //     {'id' : 3, 'name':'Zend', 'total': 10.99},
  10.                     //     {'id' : 4, 'name':'Tina', 'total': 15.996}
  11.                     // ];
  12.            //      }
  13.            //  }
  14.  
  15.            // * edit new methods
  16.            var data = [
  17.                 {, 'name':'Ted', 'total': 5.996},
  18.                 {, 'name':'Michelle', 'total': 10.996},
  19.                 {, 'name':'Zend', 'total': 10.99},
  20.                 {, 'name':'Tina', 'total': 15.996}
  21.             ];
  22.            var factory = {};
  23.            factory.lable = function(){
  24.                 return data;
  25.            }
  26.            return factory;
  27.         });
  28.  
  29. app.controller('TestController',function($scope,testFactory){
  30.     $scope.customers = testFactory.lable();
  31.  })
  32. //　代码详见，ｇｉｔｈｕｂ
  33. //　https://github.com/llqfront/angular/tree/master/angular
  1. // service.js
  2. var app = angular.module('factory',[]);
  3. app.factory('testFactory', function ($http) {
  4.       var factory = {};
  5.       factory.lable = function(){
  6.          return $http.get('/js/test.json');
  7.       }
  8.        return factory;
  9. });
  10. // controller.js
  11. app.controller('TestController',function($scope,testFactory){
  12.     function init(){
  13.         testFactory.lable().success(function(data){
  14.             $scope.customers = data;
  15.             })
  16.     }
  17.     init();
  18. })
  1. //service、provider、factory写法
  2. var app = angular.module('appName', []);
  3.         app.service('testService',function(){
  4.              this.lable = 'this is service';
  5.         });
  6.         app.factory('testFactory', function () {
  7.              return{
  8.                 lable: function(){
  9.                 return 'this is factory';
  10.                 }
  11.             }
  12.         });
  13.         app.provider('testProvider', function(){
  14.             this.$get = function(){
  15.                 return 'this is provider';
  16.             }
  17.         });
  18.         <body ng-controller='outputCtrl'>
  19.             <p>{{ output1 }}</p>
  20.             <p>{{ output2 }}</p>
  21.             <p>{{ output3 }}</p>
  22.         </body>
  23.         var app = angular.module('appName');
  24.         app.controller('outputCtrl', function($scope,testService, testFactory, testProvider){
  25.             $scope.output1 = testService.lable;
  26.             $scope.output2 = testFactory.lable();
  27.             $scope.output3 = testProvider;
  28.         });
  1. require('lib/angular-route');//引入 route
  2. var app = angular.module('testApp',['ngRoute','factory','ctrl']);// ngRoute
  3.     app.config(function($routeProvider) {
  4.          $routeProvider.when('/', {
  5.              templateUrl: '/view/index.html',  // 模板路径
  6.              controller: 'TestController'   // 模板 中的 controller
  7.            })
  8.          .when('/book', {
  9.              templateUrl: '/view/book.html',
  10.              controller: 'BookController'
  11.            })
  12.          .when('/test', {
  13.              templateUrl: '/view/test.html',
  14.              controller: 'txController'
  15.            })
  16.          .otherwise({
  17.               redirectTo:'/'
  18.             });
  19.     });

今天呢在这增加一条，很多人看官网，或找资料，也包括我自己就是一个显示隐藏的功能怎么就实现不了呢

angular 显示 隐藏 ng-show ng-hide

笔者在这写几个例子你就会明白了，非repeat 内的 可以这样理解

  1. //html
  2. <p class="show-olive-btn" ng-click="showDetail(olive)">btn</p>
  3.     <div class="test" ng-show="olive.oliveDetail">
  4.         test
  5.     </div>
  1. // controller
  2. $scope.olive = {};
  3. $scope.showDetail = function(olive){
  4.     olive.oliveDetail = ! olive.oliveDetail;
  5. }
  1. // 测试代码  html
  2. {{olive}}<br/>
  3. {{olive.oliveDetail}}
  4. 当你放上这两行就可以看出
  5. 默认olive.oliveDetail 是没有值，也相当于默认为false
  6. 当点击时 值为true false 切换
  7. 相当于改变{"oliveDetail":false}{"oliveDetail":true}
  8. 试一下就能明白了

有人说，单个的好实现如果在repeat 中如何实现呀

笔者也写一个例子

  1. <tr ng-repeat="olive in customers | filter:searchText">
  2. <td>
  3.     <p class="show-olive-btn" ng-click="showDetail(olive)">btn</p>
  4.     {{olive}} <!-- {"id":1,"name":"Ted","total":5.996,"oliveDetail":true/false} -->
  5.     {{olive.oliveDetail}}<!-- true/false -->
  6.     <div class="test" ng-show="olive.oliveDetail">
  7.                         test
  8.     </div>
  9. </td>
  10. </tr>
  11. //controller 
  12.  
  13. $scope.showDetail = function(olive){
  14.     olive.oliveDetail = ! olive.oliveDetail;
  15. }

写法其实是一样的只是 这次的olive 变成了 ng-repeat="olive in customers" 中单项了

如果还不懂，写出来试一下就知道了

tack by $index

watch

...

待续....

angular 项目回顾的更多相关文章

  1. 个人从源码理解angular项目在JIT模式下的启动过程

    通常一个angular项目会有一个个模块(Module)来管理各自的业务,并且必须有一个根模块(AppModule)作为应用的入口模块,整个应用都围绕AppModule展开.可以这么说,AppModu ...

  2. 把angular项目整合到.net mvc中

    之前的开发选择的是完全舍弃服务端,仅保留最简单web服务器提供angular经打包的静态资源,此外所有的业务与数据请求都访问一个分离的WebApi来实现.不过最近碰到一个需求,有必要使用多个客户端,而 ...

  3. Angular20 nginx安装，angular项目部署

    1 nginx安装(Windows版本) 1.1 下载安装包 到官网下载Windows版本的nginx安装包 技巧01:下载好的压缩包解压即可,无需安装 1.2 启动nginx 进入到解压目录,点击 ...

  4. Angular4--提速--提升Angular项目的首页打开速度（包含微信登录优化）

    Angular项目的首页打开速度很慢,有时候会有几秒的加载时间.如果在手机端访问的话,怕是要等待十多秒,这对用户体验很差.下面参考http://www.cnblogs.com/feiyu159/p/8 ...

  5. Angular4---部署---将Angular项目部署到IIS上

    ---恢复内容开始--- Angular项目部署到一个IIS服务器上 1.安装URL rewrite组件: 网址:https://www.microsoft.com/en-us/download/de ...

  6. 网站开发进阶(二十一)Angular项目信息错位显示问题解决

    Angular项目信息错位显示问题解决 绪 最近在项目开发过程中遇到这样一个棘手的问题:查询出所有订单信息后,点击选择某一个订单,查询出的结果是上一次查询所得的结果.而且会出现点击两次才可以显示订单详 ...

  7. [转]Angular4---部署---将Angular项目部署到IIS上

    本文转自:https://www.cnblogs.com/kingkangstudy/p/7699710.html Angular项目部署到一个IIS服务器上 1.安装URL rewrite组件: 网 ...

  8. [转]Angular项目目录结构详解

    本文转自:https://blog.csdn.net/yuzhiqiang_1993/article/details/71191873 版权声明:本文为博主原创文章,转载请注明地址.如果文中有什么纰漏 ...

  9. angularjs探秘<三> 控制器controller及angular项目结构

    先来看一个例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&quo ...

随机推荐

  1. hadoop的压缩解压缩,reduce端join,map端join

    hadoop的压缩解压缩 hadoop对于常见的几种压缩算法对于我们的mapreduce都是内置支持,不需要我们关心.经过map之后,数据会产生输出经过shuffle,这个时候的shuffle过程特别 ...

  2. anaconda在linux下的安装注意事项

    不应该做什么 官网原文: Installation Instructions Linux Install These instructions explain how to install Anaco ...

  3. 从Search Sort到Join

    发表于<程序员>2015年4月B的一篇文章,在博客归档下.根据杂志社要求,在自己博客发表该文章亦须注明:本文为CSDN编译整理,未经允许不得转载,如需转载请联系market#csdn.ne ...

  4. 第二百九十八天 how can I 坚持

    晚上和同学一块吃了个饭,聊了好多. 晚上回来的路上,突然想起一句话,现在又忘了. 睡觉. 人生平淡也好,光彩也罢,只是一个历程,算了,睡觉.

  5. 第二百六十天 how can I 坚持

    晚上去看了个电影,<万万没想到>,挺好看的,豆瓣评分不高.网络啊. 互联网会让聪明的人越来越聪明. 明天去看寻龙诀了. 懒惰会生根发芽,哈哈. 睡觉了.

  6. 最大连续子数组问题2-homework-02

    1) 一维数组最大连续子数组 如第homework-01就是一维数组的最大子数组,而当其首位相接时,只需多考虑子数组穿过相接的那个数就行了! 2)二维数组 算法应该和第一次的相似,或者说是将二维转化为 ...

  7. java volatile进阶（一）

    本篇文章继续学习volatile.上篇文章简单的介绍了volatile和synchonized,这篇文章讲一下什么时候可以用volatile. 先看一段代码. package com.chzhao.v ...

  8. thymeleaf中的Literals

    Literals即为文字 一.Text literals:文本文字 文本文字只是字符串指定的单引号之间.他们可以包含任何字符,但你应避免任何单引号里面\ ' <p> Now you are ...

  9. UVA 624 - CD (01背包 + 打印物品)

    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  10. 159. Longest Substring with At Most Two Distinct Characters

    最后更新 二刷 08-Jan-17 回头看了下一刷的,用的map,应该是int[256]的意思,后面没仔细看cuz whatever I was doing at that time.. wasnt ...