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代表是邮箱格式错误