慎用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. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  2. [MySQL]show index from tb_name命令各列的含义

    show index from table_name 这个命令有助于诊断性能低下的查询,尤其是查询是否使用了可用的索引. 下面介绍下 这个命令显示的结果列的含义: | Table | Non_uniq ...

  3. [正则表达式]PCRE环视功能

    设想一下这个问题,假设为了方便长串数字的阅读性,需要为其添加逗号作为分隔,需要怎么做呢? 2569836495 => 2,569,836,495 正则表达式的匹配通常是从左往右的,这导致无法使用 ...

  4. HSSFWorkBooK用法

    public ActionResult excelPrint() { HSSFWorkbook workbook = new HSSFWorkbook();// 创建一个Excel文件 HSSFShe ...

  5. myql 查询树形表结果：说说、说说的述评、评论的回复

    myql 查询树形表结果:说说.说说的评论.评论的回复 有三张表关联表: 用户的说说表(ixt_customer_note) 说说的评论表(ixt_customer_note_comment) 评论的 ...

  6. eclipse开发servlet，HttpServletRequest报红叉解决方案

    eclipse开发servlet,HttpServletRequest报红叉解决方案 今天突然间有兴致,想打一会代码,于是开发一个Servlet,代码和配置路径都没问题,HttpServlet居然报错 ...

  7. Vim配置文件

    转载 原文网址:http://www.cnblogs.com/ma6174/archive/2011/12/10/2283393.html 花了很长时间整理的,感觉用起来很方便,共享一下. 我的vim ...

  8. 微信后台开发第一步：nodeJS+express接入微信后台详细教程

    博文由  水车  编写 欢迎各位指正,转载请把链接带上——http://www.cnblogs.com/xuange306/p/4971702.html 前期准备工作 1:如果你没有服务器,那你需要一 ...

  9. SSM框架总结（1）

    ----------------------20170106-------------------------------------- 1.mabatis.genertor中自动生成文件,需要在ge ...

  10. JAVA的模式对话框和非模式对话框

    周末的时候,一位网友让我帮他把他的无模式对话框改成有模式对话框. 界面是由swing制作的,都是JFrame,我从来没有接触过swing编程.大致的代码还是看的懂,很多都和C#很相似. 然后就去查资料 ...