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 相关文章推荐
最近项目写了一些js,水平有待提高
Jan 31 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 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 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
PHP开发过程中常用函数收藏
2009/12/14 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
详解JS函数重载
2014/12/04 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
Python合并多个装饰器小技巧
2015/04/28 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
学生会主席事迹材料
2014/01/28 职场文书
陈欧的广告词
2014/03/18 职场文书
企业宣传稿范文
2015/07/23 职场文书
党校团干班培训心得体会
2016/01/06 职场文书