AngulerJS学习(一)

指令

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