未加星标

AngularJS学习第一篇 AngularJS基础知识

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

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是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: AngularJSHTML服务器CSS数据
分页:12
转载请注明
本文标题:AngularJS学习第一篇 AngularJS基础知识
本站链接:http://www.codesec.net/view/534073.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(42)