Angular基础（上）

AngularJs 是一种MVVM（数据视图双向绑定）框架，angular.js扩展了HTML的功能，减轻了程序员的负担，避免重复劳动；
无论学习什么框架都一样，首先你得明确你要用它来干嘛，angular一般适合做后台的管理系统，总是频繁的进行计算，angular的核心就是数据；

指令

ng- 后接angular指令

ng-app:标记了angular.js脚本的作用域，angular.js仅在这块作用域运行;
ng-controller:控制器；
 
var app = angular.module('myApp', [])
app .controller('cont',function($scope){})

ng-model：M层 ， 即指令把元素值（比如输入域的值）绑定到应用程序；

 hello {{name}} 

{{}}：表达式，告诉angular需要计算其中的表达式并将其结果插入到Dom中；
{{3+4}} => 7

ng-bing：将数据绑定到文本内,不好用，会将原内容覆盖，改用{ { } }；
ng-init：指令初始化；

事件

angular 中绑定事件不同于原生js，有自己的 HTML 事件指令
1、单击事件ng-click

2、双击事件ng-dbclick
3、键盘按下ng-keydown
4、键盘抬起ng-keyup
5、鼠标按下ng-mousedown
6、鼠标抬起ng-mouseup
（2、3、4、5、6用法同上）

样式及循环

1、ng-style：样式指令

 
          
       
小纸人哈哈哈
          
    
小纸人呵呵呵

Paste_Image.png

2、ng-class：ng-class 指令允许动态设置CSS类在一个 HTML 元素上，可以动态的修改 class 的值

 
       
addClass哈哈哈

Paste_Image.png

3、ng-attr-href 、 ng-attr-title

 
      跳转百度  

4、ng-repeat ：循环
循环实现隔行变色小栗子

    
{{data2.name}}
    

        
        
{{data}}
    
    
{{data2.age}}

Paste_Image.png

过滤器

表示 在表达式输出内容时可以使用过滤器对其内容做调整
语法使用 | 管道符号
$filter 过滤器的书写方式 可以写在控制器里，也可以写在表达式里
1、currency

{{ money | currency }}
$filter("currency")(1000,"￥") ;  //￥1000

2、number

{{ num | number }} //单纯的转换为一个数字
{{ num | number : 0 }} //转换为数字后不保留小数
{{ num | number : 2 }} //转换为数字后保留两位小数
$filter ("number")(1234.3407,2);   //(值,保留几位小数)；

3、date

{{ time | date : 'yyyy-MM-dd HH:mm:ss Z' }}；
 $filter("date")(1478143963616,"yy/MM/dd")；

4、orderBy

{{ data | orderBy:'id':true }}；
$filter('orderBy')(data , 'id' )；

5、自定义属性filter
当 angular 提供的过滤器满足不了你的业务时，你可以自定义过滤器
eg：自定义首字母大小写

    

        {{ name }}
        {{ name2 }}
    

服务

在 AngularJS 中，服务是一个函数或对象, 可以理解为封装了很多方法与属性的模块，angular 内部提供了大量的服务

$scope：局部变量
$rootScope：全局变量
$location：处理地址栏 url 的模块
$http：处理 http 请求的模块
$timeout：原生对应 setTimeout 方法
$interval：原生对应 setInterval 方法

未完，再更。。。。。。