angularjs学习笔记

angularjs学习网站

1.第一个小例子(双向数据绑定)

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <script type="text/javascript" src="../angular-1.3.0-beta.4/angular.min.js"></script>

    </head>

    <body ng-app>

        <input ng-model="name" value=""/>{{name}}

    </body>

</html>

ng-app是告诉angularjs哪一块开始归angularjs去解析,管理

ng-model是数据模型绑定,是双向的绑定,modle和view改变任何一个,都会变化

2.控制器  index.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <script type="text/javascript" src="../angular-1.3.0-beta.4/angular.min.js"></script>

        <script type="text/javascript" src="index.js"></script>

    </head>

    <body ng-app>

        <div ng-controller="firstController">

            <input type="text" ng-model="username"/>{{username}}

        </div>

    </body>

</html>

ng-controller是控制器,表示控制该模块

index.js

var firstController=function($scope){

    //申明一个model

    $scope.username="suncj";

}

参数必须是$scope,这是一个作用域

3.ng-bind是为了解决{{}}取值加载慢时,会出现{{}},例如{{username}},如果angularjs加载慢的话,页面会先出现{{username}},这样很不好看,为了解决这个问题可以用ng-bind

<div ng-bind="username"></div>

这样的话,如果没加载完,页面什么也不会显示,有数据才会显示。

 如下,效果是一样的:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <script type="text/javascript" src="../angular-1.3.0-beta.4/angular.min.js"></script>

        <script type="text/javascript" src="index.js"></script>

    </head>

    <body ng-app>

        <div ng-controller="firstController">

            <input type="text" ng-model="username"/>

            <span ng-bind="username"></span>

        </div>

    </body>

</html>

 4.$apply的运用

$apply可以触发脏检查,让变量改变时通知修改

例如时间的动态显示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <script type="text/javascript" src="../angular-1.3.0-beta.4/angular.min.js"></script>

        <script type="text/javascript" src="index.js"></script>

    </head>

    <body ng-app>

        <div ng-controller="firstController">

            {{date}}

        </div>

    </body>

</html>

index.js

var firstController=function($scope){



    $scope.date=new Date();

    setInterval(function(){

        $scope.$apply(function(){

            $scope.date=new Date();

            //会去触发脏检查,时间会动态改变

        })

    },1000)

}

这样页面就会动态显示时间,如果不用$apply则不会动态改变

如下就不会变化(时间改变时,页面确没变化)

var firstController=function($scope){



    $scope.date=new Date();

    

    setInterval(function(){

            $scope.date=new Date();

    },1000)

}

 

你可能感兴趣的:(AngularJS)