angular 03-17

AngularJS 模块

1.ng-app 指令

ng-app 指令定义了 AngularJS 应用程序的 根元素。

ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

稍后您将学习到 ng-app 如何通过一个值（比如 ng-app="myModule"）连接到代码模块。

2.创建模块 ng-model 指令

ng-model 指令 绑定 HTML 元素 到应用程序数据。

<div ng-app="myApp">...</div>

<script>

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

</script>

3.添加控制器

　　ng-controller 指令来添加应用的控制器

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

</script>

4.ng-repeat 指令

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

5.创建自定义的指令

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。

你可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令，HTML 元素上需要添加自定义指令名。

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

限制使用

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

实例

通过添加 restrict 属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用:

var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});

尝试一下 »

restrict 值可以是以下几种:

E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

5.ng-model 指令

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。

ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。

<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>

　　双向绑定

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
    <h1>你输入了: {{name}}</h1>
</div>

6.验证用户输入

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

　　以上实例中，提示信息会在 ng-show 属性返回 true 的情况下显示。

7.如何使用 Scope

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象，有可用的方法和属性。

Scope 可应用在视图和控制器上。

<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>

当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。

视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。

　　7.1 Scope 作用范围

　　　　以上两个实例中，只有一个作用域 scope，所以处理起来比较简单，但在大型项目中， HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。

　　　　当我们使用 ng-repeat 指令时，每个重复项都访问了当前的重复对象:

<div ng-app="myApp" ng-controller="myCtrl">
<ul>
    <li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

　　7.2根作用域

　　　　所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{lastname}} 家族成员:</h1>
<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

　　根作用域　　　

　　　　所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

　　　　$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{lastname}} 家族成员:</h1>
<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

AngularJS 控制器

　　1.ng-controller 指令定义了应用程序控制器

<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

　　2.控制器方法

　　上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。

　　控制器也可以有方法（变量和函数）：

<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>

　　3外部文件中的控制器

　　在大型的应用程序中，通常是把控制器存储在外部文件中。

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

<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>

　　其他实例

　　以下实例创建一个新的控制器文件:

　　angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'} ]; });

　　保存文件为 namesController.js:

　　然后，在应用中使用控制器文件:

　　AngularJS 实例

　　<div ng-app="myApp" ng-controller="namesCtrl">
　　<ul>
　　  <li ng-repeat="x in names">
　　   {{ x.name + ', ' + x.country }}
　　  </li>
　　</ul>
　　</div>
　　<script src="namesController.js"></script>

AngularJS 过滤器

　　1.AngularJS 过滤器可用于转换数据：

过滤器	描述
currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个表达式排列数组。
uppercase	格式化字符串为大写。

　　2.表达式中添加过滤器

　　　　过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。.

　　　　(下面的两个实例，我们将使用前面章节中提到的 person 控制器)

　　　　uppercase 过滤器将字符串格式化为大写：　　{{ lastName | uppercase }}

　　　　lowercase 过滤器将字符串格式化为小写：　　{{ lastName | lowercase }}

　　　　currency 过滤器将数字格式化为货币格式：

　　3.向指令添加过滤器　　　　

　　　　过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。

　　　　orderBy 过滤器根据表达式排列数组：

<li ng-repeat="x in names | orderBy:'country'">  // 结果根据country类型排列
    {{ x.name + ', ' + x.country }}
  </li>

　　4.过滤输入

　　　　输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

　　　　filter 过滤器从数组中选择一个子集：

<li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>

AngularJS 服务(Service)

　　在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

　　AngularJS 内建了30 多个服务。

　　有个 $location 服务，它可以返回当前页面的 URL 地址。注意 $location 服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义。

　　　　$scope.myUrl = $location.absUrl();

　　1.$http 服务

　　　　AngularJS $http 是一个用于读取web服务器上数据的服务。

　　　　$http.get(url) 是用于读取服务器数据的函数。

　　　POST 与 GET 简写方法格式：

　　　　$http.get('/someUrl', config).then(successCallback, errorCallback);
　　　　$http.post('/someUrl', data, config).then(successCallback, errorCallback);

<div ng-app="myApp" ng-controller="siteCtrl"> 
 
<ul>

    {{names}}

</ul>
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
  $http.get("1.php")
  .success(function (response) {$scope.names = response;});
});

　　　允许所有域名访问

　　　　　允许所有域名访问则只需在http://server.runoob.com/server.php文件头部添加如下代码：

<?php 
header('Access-Control-Allow-Origin:*'); 
echo "ddddddddd";
 ?>

　　2.$timeout 服务

　　　　AngularJS $timeout 服务对应了 JS window.setTimeout 函数。定时器的延时

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

　　3.$interval 服务

　　　　AngularJS $interval 服务对应了 JS window.setInterval 函数。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

　　4.创建自定义服务

　　　　创建访问自定义服务，链接到你的模块中

创建名为hexafy 的访问:
app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

实例

使用自定义的的服务 hexafy 将一个数字转换为16进制数:

