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

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

如下，效果是一样的：

<!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)
}