angularJS 杂

慎用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 杂的更多相关文章

我的angularjs源码学习之旅1——初识angularjs
angular诞生有好几年光景了,有Google公司的支持版本更新还是比较快,从一开始就是一个热门技术,但是本人近期才开始接触到.只能感慨自己学习起点有点晚了.只能是加倍努力赶上技术前线. 因为有分析 ...
通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇
什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...
AngularJs之九（ending......)
今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...
AngularJS过滤器filter-保留小数，小数点-$filter
AngularJS 保留小数默认是保留3位固定的套路是 {{deom | number:4}} 意思就是保留小数点的后四位在渲染页面的时候加入这儿个代码用来精确浮点数,指定小数点 ...
Angular企业级开发(1)-AngularJS简介
AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...
模拟AngularJS之依赖注入
一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...
步入angularjs directive（指令）--点击按钮加入loading状态
今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...
玩转spring boot——结合AngularJs和JDBC
参考官方例子:http://spring.io/guides/gs/relational-data-access/ 一.项目准备在建立mysql数据库后新建表“t_order” ; -- ----- ...
玩转spring boot——结合jQuery和AngularJs
在上篇的基础上准备工作: 修改pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...

随机推荐

jquery.validate不用submit而用js提交的例子
$("#form").validate(); $("#btn).click(function(){ if($("#form").valid()){ $ ...
asp.net 文件下载(txt,rar,pdf,word,excel,ppt)
aspx 文件下载说起来一点都不难,但是在做的过程中还是遇到了一些小小的问题,就是因为这些小小的问题,导致解决起来实在是太难了,其中一个就是Response.End();导致下载文件出现线程终止的情况 ...
DevExpress 关于alertControl 图片显示
private void button1_Click(object sender, EventArgs e) { AlertInfo info = new AlertInfo("Captio ...
PHP Ueditor 富文本编辑器
2016年12月11日 08:46:59 星期日百度的简版富文本编辑器umeditor很久没更新了全功能版本的配置项跟umeditor还是有区别的, 这里说下ueditor怎么对接到项目中去, 主 ...
关于so文件cp覆盖导致调用者core的研究
先说cp好mv/rm的区别: cp from to,则被覆盖文件 to的inode依旧不变(属性也不变),内容变为from的: mv from to,则to的inode变为from的,相应的,to的属 ...
解决上一篇jquery中on的疑惑
内容都是来自:http://www.365mini.com/page/jquery-on.htm.这里做一下收藏.文章的最后疑问和解答可以解决所有的疑惑看了之后能更好的整篇文章. on()函数 ...
CSS垂直居中
一.单行文本垂直居中: 设置其文本的行高line-height与其父容器高度相等即可.如 <style> .test{ background-color: grey; line-heigh ...
ORACLE 迁移MYSQL 随笔
1.把服务器上的ORALCE 数据库导成DMP,然后导入本机的临时库 2.先把ORACLE 表中的DATE 改为TIMESTAMP; a.先建立个表 create table type_table_i ...
.net中的反射（转载）
原文地址:http://www.cnblogs.com/Stephenchao/p/4481995.html 两个现实中的例子:1.B超:大家体检的时候大概都做过B超吧,B超可以透过肚皮探测到你内脏的 ...
新浪云SAE搭建python环境问题拾遗
1.python程序部署到sae上需要做的改动在线上需要转换成wsgi的形式运行python程序. sae中运行python程序需要指定一个函数为入口函数. application = sae.cr ...

angularJS 杂

angularJS 杂的更多相关文章

随机推荐

热门专题