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 相关文章推荐
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
批量实现面向对象的实例代码
Jul 01 Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 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 function用法如何递归及return和echo区别
2014/03/07 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
pandas计数 value_counts()的使用
2019/06/24 Python
django页面跳转问题及注意事项
2019/07/18 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
python实现图像外边界跟踪操作
2020/07/13 Python
python 实现IP子网计算
2021/02/18 Python
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
Java程序员面试90题
2013/10/19 面试题
公证委托书大全
2014/04/04 职场文书
一年级学生评语大全
2014/04/21 职场文书
个人自荐书怎么写
2015/03/26 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
golang中字符串MD5生成方式总结
2021/07/04 Golang