慎用ng-repeat 中的 $index

http://web.jobbole.com/82470/

服务provider，公共代码的抽象

(语法糖)分为：

constant常量:constant初始化时机非常早，可注入到config，其他服务不能

value变量:纯数据无行为

service服务：只new一次，不需参数

factory工厂：类/函数，自己new实例/调用

provider供应商：需要全局配置

创建服务

.factory('name',function(){

　　return{

　　　　'username':function(x){...}

　　}

});

<==>

.provider('myService', {
　　$get: function() {
　　　　return {
　　　　　　'username': 'auser'
　　　　};
　　}
});

.service('name',constructor);

constructor构造函数，通过new关键字来实例化服务对象

var Person = function($http) {
　　this.getName = function() {
　　　　return $http({ method: 'GET', url: '/api/user'});
　　};
};

.provider('name',aProvider);

aProvider对象/函数/数组:

函数：

function(x){...}

数组：数组的最后一个元素应该是函数

对象：

{
　　favoriteColor: null,
　　setFavoriteColor: function(newColor) {
　　　　this.favoriteColor = newColor;
　　},
　　// $get函数可以接受injectables
　　$get: function($http) {
　　return {
　　　　'name': 'Ari',
　　　　getFavoriteColor: function() {
　　　　　　return this.favoriteColor || 'unknown';
　　　　}
　　};
}

如果希望服务可以被注入到config()函数，必须用provider()来定义服务

可以在多个应用使用同一个服务时获得更强的扩展性，特别是在不同应用或开源社区之间共享服务时

.constant('name',value);

常量服务可以将一个已经存在的变量值注册为服务，并将其注入到应用的其他部分/配置函数如controller,config

.value('name',value);

值不能注入到配置函数中
通常情况下，可以通过value()来注册服务对象或函数，用constant()来配置数据

$provide.decorator('name',fn)

提供了在服务实例创建时对其进行拦截的功能，可以对服务进行扩展，或者用另外的内容完全代替它

angular.foreach(objs,function(data,index,array){

//array[index]

});

objs：需要遍历的集合

data:遍历时当前的数据

index:遍历时当前索引

array:需要遍历的集合，每次遍历时都会把objs原样的传一次。

伯乐在线案例：

导航菜单：

<body ng-app>
    <nav class="{{active}}" ng-click="$event.preventDefault()">
        <a href="#" class="home" ng-click="active='home'">home</a>
        <a href="#" ng-click="active='projects'" class="projects">projects</a>
        <a href="#" ng-click="active='services'" class="services">services</a>
        <a href="#" ng-click="active='contact'" class="contact">contact</a>
    </nav>
    <p ng-hide="active">点击菜单选择</p>
    <p ng-show="active">{{active}}</p>
</body>
nav.home .home,
nav.projects .projects,
nav.services .services,
nav.contact .contact{
    background-color:#e35885;
}

内联编辑器：

<body ng-app>
    <div ng-controller="myctrl" ng-click="hideTooltip()">
        <div class="tooltip" ng-show="isshow" ng-click="$event.stopPropagation()">
            <input type="text" ng-model="value">
        </div>
        <p ng-click="write($event)">{{value}}</p>
    </div>
<script>
    function myctrl($scope){
        $scope.value='edit';
        $scope.isshow=false;
        $scope.write=function(e){
            e.stopPropagation();
            $scope.isshow=true;
        };
        $scope.hideTooltip=function(){
            $scope.isshow=false;
        };
    }
</script>

订单表单：ng-class,angular.forEach(objs,fn)
<body ng-app>
    <div ng-controller="myctrl">
        <h1>sewices</h1>
        <ul>
            <li ng-repeat="service in services" ng-class="{active:service.active}" ng-click="toggleActive(service)">
                <h4>{{service.name}}</h4>
                <span>{{service.price|currency:'$'}}</span>
            </li>
            <div>
                <h4>Total:</h4>
                <span>{{total()|currency:'$'}}</span>
            </div>
        </ul>
    </div>

    function myctrl($scope){
        $scope.services=[
            {'name':'web development','price':300,'active':false},
            {'name':'design','price':400,'active':false},
            {'name':'integration','price':250,'active':false},
            {'name':'training','price':250,'active':false}
        ];
        $scope.toggleActive=function(s){
            s.active=!s.active;
        };
        $scope.total=function(){
            var len=$scope.services.length,
                total=0;
            while(len>0){
                var service=$scope.services[--len];
                service.active&&(total+=service.price);
            }
            return total;
        };
    }
或
$scope.total = function(){
   var total = 0;
   angular.forEach($scope.services, function(s){
      if (s.active){
         total+= s.price;
      }
   });
   return total;
};

即时搜索：自定义searchString过滤器
<body ng-app="app">
    <div ng-controller="myctrl">
        <div class="search">
            <input type="text" ng-model="searchString" p;aceholder="enter words">
        </div>
        <ul>
            <li ng-repeat="i in items|search:searchString">
                <a href="#"><img ng-src="img/{{i.href}}"></a>
                <p>{{i.text}}</p>
            </li>
        </ul>
    </div>
<script>
    var app=angular.module('app',[]);
    app.filter('search',function(){
        return function(arr,searchString){
            if(!searchString) return arr;
            var result=[];
            angular.forEach(arr,function(item){
                if(item.text.toLowerCase().indexOf(searchString)!==-1) result.push(item);
            });
            return result;
        };
    });
    app.controller('myctrl',function($scope){
        $scope.items=[
            {
                'href':'featured_4-100x100.jpg',
                'text':'50 Must-have plugins for extending Twitter Bootstrap',
            },
            {
                'href':'featured_4-100x100.jpg',
                'text':'Making a Super Simple Registration System With PHP and MySQL'
            },
            {
                'href':'featured_4-100x100.jpg',
                'text':'Create a slide-out footer with this neat z-index trick'
            },
            {
                'href':'featured_4-100x100.jpg',
                'text':'How to Make a Digital Clock with jQuery and CSS3'
            }
        ];
    });
</script>
 

angularJS 杂的更多相关文章

  1. 我的angularjs源码学习之旅1——初识angularjs

    angular诞生有好几年光景了,有Google公司的支持版本更新还是比较快,从一开始就是一个热门技术,但是本人近期才开始接触到.只能感慨自己学习起点有点晚了.只能是加倍努力赶上技术前线. 因为有分析 ...

  2. 通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  3. AngularJs之九（ending......)

    今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...

  4. AngularJS过滤器filter-保留小数，小数点-$filter

    AngularJS      保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...

  5. Angular企业级开发(1)-AngularJS简介

    AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...

  6. 模拟AngularJS之依赖注入

    一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...

  7. 步入angularjs directive（指令）--点击按钮加入loading状态

    今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...

  8. 玩转spring boot——结合AngularJs和JDBC

    参考官方例子:http://spring.io/guides/gs/relational-data-access/ 一.项目准备 在建立mysql数据库后新建表“t_order” ; -- ----- ...

  9. 玩转spring boot——结合jQuery和AngularJs

    在上篇的基础上 准备工作: 修改pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...