app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});

AngularJS Select(选择框)

　　1.使用 ng-options 创建选择框

　　　　ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出

<div ng-app="myApp" ng-controller="myCtrl">
 
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select>
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});
</script>

　　2.使用ng-repeat创建选择框

<select>
<option ng-repeat="x in names">{{x}}</option>
</select>

　　ng-repeat 有局限性，选择的值是一个字符串:

<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>

<h1>你选择的是: {{selectedSite}}</h1>

　　使用 ng-options 指令，选择的值是一个对象：

<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>

<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>

AngularJS HTML DOM

AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。

1.ng-disabled 指令

指令直接绑定应用程序数据到 HTML 的 disabled 属性

<div ng-app="" ng-init="mySwitch=true">

<p>
<button ng-disabled="mySwitch">点我!</button>
</p>

<p>
<input type="checkbox" ng-model="mySwitch">按钮
</p>

<p>
{{ mySwitch }}
</p>

</div>

ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。

ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容（value）

2.ng-show 指令

　　ng-show 指令隐藏或显示一个 HTML 元素。

　　ng-show 指令根据 value 的值来显示（隐藏）HTML 元素。

　　你可以使用表达式来计算布尔值（ true 或 false）:

<div ng-app="">
<p ng-show="true">我是可见的。</p>
<p ng-show="false">我是不可见的。</p>
</div>

div ng-app="" ng-init="hour=13"> <p ng-show="hour > 12">我是可见的。</p> </div>

3.ng-hide 指令

　　ng-hide 指令用于隐藏或显示 HTML 元素。

<div ng-app="">
<p ng-hide="true">我是不可见的。</p>
<p ng-hide="false">我是可见的。</p>
</div>

AngularJS 事件

AngularJS 有自己的 HTML 事件指令。

1.ng-click 指令

　　ng-click 指令定义了 AngularJS 点击事件。

<div ng-app="" ng-controller="myCtrl">
<button ng-click="count = count + 1">点我！</button>
<p>{{ count }}</p>
</div>

2.隐藏 HTML 元素

　　ng-hide 指令用于设置应用部分是否可见。

　　ng-hide="true" 设置 HTML 元素不可见。

　　ng-hide="false" 设置 HTML 元素可见。

<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">隐藏/显示</button>
<p ng-hide="myVar">
名: <input type="text" ng-model="firstName"><br>
姓名: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = false;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
});
</script>

3.显示 HTML 元素

　　ng-show 指令可用于设置应用中的一部分是否可见。

　　ng-show="false" 可以设置 HTML 元素 不可见。

　　ng-show="true" 可以以设置 HTML 元素可见。

<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">隐藏/显示</button>

<p ng-show="myVar">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = true;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    }
});
</script>

AngularJS 输入验证

<h2>Validation Example</h2>

<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

<p>用户名:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">用户名是必须的。</span>
  </span>
</p>

<p>邮箱:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
  <span ng-show="myForm.email.$error.email">非法的邮箱。</span>
  </span>
</p>

<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = 'john.doe@gmail.com';
});
</script>

posted @ 2017-03-17 10:19 Bryan-S 阅读(162) 评论(0) 收藏举报

刷新页面返回顶部

Bryan-S

angular 03-17

AngularJS 模块

1.ng-app 指令

2.创建模块 ng-model 指令

3.添加控制器

4.ng-repeat 指令

5.创建自定义的指令

限制使用

实例

5.ng-model 指令

双向绑定

6.验证用户输入

7.如何使用 Scope

7.1 Scope 作用范围

7.2根作用域

根作用域

AngularJS 控制器

1.ng-controller 指令定义了应用程序控制器

2.控制器方法

3外部文件中的控制器

其他实例

AngularJS 实例

AngularJS 过滤器

2.表达式中添加过滤器

3.向指令添加过滤器

4.过滤输入

AngularJS 服务(Service)

1.$http 服务

允许所有域名访问

2.$timeout 服务

3.$interval 服务

4.创建自定义服务

实例

AngularJS Select(选择框)

1.使用 ng-options 创建选择框

2.使用ng-repeat创建选择框

AngularJS HTML DOM

1.ng-disabled 指令

2.ng-show 指令

3.ng-hide 指令

AngularJS 事件

1.ng-click 指令

2.隐藏 HTML 元素

3.显示 HTML 元素

AngularJS 输入验证

公告

　　双向绑定

　　7.1 Scope 作用范围

　　7.2根作用域

　　根作用域　　　

　　1.ng-controller 指令定义了应用程序控制器

　　2.控制器方法

　　3外部文件中的控制器

　　其他实例

　　AngularJS 实例

　　2.表达式中添加过滤器

　　3.向指令添加过滤器　　　　

　　4.过滤输入

　　1.$http 服务

　　　允许所有域名访问

　　2.$timeout 服务

　　3.$interval 服务

　　4.创建自定义服务

　　1.使用 ng-options 创建选择框

　　2.使用ng-repeat创建选择框