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

一点点记录一来

// 初始化
angular.bootstrap(dom,['appName']);
//html 转化
// 需传参 $sce
$scope.escape = function(html) {
   return $sce.trustAsHtml(html);
};
// html
<div ng-bind-html="escape(data)"></div>
// http
$http({
     method:'get',  // post ....
     url:'/Service/resume', // url
     params: {id: uid}
}).success(function(data){
     console.log(data)
})
// filter
.filter('getCity', function(){
        return function(city){
            return $.parseJSON(city).city;
        }
});

//html
{{city | getCity}}
//标签切换
<span class="{{curShow=='register'?'current':''}}" ng-click="switchView('register')">个人注册</span>
<span class="{{curShow=='login'?'current':''}}" ng-click="switchView('login')">个人登录</span>
<div class="{{curShow!='register'?'hide':''}}">
    // register
</div>
<div class="{{curShow!='login'?'hide':''}}">
    //login
</div>
//初始化
$scope.curShow = 'register';
$scope.switchView = function(view) {
    $scope.curShow = view;
}

//ng-click="switchView('login')"
<div class="jd">
    <label " checked="checked" id="company">企业</label>
    <label " id="personl">个人</label>
</div>

//ｒａｄｉｏ　切换
<div class="jd">
   <div ng-show="isCheckboxSelected('1')">
        <label for="leader"><input type="radio" name="guanxi" id="leader">主管</label>
        <label for="hr"><input type="radio" name="guanxi" id="hr">HR</label>
   </div>
   <div ng-show="isCheckboxSelected('2')">
        <label for="workmate"><input type="radio" name="guanxi" id="workmate">同事</label>
        <label for="students"><input type="radio" name="guanxi" id="students">同学</label>
        <label for="friend"><input type="radio" name="guanxi" id="friend">朋友</label>
   </div>
</div>
 $scope.checkboxSelection = ';
$scope.isCheckboxSelected = function(index) {
    return index === $scope.checkboxSelection;
};
//　ｆａｃｔｏｒｙ
var app = angular.module('factory',[]);
        app.factory('testFactory', function () {
           //   return {
           //      lable: function(){
           //          return  [
                    //     {'id' : 1, 'name':'Ted', 'total': 5.996},
                    //     {'id' : 2, 'name':'Michelle', 'total': 10.996},
                    //     {'id' : 3, 'name':'Zend', 'total': 10.99},
                    //     {'id' : 4, 'name':'Tina', 'total': 15.996}
                    // ];
           //      }
           //  }

           // * edit new methods
           var data = [
                {, 'name':'Ted', 'total': 5.996},
                {, 'name':'Michelle', 'total': 10.996},
                {, 'name':'Zend', 'total': 10.99},
                {, 'name':'Tina', 'total': 15.996}
            ];
           var factory = {};
           factory.lable = function(){
                return data;
           }
           return factory;
        });

app.controller('TestController',function($scope,testFactory){
    $scope.customers = testFactory.lable();
 })
//　代码详见，ｇｉｔｈｕｂ
//　https://github.com/llqfront/angular/tree/master/angular
// service.js
var app = angular.module('factory',[]);
app.factory('testFactory', function ($http) {
      var factory = {};
      factory.lable = function(){
         return $http.get('/js/test.json');
      }
       return factory;
});
// controller.js
app.controller('TestController',function($scope,testFactory){
    function init(){
        testFactory.lable().success(function(data){
            $scope.customers = data;
            })
    }
    init();
})
//service、provider、factory写法
var app = angular.module('appName', []);
        app.service('testService',function(){
             this.lable = 'this is service';
        });
        app.factory('testFactory', function () {
             return{
                lable: function(){
                return 'this is factory';
                }
            }
        });
        app.provider('testProvider', function(){
            this.$get = function(){
                return 'this is provider';
            }
        });
        <body ng-controller='outputCtrl'>
            <p>{{ output1 }}</p>
            <p>{{ output2 }}</p>
            <p>{{ output3 }}</p>
        </body>
        var app = angular.module('appName');
        app.controller('outputCtrl', function($scope,testService, testFactory, testProvider){
            $scope.output1 = testService.lable;
            $scope.output2 = testFactory.lable();
            $scope.output3 = testProvider;
        });
require('lib/angular-route');//引入 route
var app = angular.module('testApp',['ngRoute','factory','ctrl']);// ngRoute
    app.config(function($routeProvider) {
         $routeProvider.when('/', {
             templateUrl: '/view/index.html',  // 模板路径
             controller: 'TestController'   // 模板 中的 controller
           })
         .when('/book', {
             templateUrl: '/view/book.html',
             controller: 'BookController'
           })
         .when('/test', {
             templateUrl: '/view/test.html',
             controller: 'txController'
           })
         .otherwise({
              redirectTo:'/'
            });
    });

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

angular 显示 隐藏 ng-show ng-hide

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

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

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

笔者也写一个例子

<tr ng-repeat="olive in customers | filter:searchText">
<td>
    <p class="show-olive-btn" ng-click="showDetail(olive)">btn</p>
    {{olive}} <!-- {"id":1,"name":"Ted","total":5.996,"oliveDetail":true/false} -->
    {{olive.oliveDetail}}<!-- true/false -->
    <div class="test" ng-show="olive.oliveDetail">
                        test
    </div>
</td>
</tr>
//controller 

$scope.showDetail = function(olive){
    olive.oliveDetail = ! olive.oliveDetail;
}

写法其实是一样的只是 这次的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. 更换Oracle备份数据文件

    应用背景:需要查看和修改一下Interlib中的数据,所以要反复的将备份数据进行导入和清空.整理一下步骤 删除tablespace drop tablespace interlib including ...

  2. Spark生态之Spark Core

  3. source insight 支持CC 文件

    今天开始阅读LevelDB的代码,用source insight建立工程,但其不支持cc后缀的C++文件. 找到这篇<source insight看cc文件> 解决的根本办法:Option ...

  4. Java常用命令行工具

    命令基于Sun JDK,用于监控和诊断HotSpot的java 虚拟机. 对应的可执行文件位于$JAVA_HOME/bin/下 jps-虚拟机进程状况工具 选项 作用 -q 只输出LVMID,同进程p ...

  5. Oracle的回收站和闪回查询机制(一)

    实际工作中,我们经常会遇到一些情况,误删除某些表或某些表的某些记录,这时候就需要我们将这些记录重新插入进去.如何才能解决这个问题呢? Oracle的Flashback query(闪回查询)为我们解决 ...

  6. UIImageView旋转任意角度

    -(UIImageView *) makeRotation:(UIImageView *)image speedX:(float)X speedY:(float)Y { //    头文件中需要定义  ...

  7. 关于mysql_fetch_****

    今天调试如下代码: mysql_select_db('content',$link);//选择数据库 mysql_query("set names utf8");//设置编码格式 ...

  8. AngularJS~大话开篇

    AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入.等等. 前端 ...

  9. 剑指OFFER之变态跳台阶（九度OJ1389）

    题目描述: 一只青蛙一次可以跳上1级台阶,也可以跳上2级……它也可以跳上n级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 输入: 输入可能包含多个测试样例,对于每个测试案例, 输入包括一个整数n(1 ...

  10. C#IEnumerator.MoveNext 方法 ()

    将枚举数推进到集合的下一个元素. 命名空间:   System.Collections程序集:  mscorlib(mscorlib.dll 中) 语法: bool MoveNext() 返回值 Ty ...