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 相关文章推荐
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
jquery中each循环的简单回滚操作
May 05 jQuery
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 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 在文件指定行插入数据的代码
2010/05/08 PHP
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
详解jQuery中的事件
2016/12/14 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
python使用心得之获得github代码库列表
2014/06/25 Python
python中requests小技巧
2017/05/10 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
Python如何使用input函数获取输入
2020/08/06 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
大学生涯自我鉴定
2014/01/16 职场文书
食品工程专业求职信
2014/06/15 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
趣味运动会广播稿
2014/09/13 职场文书
民事代理词范文
2015/05/25 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python