AngularJS学习第一篇，了解指令、过滤器等相关内容。

指令

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-

1、 ng-app：

定义了 AngularJS 应用程序的根元素；
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序；

<div ng-app="Demo"></div>

2、 ng-init：

为 AngularJS 应用程序定义了 初始值；
通常情况下，我们使用一个控制器或模块来代替它；

<div ng-app="Demo" ng-init="firstName='John'">
 <p>我的名字是：{{ firstName }}</p>
</div>

3、 ng-model：

绑定 HTML 元素 到应用程序数据
同时也可以： 
     为应用程序数据提供类型验证（number、email、required）； 
     为应用程序数据提供状态（invalid、dirty、touched、error）；
     为HTML 元素提供 CSS 类；
     绑定 HTML 元素到 HTML 表单；

<div ng-app="Demo" ng-init="firstName='John'">
 <p>姓名：<input type="text" ng-model="firstName"></p>
 <p>我的名字是：{{ firstName }}</p>
</div>

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

<div ng-app="Demo" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
 <ul>
   <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
   </li>
 </ul>
</div> 

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

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

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

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

<div ng-app="Demo" ng-controller="DemoCtrl">
 <select 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", "W3Cschool", "Taobao"];
});
</script>

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

<div ng-app="" ng-init="mySwitch=true">
 <button ng-disabled="mySwitch">点我!</button>
 <input type="checkbox" ng-model="mySwitch"/>按钮
 {{ mySwitch }}
</div> 

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

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

9、ng-click：指令定义了一个 AngularJS 单击事件。

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

10、ng-include：使用 ng-include 指令来包含 HTML 内容。

过滤器

使用一个管道字符（|）添加到表达式和指令中
常见表达式：
currency：格式化数字为货币格式；
filter：从数组项中选择一个子集；
lowercase：格式化字符串为小写；
orderBy：根据某个表达式排列数组；
uppercase：格式化字符串为大写；

<div ng-app="Demo" ng-controller="DemoCtrl">
 <p>姓名为 {{ lastName | uppercase }}</p>
</div>

<div ng-app="Demo" ng-controller="DemoCtrl">
 <ul>
 <li ng-repeat="x in names | orderBy:'country'">
  {{ x.name + ', ' + x.country }}
 </li>
 </ul>
</div>

服务

在 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 最常用的八种功能(基础知识)  # Angularjs 基础入门  # Angularjs基础知识及示例汇总  # AngularJS基础知识  # AngularJS实用基础知识_入门必备篇(推荐)  # 应用程序  # 我是  # 绑定  # 它可以  # 用在  # 内建  # 自己的  # 是一个  # 都有  # 相关内容  # 多个  # 在各个  # 可在  # 自定义  # 表单  # 创建一个  # 第一篇  # 单击  # 大家多多  # 中你 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 简历没回改：利用AI润色让你的文字更专业  香港服务器租用每月最低只需15元？  php打包exe后无法访问网络共享_共享权限设置方法【教程】  Laravel怎么配置S3云存储驱动_Laravel集成阿里云OSS或AWS S3存储桶【教程】  制作无缝贴图网站有哪些,3dmax无缝贴图怎么调？  利用 Google AI 进行 YouTube 视频 SEO 描述优化  Laravel Session怎么存储_Laravel Session驱动配置详解  Laravel如何使用withoutEvents方法临时禁用模型事件  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  Java垃圾回收器的方法和原理总结  如何使用 Go 正则表达式精准提取括号内首个纯字母标识符（忽略数字与嵌套）  php485函数参数是什么意思_php485各参数详细说明【介绍】  如何基于云服务器快速搭建网站及云盘系统？  Laravel怎么集成Vue.js_Laravel Mix配置Vue开发环境  javascript基于原型链的继承及call和apply函数用法分析  高端建站三要素：定制模板、企业官网与响应式设计优化  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  详解一款开源免费的.NET文档操作组件DocX（.NET组件介绍之一）  Laravel如何使用Scope本地作用域_Laravel模型常用查询逻辑封装技巧【手册】  Laravel如何实现邮箱地址验证功能_Laravel邮件验证流程与配置  文字头像制作网站推荐软件,醒图能自动配文字吗？  Laravel如何使用Telescope进行调试？（安装和使用教程）  Laravel如何实现全文搜索_Laravel Scout集成Algolia或Meilisearch教程  如何正确下载安装西数主机建站助手？  javascript如何操作浏览器历史记录_怎样实现无刷新导航  jimdo怎样用html5做选项卡_jimdo选项卡html5实现与切换效果【指南】  如何续费美橙建站之星域名及服务？  如何快速搭建FTP站点实现文件共享？  BootStrap整体框架之基础布局组件  网站优化排名时，需要考虑哪些问题呢？  如何快速生成可下载的建站源码工具？  Laravel怎么使用Session存储数据_Laravel会话管理与自定义驱动配置【详解】  Laravel API资源类怎么用_Laravel API Resource数据转换  千库网官网入口推荐 千库网设计创意平台入口  如何在宝塔面板创建新站点？  无锡营销型网站制作公司,无锡网选车牌流程？  Linux后台任务运行方法_nohup与&使用技巧【技巧】  php增删改查怎么学_零基础入门php数据库操作必知基础【教程】  Laravel如何使用Facades（门面）及其工作原理_Laravel门面模式与底层机制  Laravel Eloquent访问器与修改器是什么_Laravel Accessors & Mutators数据处理技巧  如何在搬瓦工VPS快速搭建网站？  高性能网站服务器配置指南：安全稳定与高效建站核心方案  如何在万网利用已有域名快速建站？  免费网站制作appp,免费制作app哪个平台好？  Laravel如何使用缓存系统提升性能_Laravel缓存驱动和应用优化方案  JavaScript如何实现类型判断_typeof和instanceof有什么区别  php嵌入式断网后怎么恢复_php检测网络重连并恢复硬件控制【操作】  使用C语言编写圣诞表白程序  Laravel如何处理CORS跨域问题_Laravel项目CORS配置与解决方案  详解免费开源的DotNet二维码操作组件ThoughtWorks.QRCode（.NET组件介绍之四）