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"></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>选择的是：</P>
<p>选择的车型：</P>
<p>选择的颜色：</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>选择的是：</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=""></option>
</select>
<!--输出为：选择项的url对应的值-->
<p></p>
<!--无法输出选择项中site字段的值结果-->
<p></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></td>
<td></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代表是邮箱格式错误
