AngularJS学习第一篇 AngularJS基础知识


Posted in Javascript onFebruary 13, 2017

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 中使用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 陷阱 window全局对象
Nov 26 Javascript
Firefox window.close()的使用注意事项
Apr 11 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
jquery获取select,option所有的value和text的实例
Mar 06 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
Angular4.0动画操作实例详解
May 10 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
js实现全选和全不选
Jul 28 Javascript
详解Javascript中DOM的范围
Feb 13 #Javascript
JS简单判断函数是否存在的方法
Feb 13 #Javascript
浅谈js中的变量名和函数名重名
Feb 13 #Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 #Javascript
js实现打地鼠小游戏
Feb 13 #Javascript
canvas实现钟表效果
Feb 13 #Javascript
深入理解Javascript箭头函数中的this
Feb 13 #Javascript
You might like
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
python语言使用技巧分享
2016/05/31 Python
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
python的exec、eval使用分析
2017/12/11 Python
python selenium 弹出框处理的实现
2019/02/26 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
Python实现数字的格式化输出
2020/08/01 Python
Python 发送邮件方法总结
2020/08/10 Python
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
信息管理专业学生自荐信格式
2013/09/22 职场文书
售后服务科岗位职责范文
2013/11/13 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
学校与家长安全责任书
2014/07/23 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
旷工检讨书1000字
2015/01/01 职场文书
古诗之感恩老师
2019/10/24 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书