angular入门

作者: 前端_周瑾 | 来源:发表于2018-03-28 20:12 被阅读0次

angular入门简介
Angular目录结构+app.module.ts详解
Angular2入门到实战
(17.06.20)Vue、简易留言板、钩子函数、防止闪屏、事件
Angular笔记项目简介
Angular Material官方入门教程
Angular Material官方入门教程
对于web MVC的一些个人理解
angular入门
Angular 入门

angular.js 1.3.10

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

改变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, 参数```);

copy

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

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

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')
        });
    });

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

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

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

angular 对比过后NaN 和NaN 相等;

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));

isArray(); isDate();

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

lowercase(); uppercase();
angular命名空间: ng-开头;
第一个程序:
天生就产生数据的元素: input类, ng-model="name"; 数据名称;
展示数据: {{name}}

    <div ng-app> ng-app: 开启angular的应用模式;
        <input type="text" value="" ng-model='a' />
        {{a}}
    </div>

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

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

ng-app一个页面只能有一个;所以一般都加给HTML
另一种展示数据的方式: ng-bind="数据名称"; 数据出错不会展示模板标记;

  <div ng-app> ng-app: 开启angular的应用模式;
          <input type="text" value="" ng-model='a' />
          {{a}}
          <strong ng-bind="a"></strong>
      </div>

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

<div ng-init="a=12">
    {{a}}
</div>
<div ng-init="arr=['a', 'b', 'c', 'd']">
    {{arr}}
</div>

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

<div ng-show="true/fasle" style="width: 100px; height: 100px; background: red;"></div>

<input type="checkbox" ng-model="a" />
{{a}}
<div ng-show="a" stylw="width: 100px; height:100px; background: red;"></div>

ng-click: 点击

<div ng-init="a=false">
<input type="button" value="按钮" ng-click="a=!a" />
<div id="div1" ng-show="a"></div>
</div>

ng-repeat: 循环

    <div ng-init="arr=['a', 'c', 'b', 'd']">
        <ul>
            <li ng-repeat="val in arr">{{val}}</li>
        </ul>
    </div>

    <div ng-init="arr=['a', 'c', 'b', 'd']">
    <input type="button" ng-click="arr.push('123')" />
            <ul>
                <li ng-repeat="val in arr">{{val}}</li>
            </ul>
        </div>

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

依赖注入:
<input type="text" ng-model="a">
<input type="text" ng-model="a">
双向数据绑定: 函数传参, 名字定死, 跟顺序无关;

定义控制器: function show($scope){$scope.a=12}
<div ng-controller="show"></div>

// angular.module(模块名, [依赖的模块], fn[配置函数]);
<html ng-app="app" lang="en">
var app = angular.module('mk', []);
//app.controller(控制器的名称, fn)
app.controller('show', function($scope){
    $scope.a = 12;
});
<div ng-controller="show">{{a}}</div>

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

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

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

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

//use:1
<div ng-controller="show1">
    {{a}}
</div>
<div ng-controller="show2">
    {{a}}
</div>

//use:2
<div ng-controller="show1">
    {{a}}
    <div ng-controller="show2">
        {{a}}
    </div>
</div>

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

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

var app = angular.module('mk', []);
app.controller('ctrl1', function($scope){
    <!-- $scope.a =0; -->
    $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);
    };
})

<div ng-controller="ctrl1">
    父级的: {{a}}
    <div ng-controller="ctrl2">
        <input type="number" ng-model="aaa" ng-change="c()"/> <br/>
        {{b}}
    </div>
</div>

var app = angular.module('mk', []);
app.controller('ctrl1', function($scope){
    <!-- $scope.a =0; -->
    $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;
    });
});

<div ng-controller="ctrl1">
    父级的: {{a}}
    <div ng-controller="ctrl2">
        <input type="number" ng-model="aaa" ng-change="c()"/> <br/>
        <div ng-controller="ccc">{{aaa}}</div>
    </div>
</div>

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

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

<div ng-controller="ctrl">
    {{a}}
</div>