AngularJS 简介

简介

AngularJS 是一个 JavaScript 框架
AngularJS 通过 指令 扩展了 HTML,且经过 表达式 绑定数据及 HTML
AngularJS表达式可以描绘在HTML里面
AngularJS表达式不支持标准化与循环语词,而且从不exception语句
AngularJS表达式支持过滤器

AngularJS 应用做

View(视图), 即 HTML
Model(模型), 当前视图中可用的多寡($scope/$rootScope)
Controller(控制器), 即 JavaScript 函数,可以增长或修改属性

指令

AngularJS 通过 ng-directives 扩展了 HTML
AngularJS 指令是因 ng 作为前缀的 HTML 属性
ng-app 指令定义一个 AngularJS 应用程序
ng-controller 定义了控制器
流淌:一个页面只能发出一个ng-app,可以出多独ng-controller
ng-model
指令把第一素值(比如输入域的值)绑定到应用程序,可以吧用数据提供状态值(invalid,
dirty, touched, error)
ng-bind 指令把应用程序数据绑定到 HTML 视图(双向绑定)
ng-init 指令初始化 AngularJS 应用程序变量
ng-repeat
指令给每个重复项都访问了现阶段的再度对象,对于集合中(数组中)的每个项会
克隆一涂鸦 HTML 元素
ng-show 指令验证用户输入
ng-invalid 指令,处理当数码不合法的下
详尽指令查询:http://www.runoob.com/angularjs/angularjs-reference.html

表达式

AngularJS 表达式写在双大括号内:{{ expression }}
AngularJS 表达式把数据绑定到 HTML(双向绑定),这同 ng-bind
指令发出异曲同工之精良
AngularJS 表达式 很像 JavaScript 表达式:它们可以蕴涵文字、运算符和变量

示例

ng-app不可省略
ng-init初始化变量
ng-bind绑定变量,显示

<div ng-app="" ng-init="firstName='John'">
    <p>姓名为 </p>
</div>
```
AngularJS 表达式使用
```html
<div ng-app="">
     <p>名字 : <input type="text" ng-model="name"></p>
     <h1>Hello {{name}}</h1>
</div>
```
ng-controller指令定义了应用程序控制器,控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建(如下)   
$scope(相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象    
控制器也可以有方法(变量和函数),调用fullName这个方法需要括号  
```html
<p>尝试修改以下表单。</p>
<div ng-app="myApp" ng-controller="myCtrl">
    名: <input type="text" ng-model="firstName"><br>
    姓: <input type="text" ng-model="lastName"><br>
    <br>
    姓名: {{firstName + " " + lastName}}
    <br />
    全名: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName = "Doe";
    $scope.fullName = function () {
        debugger;
        return $scope.firstName + " * " + $scope.lastName;
    };
});
</script>
</script>
```
验证用户输入
```html
<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    不是一个合法的邮箱地址
</form>
<p>在输入框中输入你的邮箱地址,如果不是一个合法的邮箱地址,会弹出提示信息。</p>
```
ng-invalid与required合用,在数据合理/不合理的两种情况下,显示不同效果
```html
<style>
    input.ng-invalid {
        border-color:red;
    }
</style>
<form ng-app="" name="myForm">
    输入你的名字:
    <input name="myName" ng-model="myText" required>
</form>
<p>编辑文本域,不同状态边框颜色会发送变化。</p>
<p>文本域添加了 required 属性,该值是必须的,如果为空则是不合法的。</p>
```

摘自:http://www.runoob.com/angularjs/angularjs-intro.html

相关文章