AngularJS学习笔记(1)

浏览数：30 / 时间：2015年06月09日

1.angularjs特性

mvc模式
模块系统
指令系统
依赖注入
双向数据绑定

2.$scope与$rootscope

$scope是局部作用域，$rootscope是全局作用域。
配合ng-controller使用，查找变量时会先从当前作用域（$scope）找到全局作用域（$rootscope）。

函数的形参$scope, $rootScope是不能修改的，testScope是在angular内部自动调用，这两个参数在内部调用时自动依赖注入了。这两个参数统一叫服务，一般服务以$开头。

function  testScope($scope, $rootScope){
        $scope.name = ‘test‘;
        $rootScope.age = 1;
    }

    <div ng-controller="testScope">
         <p>{{name}}</p>
    </div>
    <p>{{age}}</p>

3.数据绑定

{{}}用于数据绑定，也可以使用ng-bind。
    <p>{{txt}}</p> 
    或
    <p ng-bind="txt"></p>
两者的却别在于{{}}html没有加载完毕{{txt}}回直接显示到页面，直到angular渲染该绑定数据（这种行为有可能将{{binding}}让用户看到）；而ng-bind则是在angular渲染完毕后将数据显示

4.ng-controller与ng-app

ng-controller 控制器 链接视图与模型数据之间的桥梁，可以根据需要引入多个控制器
ng-app 类似于初始化调用angular的指令，可以写到html任何标签，对相应标签的范围内angular起作用。
html标签上加了一个 ng-app属性，意思是整个HTML都属于AngularJS控制；
    <html ng-app>

5.双向数据绑定

类似MVVM设计模式，当M(Model 数据)发生改变会自动让V(view 视图html)生改变，当v发生改变,也会自动改变M。

M->V:
   $timeout指令：类似setTimeout
    function testTimeout($scope,$timeout){
           $scope.name = ‘first‘;
           $timeout(function(){
               $scope.name = ‘second‘;
           },2000)
    }

    ng-click指令：类似onclick
    function testClick($scope){
        $scope.name = ‘first‘;
        $scope.change = function(){
            $scope.name = ‘third‘;
        }

    }

    <div ng-controller="testClick" ng-click="name=‘third‘">
        <p>{{name}}</p>
    </div>
    或
    <div ng-controller="testClick" ng-click="change()">
        <p>{{name}}</p>
    </div>
    
 V->M:
    ng-model:讲值绑定到表单元素上
        <input type="text" ng-model="yourName"     placeholder="Enter a name here"/>
           <p>{{yourName}}</p>

5.currrency:过滤器

表达式|currency 格式化为美元：$表达式的值
表达式|currency:"￥" 格式化为人民币 ：￥表达式的值

        function testCurrency($scope){
            $scope.iPhone = {
                price : 50,
                num : 3
            };

            $scope.count = function(){
                return $scope.iPhone.price * $scope.iPhone.num;
            }
        }

        <div ng-controller="testCurrency">
            <p>价格：<input type="text" ng-model="iPhone.price"/></p>
            <p>数量：<input type="text" ng-model="iPhone.num"/></p>
            <p>{{ iPhone.price * iPhone.num}}</p>
            <p>{{ count()}}</p>
            <p>{{ iPhone.price * iPhone.num |currency}}</p>
            <p>{{ iPhone.price * iPhone.num |currency:‘￥‘}}</p>
        </div>

6.当前学习Demo

<!DOCTYPE html>
<html  ng-app>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<script type="text/javascript" src="http://ngnice.com/lib/angular/1.2.16/angular.js"></script>
<script type="text/javascript">
    function  testScope($scope, $rootScope){
        $scope.name = ‘test‘;
        $rootScope.age = 1;
    }

    function testTimeout($scope,$timeout){
           $scope.name = ‘first‘;
           $timeout(function(){
               $scope.name = ‘second‘;
           },2000)
   }

    function testClick($scope){
        $scope.name = ‘first‘;
        $scope.change = function(){
            $scope.name = ‘third‘;
        }
    }

    function testCurrency($scope){
        $scope.iPhone = {
            price : 5,
            num : 3,
            free : 10
        };
        $scope.newVal = "";
        $scope.oldVal = "";
        $scope.count = function(){
            return $scope.iPhone.price * $scope.iPhone.num + $scope.iPhone.free;
        };

    }

</script>
</head>
<body>
    <div>
       <label>Name:</label>
       <input type="text" ng-model="yourName" placeholder="Enter a name here">
       <br>
       <h1 ng-bind="yourName"></h1>
       <h1>Hello {{yourName}}!</h1>
    </div>
    <br/>

    <div ng-controller="testScope">
         <p>{{name}}</p>
    </div>
    <p>{{age}}</p>

    <div ng-controller="testTimeout">
        <p>{{name}}</p>
    </div>

    <div ng-controller="testClick" ng-click="change()">
        <p>{{name}}</p>
    </div>

    <input type="text" ng-model="testName" placeholder="Enter a name here">
    <p>{{testName}}</p>

    <div ng-controller="testCurrency">
        <p>价格：<input type="text" ng-model="iPhone.price"/></p>
        <p>数量：<input type="text" ng-model="iPhone.num"/></p>
        <p>运费：<input type="text" ng-model="iPhone.free"/></p>
        <p>{{ iPhone.price * iPhone.num + iPhone.free}}</p>
        <p>{{ count()}}</p>
        <p>{{ iPhone.price * iPhone.num + iPhone.free |currency}}</p>
        <p>{{ iPhone.price * iPhone.num + iPhone.free |currency:‘￥‘}}</p>

    </div>
</body>
</html>