慎用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. nova instance出错："message": "Proxy error: 502 Read from server failed

    执行 $ nova resize instance1 时候出错: {, "details": " File \"/opt/stack/nova/nova/com ...

  2. Winform自定义控件基础（二）

    protected override void WndProc(ref Message m)

  3. 【mongo】mongoVUE使用

    1.查询存在字段"test"的项 {"test":{$exists:true}} 2.在表中插入字段 {$set:{"}} 3.正则匹配 {" ...

  4. 【http】四种常见的 POST 提交数据方式

    来源:http://www.cnblogs.com/aaronjs/p/4165049.html HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT ...

  5. js数组的sort排序详解

    <body> <div> sort()对数组排序,不开辟新的内存,对原有数组元素进行调换 </div> <div id="showBox" ...

  6. vue-resource

    代替ajax操作 在mian.js里面引入 import vueResource from 'vue-resource' mian.js会 加载全局js 下面介绍的是基于Vue实例的方式,一般项目只需 ...

  7. python之Socket网络编程

    什么是网络? 网络是由节点和连线构成,表示诸多对象及其相互联系.在数学上,网络是一种图,一般认为专指加权图.网络除了数学定义外,还有具体的物理含义,即网络是从某种相同类型的实际问题中抽象出来的模型.在 ...

  8. 安天移动安全应对“DressCode”威胁，发布企业移动威胁检查工具

    近日,一种名为"DressCode"的恶意代码引起了国内安全行业的关注,该恶意代码以企业员工的移动设备作为跳板对企业内网进行攻击,对企业安全造成严重威胁.安天移动安全公司威胁情报团 ...

  9. ****基于H5的微信支付开发详解[转]

    这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...

  10. 卸载oracle 11g数据库软件

    卸载oracle,从11g开始使用deinstall卸载数据库软件可以干净卸掉oracle $ cd $ORACLE_HOME/deinstall $ ls -l total 152 -rwxr-xr ...