扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍了AngularJS基础知识的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都创新互联公司于2013年创立,先为类乌齐等服务建站,类乌齐等地企业,进行企业商务咨询服务。为类乌齐企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。指令
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}}
名:
姓:
姓名: {{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 }}
- {{ x.name + ', ' + x.country }}
服务
在 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基础知识的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持创新互联建站,关注创新互联网站建设公司行业资讯频道,更多相关知识等着你来学习!
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流