angularJs的理解之two

xiaoxiao2021-02-28  88

1.

表达式中添加过滤器

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

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

uppercase 过滤器将字符串格式化为大写:

AngularJS 实例

< div   ng-app= "myApp"   ng-controller= "personCtrl" > < p >姓名为   {{ lastName | uppercase }} < /p > < /div > 2.

AngularJS 过滤器

AngularJS 过滤器可用于转换数据:

过滤器 描述 currency 格式化数字为货币格式。 filter 从数组项中选择一个子集。 lowercase 格式化字符串为小写。 orderBy 根据某个表达式排列数组。 uppercase 格式化字符串为大写。 3.在过滤器中使用服务 当你创建了自定义服务,并连接到你的应用上后,你可以在控制器,指令,过滤器或其他服务中使用它。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp"> 在过滤器中使用服务: <h1>{{255 | myFormat}}</h1> </div> <script> var app = angular.module('myApp', []); app.service('hexafy', function() {     this.myFunc = function (x) {         return x.toString(16);     } }); app.filter('myFormat',['hexafy', function(hexafy) {     return function(x) {         return hexafy.myFunc(x);     }; }]); </script> </body> </html> 4.angularJs之http < div ng-app = " myApp " ng-controller = " siteCtrl " > < ul > < li ng-repeat = " x in names " > {{ x.Name + ', ' + x.Country }} </ li > </ ul > </ div > < script > var app = angular.module('myApp', []);app.controller('siteCtrl', function($scope, $http) { $http.get("http://www.runoob.com/try/angularjs/data/sites.php") .success(function (response) {$scope.names = response.sites;});}); </ script > 尝试一下 »

应用解析:

注意:以上代码的 get 请求是本站的服务器,你不能直接拷贝到你本地运行,会存在跨域问题,解决办法就是将 Customers_JSON.php 的数据拷贝到你自己的服务器上,附:PHP Ajax 跨域问题最佳解决方案。

AngularJS 应用通过 ng-app 定义。应用在 <div> 中执行。

ng-controller 指令设置了 controller 对象 名。

函数 customersController 是一个标准的 JavaScript 对象构造器。

控制器对象有一个属性: $scope.names。

$http.get() 从web服务器上读取静态 JSON 数据。

服务器数据文件为:  http://www.runoob.com/try/angularjs/data/sites.php。

当从服务端载入 JSON 数据时,$scope.names 变为一个数组。

以上代码也可以用于读取数据库数据。 5.表单的理解:

HTML 表单

HTML 表单通常与 HTML 控件同时存在。


AngularJS 表单实例

form = {"firstName":"John","lastName":"Doe"}

master = {"firstName":"John","lastName":"Doe"}


应用程序代码

< div ng-app = " myApp " ng-controller = " formCtrl " > < form novalidate > First Name: < br > < input type = " text " ng-model = " user.firstName " > < br > Last Name: < br > < input type = " text " ng-model = " user.lastName " > < br > < br > < button ng-click = " reset() " > RESET </ button > </ form > < p > form = {{user}} </ p > < p > master = {{master}} </ p > </ div > < script > var app = angular.module('myApp', []);app.controller('formCtrl', function($scope) { $scope.master = {firstName: "John", lastName: "Doe"}; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset();}); </ script > 尝试一下 » novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。

实例解析

ng-app 指令定义了 AngularJS 应用。

ng-controller 指令定义了应用控制器。

ng-model 指令绑定了两个 input 元素到模型的 user 对象。

formCtrl 函数设置了 master 对象的初始值,并定义了 reset() 方法。

reset() 方法设置了 user 对象等于 master 对象。

ng-click 指令调用了 reset() 方法,且在点击按钮时调用。

novalidate 属性在应用中不是必须的,但是你需要在 AngularJS 表单中使用,用于重写标准的 HTML5 验证。

6.angularJs 之事件

隐藏 HTML 元素

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

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

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

AngularJS 实例

< 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 > 尝试一下 »

应用解析:

第一部分 personController与控制器章节类似。

应用有一个默认属性: $scope.myVar = false;

ng-hide 指令设置 <p>元素及两个输入域是否可见, 根据 myVar 的值 (true 或 false) 来设置是否可见。

toggle() 函数用于切换 myVar 变量的值(true 和 false)。

ng-hide="true" 让元素 不可见。

7.angularJs之应用:

总结 - 它是如何工作的呢?

ng-app 指令位于应用的根元素下。

对于单页Web应用(single page web application,SPA),应用的根通常为 <html> 元素。

一个或多个 ng-controller 指令定义了应用的控制器。每个控制器有他自己的作用域:: 定义的 HTML 元素。

AngularJS 在 HTML DOMContentLoaded 事件中自动开始。如果找到 ng-app 指令 , AngularJS 载入指令中的模块,并将 ng-app 作为应用的根进行编译。

应用的根可以是整个页面,或者页面的一小部分,如果是一小部分会更快编译和执行。

8.angularJs之Sql

使用 PHP 从 MySQL 中获取数据

AngularJS 实例

< div   ng-app= "myApp"   ng-controller= "customersCtrl" >   < table >     < tr   ng-repeat= "x in names" >       < td > {{ x.Name }} < /td >       < td > {{ x.Country }} < /td >     < /tr > < /table > < /div > < script > var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) {     $http.get("http://www.runoob.com/try/angularjs/data/Customers_MySQL.php")     .success(function (response) {$scope.names = response.records;}); }); < /script >
转载请注明原文地址: https://www.6miu.com/read-49098.html

最新回复(0)