@FarmerZ 2016-06-24T00:57:33.000000Z 字数 2316 阅读 519

angular learning

tag: angular controller filter service promis deferred

angular learning

1. basics

directives expressions filters moduls controllers
more things
Events Dom Forms Imput Validation Http

2. 命令标签

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

3. angular表达式

syntax:{{experssion}}

4. 使用表达式方法引用变量

eg:<p>{{variable}}</p>
该方法同样可以引用指定的变量

5. 我们可以使用javascript来书写angularjs

module定义A应用
controller控制应用
ng-app命令定义应用，ng-controller命令定义控制器

6. expression

angular也可以把数据用表达式{{express/variable}}绑定起来
双括号的执行语句可以使表达式，操作符、变量
如果其所在的元素没有在应用的范围内，则不予执行。
而且一个很重要的点是angular的expression支持filter，即支持过滤。

7. module创建应用对象

angular的modul命令定义一个应用
module是应用的容器
module是控制器controller的容器，控制器只能在angular应用中起作用
eg:

var app = angular.modul("myApp", []);

在上述了代码中，[]中可以放置当前应用所依赖的其他应用
应该尽量避免使用全局函数，因为他们很容易被其他代码块中的函数重写或者被破坏掉，在angularJS中，通过使用在应用中建立本地函数减少这种情况的发生。
建议把js代码块放在末尾，angularjs库放在head里或者body开始的位置，这是由module的编译是在angularjs加载完之后在进行的。

8. AngularJS Directives

扩展html标签的属性，叫做directives，中文叫做命令。
AngularJS有一系列内置的命令，这位你的应用提供了很多功能。
同样的AngularJS允许你定义自己的命令。

命令是以ng-前缀开始的的单词
* directives
1. ng-app
2. ng-init
3. ng-model 绑定html表单的值，并给应用使用
4. ng-repeat 重复写一个html元素
* angularJS很适合实时读写的数据应用（车站，球赛，股票）nice

9. 创建新的命令

使用.directive方法创建
使用自定义的命令时，在应用中创建同名的html元素
创建的新命令使用驼峰格式命名，在使用时，需要使用-在大字母位置前隔开，并且命令名字都变成小写
eg：

<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
    return {
          template : "<h1>Made by a directive!</h1>"
    };
});
</script>

10. model Directive

该命令绑定html控件(input,select,textarea)的值给应用使用

Two-Way Binding双向绑定
eg:

<div ng-app="myApp" ng-controller="myCtrl">
    Name: <input ng-model="name">
    <h1>You entered: {{name}}</h1>
</div>

如果控件的值发生改变，angularjs的属性也会发生变化

验证有效输入
应用状态
例程

<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
    Email:
    <input type="email" name="myAddress" ng-model="myText" required>
    <h1>Status</h1>
    {{myForm.myAddress.$valid}}
    {{myForm.myAddress.$dirty}}
    {{myForm.myAddress.$touched}}
</form>

css Classes
例程

<style>
input.ng-invalid {
    background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
    Enter your name:
    <input name="myAddress" ng-model="text" required>
</form>

ng-model 添加或删除一下classes，依据他们的状态
*ng-empty 空
* ng-not-empty 非空
* ng-touched 触碰过
* ng-untouched 么有触碰过
* ng-valid 有效的
* ng-invalid 无效的
* ng-dirty 污染
* ng-pending 未决定
* ng-pristine 原始的