AngularJS基础知识的示例分析

这篇文章主要介绍了AngularJS基础知识的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

我们提供的服务有:成都做网站、成都网站设计、微信公众号开发、网站优化、网站认证、肥东ssl等。为近1000家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的肥东网站制作公司

指令

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 元素。


 

5、ng-controller:为应用程序添加控制器。请根据下面示例进行了解:


 {{name}}
 {{lastName}}


 名: 
 
 姓:   
 姓名: {{fullName()}}

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


 
 

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


 

服务

在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用;
AngularJS 中你可以创建自己的服务,或使用内建服务;
AngularJS 内建了30 多个服务;
自定义服务

app.service('hexafy', function() {
 this.myFunc = function (x) {
 return x.toString(16);
 }
});
var app = angular.module('Demo', []);
app.controller('customersCtrl', function($scope, $location) {
 $scope.myUrl = $location.absUrl();
});

常用内置服务

1、$http:是 AngularJS 中的一个核心服务。服务向服务器发送请求,应用响应服务器传送过来的数据;

var app = angular.module('Demo', []);
app.controller('DemoCtrl', function($scope, $http) {
 $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 中使用。

感谢你能够认真阅读完这篇文章,希望小编分享的“AngularJS基础知识的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


本文名称:AngularJS基础知识的示例分析
地址分享:http://lszwz.com/article/ijidhe.html

其他资讯

售后响应及时

7×24小时客服热线

数据备份

更安全、更高效、更稳定

价格公道精准

项目经理精准报价不弄虚作假

合作无风险

重合同讲信誉,无效全额退款