AngularJS入门笔记

AngularJS 入门学习[1]

主要参考：https://www.w3cschool.cn/angularjs/angularjs-tutorial.html

版本是1.4的

服务（Service）

在 AngularJS 中，服务是一个函数或对象，可在你的AngularJS 应用中使用。
AngularJS内置了30多个服务

1. $location 服务

它可以返回当前页面的 URL 地址,location 服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义。
AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

在模块定义中 [] 参数用于定义模块的依赖关系。
中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。

2. $http 服务

$http 是 AngularJS应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

向后台回去数据还是挺方便的

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});

3. $timeout 服务

AngularJS $timeout 服务对应了JS 中window.setTimeout 函数，用法相同

// 延迟两秒
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

4.$interval 服务

AngularJS $interval 服务对应了 JS window.setInterval 函数

// 每个一秒重新显示时间，模拟时间
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

5.可以自定义服务

当你创建了自定义服务，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服务中使用它

// 在控制器中使用自定义的服务
var app = angular.module("myApp", []);
// 定义一个名为hexafy 的服务，用于转换16进制数
app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

// 直接传入函数使用
app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});

// 在过滤器中使用自定义服务，就是自定义过滤器
<div ng-app="myApp" ng-controller="myCtrl">
    <ul>
        <li ng-repeat="item in nums">{{item | myFormat}}</li>
    </ul
    <!--输出为 d  df  e9-->
</div>

<script>
// 
var app = angular.module('myApp', []);

//先定义一个名为hexafy的服务
app.service('hexafy', function () {
    this.func = function (x) {
        return x.toString(16);
    };
});

// 定义过名为myFormat的过滤器
app.filter('myFormat', function(hexify) {
    return function(x) {
        return hexify.func(x);
    };
});

app.controller('myCtrl', function($scope) {
    $scope.nums = [13,223,233];
});
</script>

Select(选择框)

使用ng-options指令来创建下拉列表

使用 对象 作为 数据源

x 为键(key),y 为值(value),代码中ng-options指令中的第一个x代表使用对象中的键(key)作为展示。如果想使用值(value)中的值作为展示，可以写成ng-options=”y for (x, y) in cars”，如果key-value中的value是一个对象，还可以使用ng-options=”y.xxx for (x, y) in cars” 将value对象中的某一个属性值展示出来。

<div ng-app="myApp" ng-controller="myCtrl">

<!--这里的selectedItem是指下拉框选择的值（value）-->
<select ng-model="selectedItem" ng-options="x for (x,y) in cars">
</select>
<!--如果selectedItem是一个对象-->
<p>选择的是：{{selectedItem.brand}}</P>
<p>选择的车型：{{selectedItem.model}}</P>
<p>选择的颜色：{{selectedItem.color}}</P>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    //数据源是一个对象，value值也是一个对象
   $scope.cars = {
        car01 : {brand : "Ford", model : "Mustang", color : "red"},
        car02 : {brand : "Fiat", model : "500", color : "white"},
        car03 : {brand : "Volvo", model : "XC90", color : "black"}
    };
});
</script>

当数据源是一个对象数组时：

用法差不多，当是简单数组时就更简单了

<select ng-model="selectedItem" ng-options="x.site for x in sites">
</select>
<p>选择的是：{{selectedItem.url}}</p>

//数据源是一个对象数组
$scope.sites = [
    {site : "Google", url : "http://www.google.com"},
    {site : "W3CSchool", url : "http://www.w3cschool.cn"},
    {site : "Taobao", url : "http://www.taobao.com"}
];

下拉框也可以使用ng-repeat实现

不过没有使用ng-options指令灵活，使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。当value值是一个对象是，ng-repeat就无法获取对象中的所有内容了

<select ng-model="selectedItem">
    <option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
<!--输出为：选择项的url对应的值-->
<p>{{selectedItem}}</p>
<!--无法输出选择项中site字段的值结果-->
<p>{{selectedItem.site}}</p>

$scope.sites = [
    {site : "Google", url : "http://www.google.com"},
    {site : "W3CSchool", url : "http://www.w3cschool.cn"},
    {site : "Taobao", url : "http://www.taobao.com"}
];

所以还是使用ng-options吧

表格

其实就是使用ng-repeat循环
使用orderBy过滤器可以对表格进行排序，代码中是按照返回的Country字段进行排序

<div ng-app="myApp" ng-controller="myContr">
    <table>
      <tr ng-repeat="x in names | orderBy : 'Country'">
        <td>{{ x.Name }}</td>
        <td>{{ x.Country }}</td>
      </tr>
    </table>
</div>

<script>
var app = angular.module("myApp", []);
app.controller('myContr', function ($scope, $http) {
    $http.get("xxxxxxx")
  .success(function(response) {$scope.names = response;});
});
</script>

HTML DOM

ng-disabled 和 ng-show指令

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性，值为false时可用，为true时禁止
ng-show 指令隐藏或显示一个 HTML 元素，为true时显示，为false时隐藏
ng-hide 指令用于设置应用的一部分 不可见。与ng-show相反

<div ng-app="">
    <p>
        <button ng-disabled="mySwitch">点我！</button>
    </p>
    <p ng-show="mySwitch">我是可见的</p>
    <p>
        <input type="checkbox" ng-model="mySwitch">按钮
    </p>
</div>

ng-model 指令绑定 “mySwitch” 到 HTML input checkbox 元素的内容(value)，勾选mySwitch为true，否则mySwitch为false。
ng-show和ng-disabled指令都可以使用一个评估为 true or false 的表达式（比如 ng-show=”hour < 12”）来控制。

HTML 事件

ng-click 指令定义了一个 AngularJS 单击事件。

使用也很简单

<button ng-click="toggle()">隐藏/显示</button>
//在controller中
app.controller("myController",function($scope) {
    $scope.toggle = function () {
        ...
    };
});

模块

通过 AngularJS 的 angular.module 函数来创建模块
使用 ng-controller 指令来添加应用的控制器
可以在 AngularJS 应用中添加控制器，指令，过滤器等

可以使用指令构造器创建指令
创建一个名为myDirective的指令

<div ng-app="myApp" myDirective></div>
<!--输出：我是指令构造器创建的!-->

var app = angular.module("myApp", []);

app.directive("myDirective", function() {
    return {
        template : "我是指令构造器创建的!"
    };
});

AngularJS 表单

HTML 属性 novalidate 用于禁用浏览器的默认验证。

<p>用户名:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">用户名是必须的。</span>
  </span>
</p>

<p>邮箱:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
  <span ng-show="myForm.email.$error.email">非法的邮箱。</span>
  </span>
</p>

属性	描述
$dirty	表单有填写记录
$valid	字段内容合法的
$invalid	字段内容是非法的
$pristine	表单没有填写记录

$error.required代表是必填错误$error.email代表是邮箱格式错误