angular入门

angular.js 1.3.10

mvvm, 也叫作mvc, 谷歌在推广这个框架, 主要致力于解决ajax开发过程中带来的痛苦; 建议放到服务器环境下;

1. 改变this的指向:

function show(){
    alert(this);
}
show();//window;

var c = angular.bind(21, show);
c();//21;

//传参:
var c = angular.bind(12, show, 'abc', 'def');

angular.bind(this指向谁, 函数名, 参数1, 参数2, 参数```);

2. copy

var arr1 = [1,2,3];
var arr2 = [];

angular.copy(arr1, arr2);
angular.copy(克隆谁, 克隆到哪里去);
console.log(arr2);

3. angular.element: angular中的dom操作;类似于window.onload

    angular.element(document).ready(function(){
        alert('1');
    });

    angular.element(document).ready(function(){
        var oDiv = document.getElementById('div1');
        angular.element(oDiv).on('clcik', function(){
            angualr.element(this).css('background', 'red')
        });
    });

4. equals(); 比较两个元素是否相等;

var arr1 = [1,2,3,4];
var arr2 = [1,2,3,4];

alert(angular.equals(arr1, arr2));//true,

angular 对比过后NaN 和NaN 相等;

5. forEach(): 循环, 可以循环数组和json

var arr = ['a', 'b', 'c', 'd'];
angular.forEach(arr, function(v, k){
    console.log('v', 'k')//v==>元素   k===>下标
});

angular.forEach(循环谁, fn(v, k));

6. isArray(); isDate();

var oDate = new Date();
alert(angular.isDate(oDate));

7. lowercase(); uppercase();

8. angular命名空间: ng-开头;

9. 第一个程序:
   天生就产生数据的元素: input类, ng-model="name"; 数据名称;
   展示数据: {{name}}

    
 ng-app: 开启angular的应用模式;
        
        {{a}}
    

指令(directive): 指令以ng-开头, 扩展HTML语法;

• ng-app
• ng-init
• ng-bind
• ng-model
• ng-show

10. ng-app一个页面只能有一个;所以一般都加给HTML

11. 另一种展示数据的方式: ng-bind="数据名称"; 数据出错不会展示模板标记;

  
 ng-app: 开启angular的应用模式;
          
          {{a}}
          
      

12. ng-init: 初始化数据, 针对非input类标签;

    {{a}}


    {{arr}}

13. ng-show="true/false" ng-hide="true/false"

{{a}}

14. ng-click: 点击

15. ng-repeat: 循环

    

        

            
{{val}}
        
    

    

    
            

                
{{val}}
            
        

控制器: controller, 依赖注入, 双向数据绑定;

依赖注入:


双向数据绑定: 函数传参, 名字定死, 跟顺序无关;

• 定义控制器: function show($scope){$scope.a=12}

// angular.module(模块名, [依赖的模块], fn[配置函数]);

var app = angular.module('mk', []);
//app.controller(控制器的名称, fn)
app.controller('show', function($scope){
    $scope.a = 12;
});
{{a}}

多个控制器: 可以继承, 继承看DOM结构, 也可以进行数据的传递

var app = angular.module('mk', []);

app.controller('show1', function($scope){
    $scope.a = 12;
});

app.controller('show2', function($scope){
    $scope.a = 23;
})

//use:1

    {{a}}


    {{a}}


//use:2

    {{a}}
    

        {{a}}
    

多个控制器之间的数据传递:

1. 子级传递给父级:
   传递: $emit(发生的数据名称, 发射的数据),
   接收: $on()
2. 父级传递给子级:
   传递:
   接收: $on

var app = angular.module('mk', []);
app.controller('ctrl1', function($scope){
    
    $scope.$on('data', function(event, data){
        $scope.a = data+1;
    })
});

app.controller('ctrl2', function($scope){
    $scope.c = function(){
       alert($scope.aaa);
       $scope.$emit('data', $scope.aaa);
    };
})


    父级的: {{a}}
    

         

        {{b}}
    

var app = angular.module('mk', []);
app.controller('ctrl1', function($scope){
    
    $scope.$on('data', function(event, data){
        $scope.a = data+1;
        //把数据给子级:
        $scope.$broadcast('newdata', data);
    })
});

app.controller('ctrl2', function($scope){
    $scope.c = function(){
       alert($scope.aaa);
       $scope.$emit('data', $scope.aaa);
    };
})

app.controller('ccc', function($scope){
    $scope.$on('new-data', function(event, data){
        $scope.aaa = data - 1;
    });
});


    父级的: {{a}}
    

         

        
{{aaa}}
    

数据脏检查: 数据更改了, 但是视图没有更改;

var app = angular.module('mk', []);
app.controller('ctrl', functin($scope){
    $scope.a =1;

    //1
    setTimeout(function(){
        $scope.a = 12;
    }, 1000);

    //2
    setTimeout(function(){
        $scope.$apply(function(){
            $scope.a = 12;
        });
    });

});

//3.
app.controller('ctrl', function($scope, $timeout){
    $scope.a = 2;
    $timeout(function(){
        $scpe.a = 3;
    });
});


    {{a}}

控制器中注入的都是服务[service]:

• $scope,
• $timeout
• $interval