随机推荐

  1. js抛物线动画——加入购物车动效

    参考文章:http://www.zhangxinxu.com/wordpress/2013/12/javascript-js-元素-抛物线-运动-动画/ parapola.js /*! * by zh ...

  2. 父类div高度适应子类div

    父类div高度适应子类div 通常有许多div的高度由子类的高度决定父类的高度,所以需要父类div要适应子类div的高度,一般情况父类的高度可以直接设置成“auto”即可. 在有的情况下,子类div会 ...

  3. Mosquitto pub/sub服务实现代码浅析-主体框架

    Mosquitto 是一个IBM 开源pub/sub订阅发布协议 MQTT 的一个单机版实现(目前也只有单机版),MQTT主打轻便,比较适用于移动设备等上面,花费流量少,解析代价低.相对于XMPP等来 ...

  4. js算数优先级

    .fullwidth-table { background: white } .fullwidth-table>th { background: #f50 } 优先级 运算类型 关联性 运算符 ...

  5. javaSE基础06

    javaSE基础06 一.匿名对象 没有名字的对象,叫做匿名对象. 1.2匿名对象的使用注意点: 1.我们一般不会用匿名对象给属性赋值的,无法获取属性值(现阶段只能设置和拿到一个属性值.只能调用一次方 ...

  6. seo优化urlrewrite伪静态技术

    1.下载urlrewrite-3.2.0.jar 2.在WEB-INF下增加urlrewrite.xml <?xml version="1.0" encoding=" ...

  7. js与jq对数组的操作

    一.数组处理 1.数组的创建  var arrayObj = new Array(); //创建一个数组  var arrayObj = new Array([size]); //创建一个数组并指定长 ...

  8. git 学习

    一.bash中查看已经提交的文件:git ls-files 二.返回上级目录:cd ..     (中间含空格) 三.在当前目录下新建文件夹: mkdir dirName 新建文件:touch new ...

  9. thinkphp 3.2.3 session 丟失問題

    之前做的几个 站session在跨页时也不会丢失(都在同一台服务器,所以我排除了服务器配置问题),这次居然很奇怪的发生的,在火狐上有,在ie, 谷哥上没有session,看了很多网上的贴子 其中有一个 ...

  10. linux中redis的php扩展安装

    PHP中的扩展一般都是在安装环境的时候就已经装好了的.但是有的一些扩展在后期想要加上去的话也是可以的.php支持后期安装扩展. 想要安装扩展就需要先去下载安装扩展所需要的扩展源码包.autoconf. ...