AngularJS学习笔记(1)

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>

 

你可能感兴趣的:(AngularJS)