菜单

AngularJS底工知识_AngularJS_脚本之家

2020年3月17日 - 澳门太阳娱乐手机登录

AngularJS学习第一篇,精晓指令、过滤器等有关内容。

指令

AngularJS 指令是扩充的 HTML 属性,带有前缀 ng-

1、 ng-app:

概念了 AngularJS 应用程序的根成分;ng-app
指令在网页加载完结时会自动指导应用程序;

澳门太阳娱乐手机登录,2、 ng-init:

为 AngularJS 应用程序定义了
开端值;经常景况下,大家采纳多个调整器或模块来代表它;

 我的名字是:{{ firstName }}

3、 ng-model:

绑定 HTML 元素 到应用程序数据同一时候也足以:
为应用程序数据提供项目验证(number、email、required);
为应用程序数据提供情形(invalid、dirty、touched、error); 为HTML
成分提供 CSS 类; 绑定 HTML 成分到 HTML 表单;

 姓名: 我的名字是:{{ firstName }}

4、ng-repeat:对于群集中的各样项会 克隆一回 HTML 成分。

   {{ x.name + ', ' + x.country }}   

5、ng-controller:为应用程序增加调节器。请依据下边示例进行询问:

 {{name}} {{lastName}} // $scope表示作用区域,指向当前controller // 每个应用都有一个$rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。用 rootscope 定义的值,可以在各个 controller 中使用。 var app = angular.module; app.controller('DemoCtrl', function { $scope.name = "Volvo"; $rootScope.lastName = "Tom"; });

 名:  
 姓:  
 姓名: {{fullName()}} var app = angular.module; app.controller('personCtrl', function { $scope.firstName = "John"; $scope.lastName = "Doe"; $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; } });

6、ng-options:成立贰个下拉列表,列表项通过对象和数组循环输出。

  var app = angular.module;app.controller('myCtrl', function { $scope.names = ["Google", "W3Cschool", "Taobao"];});

7、ng-disabled:命令直接绑定应用程序数据到 HTML 的 disabled 属性。

 点我! 按钮 {{ mySwitch }} 

8、ng-show:命令遮盖或显示叁个 HTML 成分。

 我是可见的。 我是不可见的。 

9、ng-click:一声令下定义了三个 AngularJS 单击事件。

 点我! {{ count }}

10、ng-include:利用 ng-include 指令来含有 HTML 内容。

过滤器

动用多少个管道字符增加到表达式和指令中多如牛毛表明式:
currency:格式化数字为货币格式;filter:从数组项中甄选贰个子集;lowercase:格式化字符串为小写;orderBy:依据有些表达式排列数组;uppercase:格式化字符串为大写;

 姓名为 {{ lastName | uppercase }}

   {{ x.name + ', ' + x.country }}  

服务

在 AngularJS 中,服务是叁个函数或对象,可在您的 AngularJS
应用中应用;AngularJS 中您能够创制和谐的劳动,或使用内建服务;AngularJS
内建了30 多少个劳务;自定义服务

app.service { this.myFunc = function  { return x.toString;

var app = angular.module;app.controller('customersCtrl', function { $scope.myUrl = $location.absUrl; 

常用内置服务

1、$http:是 AngularJS
中的多少个着力服务。服务向服务器发送央浼,应用响应服务器传送过来的数额;

var app = angular.module;app.controller('DemoCtrl', function { $http({ url:'data.json', method:'GET', params:{ 'username':'tan' } }).success(function(data,header,config,status){ //响应成功 }).error(function(data,header,config,status){ //处理响应失败 });});

2、$location:服务对应了 window.location 函数。

3、$timeout:服务对应了 window.setTimeout 函数。

4、$interval:服务对应了 window.setInterval 函数。

5、$rootScope:它能够功用在 ng-app 指令饱含的具备 HTML 成分中。用
rootscope 定义的值,能够在逐个 controller 中使用。

上述便是本文的全部内容,希望对大家的就学抱有利于,也希望我们多多辅助脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图