慎用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. python3 黑板客爬虫闯关游戏（四）

    这关较第三关难度增加许多,主要多了并发编程 密码一共有100位,分布在13页,每页打开的时间在15秒左右,所以理所当然的想到要用并发,但是后来发现同IP访问间隔时间不能小于8秒,不然会返回404,所以 ...

  2. matlab更改打开时候默认路径

    每次打开matlab都会的修改默认路径,是一件有些烦恼的事情.所以,就想尝试更改默认路径 方法如下: 1.在matlab安装目录,找到toolbox文件夹,打开local文件件,打开matlabrc. ...

  3. jquery validate minlength rule is not working

    Question: I have a form with a password field. The password has to be at least 8 characters long. &l ...

  4. http://blog.csdn.net/java2000_wl/article/details/8627874

    http://blog.csdn.net/java2000_wl/article/details/8627874

  5. webbrower判断页面是否加载完成的好方法

    public void WaitPageCompleted(int timeOutSec) { ; ; j < timeOutSec * ; j++) { _wb.Invoke(new Acti ...

  6. 【ASP.NET】利用Nuget打包package——命令行方式

    通过命令行 官方说明,可以参考:creating-and-publishing-a-package 如果你希望可以使用图形界面的方式,请参考这篇文章   打包dll   使用如下的命令: nuget  ...

  7. （三）Netty源码学习笔记之boss线程处理流程

    尊重原创,转载注明出处,原文地址:http://www.cnblogs.com/cishengchongyan/p/6160194.html  本文我们将先从NioEventLoop开始来学习服务端的 ...

  8. iOS 局部变量 全局变量 成员变量

    一.成员变量 : 写在类声明的大括号中的变量叫成员变量 (也叫属性/实例变量) 成员变量不可离开类 离开了类就不是成员变量 成员变量不能再定义的同事初始化 成员量只能通过对象来访问 成员变量存储在堆中 ...

  9. js方法入参或局部变量和全局变量重名，用来赋值全局变量会失败

    今天遇到个bug,最后终于知道原因了,js方法入参和全局变量重名,用入参赋值全局变量失败,就是说方法入参不能和全局变量重名. 现在下面的例子也说明,局部变量和全局变量不可以同名不光是入参,只要同名赋值 ...

  10. php给客户端返回数据注意。

    亲身测试: 返回的时候不要直接返回字符串,要用数组的方式返回数据客户端才能接收. 看代码. <?php require_once("../base.php"); functi ...