《AngularJs实战》笔记

一、angular简介

 1.1. 目的：通过HTML动态构建web应用

 1.2.  技术点：［双向绑定］以及［依赖注入]

 1.3  对于CRUD应用非常方便（CRUD，Create，Retrieve，Update，Delete）

 1.4  搭建环境
         <script src = "../../angular.min.js" type= "tetxt/javascript"></script>
     或者引入在线网址：
         https://ajax.googleapis.com/ajax/libs/angular/1.2.16/angular.min.js

二、angular中的表达式

2.1 angular表达式与javascript的区别

2.2 angular俄所有值都来源于$scope对象，javascript由window对象来调用表达式

2.3 angular表达式中不允许出现各类判断语句以及循环语句 

2.4 angular使用管道符号'|'来格式化值（过滤器）

2.5 如何在angular中调用javascript？
    采用$eval()方法

html:
    ng-bind = "$eval(express)"
controller:
    $scope.express = '20+1 | number:0'

2.6. $window窗口在表示式中的使用
    需要注入$window对象来代替window

html:
    ng-model="text"
    ng-click="show()"
controller:
    $scope.text = ""
    $scope.show = function () {
        $window.alert("The content you input is " + $scope.text);
    }

2.7 $scope对象属性和方法的继承
    页面本身是一个具有层次性的DOM结构模型，而Angular中的'ng-controller'指令允许在不同层次元素中制定控制器，子层$scope对象将自动继承父层控制器中的属性与方法
2.8 构建模版
    目的：一次定义多处调用
    使用：需要使用src外，还需要ng-include指令

html模版定义:
    <script type="text/ng-template" id="tplbase"></script>
html模版调用:
    <div ng-include src="tplbase"></div>

2.9 使用指令复制元素

html：
    ng-repeat="item in datas"

2.10 添加元素样式
    1、直接绑定css类别
        ng-class="{{red}}"
    2、以字符串数组形式
        ng-class="{true:'red', false:'green'}[blnfocus]
        其中，css的样式取决于blnfocus的值
    3、通过定义key/value对象(最强大)
        $scope.a=false;
        $scope.b=true;
        ng-class="{'red':a, 'green':b}"
        ng-class的样式的真假由a，b来控制

html
    ng-class-odd="'odd'"
    ng-class-even="'even'"
css
    ul .odd{color:red}
    ul .even{color:green}

2.11  控制元素的隐藏与显示
    ng-hide与ng-show
    主要说一下ng-switch

html
    <ul ng-switch on={{switch}}>
        <li ng-switch-when='1'>1</li>
        <li ng-switch-when='2'>2</li>
        <li ng-switch-default>更多</li>
    </ul>
controller
    $scope.switch = '3'