AngularJS学习第一篇 AngularJS基础知识

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。