angular入门一

---

title: anuglar01
date: 2016-10-04 14:26:13
tags:

---

angular入门一

准备工作

为什么用angular

1.MVC起源 代码分离。

angular跟jquery一样就是一个工具，一个库而已，谷歌开发的。

直接上官网，学库上官网无非就两件事：

1.下载 官网https://angularjs.org/

​ 关于版本：

​ 1.2.x 之前 老了，不用了

​ 1.3.x 相对好用

​ 推荐1.3.10

​ 2.x.x

​ 根本就特么是两个东西

2.看APIhttps://code.angularjs.org/1.3.10/docs/api

原理一讲放倒一片，所以直接讲使用会用了以后再说原理

思想：一切以数据为核心。

文档的用法我不想说写几个小例子吧。

第一部分小例子

angular特色：

1.双向绑定 一个框里面数据变，另外一个也变过程 view ->model->view

2.依赖注入

​ 函数传参，参数名字定死，与顺序无关

    

        {{a}}
    

3.再来一个例子配合事件用（双向绑定），包含控制器定义

    

        
        {{a}}
    

angular脏数据检查，注意下面的代码视图数据并不会跟控制器一起更新

    

        {{a}}
    

解决：核心部分一替换完事儿

    var mk = angular.module('mk',[]);
    mk.controller('show',function($scope,$timeout){
        $scope.a = 10;
        $timeout(function(){
            $scope.a = 999999;
        },1000);
    });

总结上面几个例子穿插了控制器和服务的定义。

不多说

简要说下服务：

$scope

$timeout都是服务

留言板

    

        
        
        

        还没有添加任务
        

            
{{item.name}}
            删除
        
    

angular主要解决ajax等频繁数据交互和操作DOM的情况，这种情况在购物车下尤为常见，直接上例子：

    

        
名称：{{item.name}}
        
数量：
        
价格:{{item.price}}
        
小计:{{item.count*item.price}}
    
    
总计:{{sum()|currency:'￥'}}

上面说了循环和过滤器，下一篇看文章说下自定义指令和ajax，最后写两个例子

一个是angularajax请求数据，一个是angular路由的移动端单页程序。angular就入门了，angular本来就是很简单的东西，

当成玩具会用就好了。