angularjs初步(一)

发表于   |   分类于   |  

AngularJS 应用组成如下：

View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

表达式

  • 使用 表达式 把数据绑定到 HTML
  • 表达式写在双大括号内：，类似ng-bind
1
2
3
4
5
6
7
< div ng-app="" ng-init="quantity=1;cost=5">
< p>总价： {{ quantity * cost }}</p>
</div> 
< div ng-app="" ng-init="quantity=1;cost=5">
< p>总价： <span ng-bind="quantity * cost"></span></p>
< /div>

指令

ng-app 指令初始化一个 AngularJS 应用程序,定义根元素,在网页加载完毕时会自动引导应用程序

ng-init 指令为 AngularJS 应用程序定义了 初始值,通常情况下，不使用 ng-init，用控制器或模块来代替它

ng-model 指令把元素值（比如输入域的值）绑定到应用程序，提供类型验证（number、email、required），提供状态（invalid、dirty、touched、error），为 HTML 元素提供 CSS 类。绑定 HTML 元素到 HTML 表单。

1
2
3
4
5
6
7
< div ng-app="" ng-init="firstName='John'">
  <p>在输入框中尝试输入：</p>
  <p>姓名：<input type="text" ng-model="firstName"></p>
  <p>你输入的为： {{ firstName }}</p> //AngularJS 数据绑定表达式
</div>

ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
< div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  < p>使用 ng-repeat 来循环数组</p>
  < ul>
    < li ng-repeat="x in names">
      {{ x }}
    < /li>
  < /ul>
< div>
< div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
< p>循环对象：</p>
< ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
< /div>

创建自定义的指令

使用 .directive 函数来添加自定义的指令

使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body ng-app="myApp">
< runoob-directive></runoob-directive>
< script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "< h1>自定义指令!</h1>"
    };
});
< /script>
< /body>

以通过以下方式来调用指令:

1
2
3
4
元素名 <runoob-directive></runoob-directive>
属性 <div runoob-directive></div>
类名 <div class="runoob-directive"></div>
注释 <!-- 指令: runoob-directive -->

限制你的指令只能通过特定的方式来调用

1
2
3
4
5
6
7
8
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",// E 只限元素名使用, A 只限属性使用, C 只限类名使用,M 只限注释使用,restrict 默认值为 EA
        //对于注释 要添加 replace：true 属性
        template : "<h1>自定义指令!</h1>"
    };
});

模型 ng-model

  • 将输入域的值与 AngularJS 创建的变量绑定
1
2
3
4
5
6
7
8
9
10
 < div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
< /div>
< script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
< /script>
  • 双向绑定
1
2
3
4
< div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
    <h1>你输入了: {{name}}</h1>
</div>
  • 验证用户输入
1
2
3
4
5
<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
  • 应用状态(invalid合法, dirty改变, touched触屏点击, error)
1
2
3
4
5
6
7
8
< form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
    Email:
    <input type="email" name="myAddress" ng-model="myText" required></p>
    <h1>状态</h1>
< p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
< p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
< p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>
< /form>
  • CSS 类

可用状态:ng-empty ,ng-not-empty ,ng-touched ,ng-untouched ,ng-valid ,ng-invalid ,ng-dirty ,ng-pending ,ng-pristine

1
2
3
4
5
6
7
8
9
10
11
12
13
 <style>
input.ng-invalid {
    background-color: lightblue;
}
</style>
<body>
< form ng-app="" name="myForm">
    输入你的名字:
    <input name="myAddress" ng-model="text" required>
< /form>
< p>编辑文本域，不同状态背景颜色会发送变化。</p>
< p>文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。</p>

Scope(作用域)

  • scope 是模型
  • Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带，是一个对象，有可用的方法和属性，可应用在视图和控制器上

可以将 $scope 对象当作一个参数传递，当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< div ng-app="myApp" ng-controller="myCtrl">
< h1>{{carname}}</h1>
</div>
< script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});
< /script>

根作用域 所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中,是各个 controller 中 scope 的桥梁，用 rootscope 定义的值，可以在各个 controller 中使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< div ng-app="myApp" ng-controller="myCtrl">
< h1>{{lastname}} 家族成员:</h1>
< ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}
</ul>
< /div>
< script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

控制器 ng-controller

  • 控制 AngularJS 应用程序的数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//定义AngularJS 应用程序  定义控制器
 < div ng-app="myApp"  ng-controller="myCtrl" >
//ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）
名: <input type="text" ng-model="firstName"><br>
名: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
< /div>
< script>
var app = angular.module('myApp', []);
//$scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象
app.controller('myCtrl', function($scope) {
//控制器在作用域中创建了两个属性 (firstName 和 lastName)
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
< /script>

控制器方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 < div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}
</div>
< script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

外部文件中的控制器 只需要把 < script> 标签中的代码复制到名为 personController.js 的外部文件中即可：

1
2
3
4
5
6
7
8
9
10
 < div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
< /div>
< script src="personController.js"></script>