Angular.js学习笔记 ,一

- angular中最重要的概念是指令(directive)

- ng-model 是双向数据绑定的指令,效果就是将当前元素的value属性和模型中的[user.name]建立绑定关系

### 模块(Module)

- 我们可以通过angular.module创建一个模块

- angular.module方法传递两个参数才是创建模块,一个参数是获取模块

### 控制器(Controller)

-常用方法:<html ng-app="HelloApp"></html>//ng-app属性是使用ng的前提

<div ng-controller="HelloController"></div>//ng-controller属性放在包裹标签上,控制包裹内代码

js代码中:

- var module = angular.module('HelloApp', [])

- module.controller('HelloController', ['$scope','$http', function(a,b) {

console.log(a);//打印的是$cope对象

}]);

- 通过$scope和视图关联

- $scope.$watch('/*要监视是否发生变化的值*/',function(now,old){

console.log(now);//现在输入的值

console.log(old);//输入之前的旧值

})

-这里推荐一个ng的插件:AngularJS Batarang,安装后可以在chrome控制台下发现ng调试工具

### 表达式(expression)

{{}}

AngularJS表达式很像JavaScript表达式, 它们可以包含

文字、运算符和变量 如 {{ 5 + 5 }} 或 {{ firstName + ‘-’ + lastName }},

数字{{ 100 + 100 }},

字符串{{ 'hello' + 'angular'}} ,

对象{{ zhangsan.name }} ,

数组{{ students[10] }}

对比 JavaScript 表达式:

相同点: AngularJS 表达式可以包含字母,操作符,变量。

不同点: AngularJS 表达式可以写在 HTML 中。 AngularJS 表达式不支持条件判断,循环及异常。 AngularJS 表达式支持过滤器。

### 解决ng在加载页面时先出现表达式的bug

<style>

/* ng-cloak指令就是在NG执行完毕过后自动移除 */

[ng-cloak],

.ng-cloak {

display: none;

}

</style>

<body ng-app class="ng-cloak"></body>或者<body ng-app ng-cloak></body>

本文转自:http://www.cnblogs.com/lm970585581/archive/2017/04/06/6672367.html