关闭搜索(ESC)
搜索标签:

Angular学习笔记

2015-08-09 浏览:646 标签: angular

Angular学习指南

一:指令

1:ng-model

<div ng-app>
    <div ng-controller="HelloController">
        <input ng-model="greating.text">
        <p>{{greeting.text}}</p>
    </div>
</div>
function HelloController($scope) {
    $scope.greeting = {text:'hello'};
}

2:ng-click

<div ng-app>
    <div ng-controller="HelloController">
        <input type="button" ng-click="show()">
        <p>{{greeting.text}}</p>
    </div>
</div>
function HelloController($scope) {
    $scope.greeting = {text:'hello'};
    $scope.show = function() {
        $scope.greeting.text = 'right';
    }
}

3:ng-repeat

<div ng-repeat="item in items">
    <span>{{item.title}}</span>
</div>

4:ng-class

.error {
    background-color: red;
}
.warning {
    background-color: yellow;
}
<div ng-controller='HeaderController'>
    <div ng-class='{error: isError, warning: isWarning}'></div>
    <button ng-click='showError()'></button>
    <button ng-click='showWarning'></button>
</div>
function HeaderController($scope) {
    $scope.isError = false;
    $scope.isWarning = false;

    $scope.showError = function() {
        $scope.isError = true;
        $scope.isWarning = false;
    };

    $scope.showWarning = function() {
        $scope.isError = false;
        $scope.isWarning = true;
    }
}

二:函数

1:$watch,监控数据模型的变化

$watch(watchFn, watchAction, deepWatch)

三:模块化组织依赖关系

var appMod = angular.module('app', ['SnazzyUIWidgets', 'SuperDataSync']);

四:细节

$scope$rootscope两者的区别是,$scope是单个html和controller之间的桥梁,而$rootscope定义的值,可以在多个controller使用

添加评论