参考: http://www.runoob.com/angularjs/angularjs-directives.html
AngularJS 通过被称为 指令 的新属性来扩展 HTML。
AngularJS 通过内置的指令来为应用添加功能。
AngularJS 允许你自定义指令。
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
ng-model 指令用于绑定应用程序数据到 HTML 控制器(input,select,textarea)的值。
ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。
在大型的应用程序中,通常是把控制器存储在外部文件中。
AngularJS 过滤器,过滤器可以使用一个管道字符(|)添加到表达式和指令中。(同vue中的 |)
AngularJS 服务(Service): $location vs window.location、$http服务、$timeout 服务、$interval 服务
创建自定义服务器:
创建名为hexafy 的服务:
app.service('hexafy',function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
AngularJS XMLHttpRequest:$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。
// 简单的 GET 请求,可以改为 POST
$http({
method: 'GET',url: '/someUrl'
}).then(function successCallback(response) {
// 请求成功执行代码
},function errorCallback(response) {
// 请求失败执行代码
});
$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
$http.patch
AngularJS
AngularJS Select(选择框),AngularJS 可以使用数组或对象创建一个下拉列表选项。
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <p>选择一辆车:</p> <select ng-model="selectedCar" ng-options="x for (x,y) in cars"> </select> <h1>你选择的是: {{selectedCar.brand}}</h1> <h2>模型: {{selectedCar.model}}</h2> <h3>颜色: {{selectedCar.color}}</h3> <p>注意选中的值是一个对象。</p> </div> <script> var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope) { $scope.cars = { car01 : {brand : "Ford",model : "Mustang",color : "red"},car02 : {brand : "Fiat",model : "500",color : "white"},car03 : {brand : "Volvo",model : "XC90",color : "black"} } }); </script> </body> </html>
AngularJS 表格:ng-repeat 指令可以完美的显示表格。使用 orderBy,uppercase 过滤器,显示序号 ($index),使用 $even 和 $odd。
AngularJS sql :使用 PHP 从 MysqL 中获取数据。ASP.NET 中执行 sql 获取数据。
AngularJS 表单: AngularJS 表单是输入控件的集合,input 元素、select 元素、button 元素、textarea 元素
AngularJS 表单和控件可以验证输入的数据:
API 意为 Application Programming Interface(应用程序编程接口):
- angular.lowercase() 转换字符串为小写
- angular.uppercase() 转换字符串为大写
- angular.isString() 判断给定的对象是否为字符串,如果是返回 true。
- angular.isNumber() 判断给定的对象是否为数字,如果是返回 true。
AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架。
Bootstrap
你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 元素中添加如下代码:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
如果站点在国内,建议使用百度静态资源库的Bootstrap,代码如下:
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<html ng-app 为 <html> 元素定义一个应用(未命名)
<body ng-controller 为 <body> 元素定义一个控制器
<tr ng-repeat 循环 users 对象数组,每个 user 对象放在 <tr> 元素中。
<button ng-click 当点击 <button> 元素时调用函数 editUser()
<h3 ng-show 如果 edit = true 显示 <h3> 元素
<h3 ng-hide 如果 edit = true 隐藏 <h3> 元素
<input ng-model 为应用程序绑定 <input> 元素
<button ng-disabled 如果发生错误或者 incomplete = true 禁用 <button> 元素
AngularJS 依赖注入
AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入:
1. value 是一个简单的 javascript 对象,用于向控制器传递值(配置阶段)
2. factory是一个函数用于返回值。在 service 和 controller 需要时创建。通常我们使用 factory 函数来计算或返回值
3. service
4. provider AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。Provider 中提供了一个 factory 方法 get(),它用于返回 value/service/factory。
5. constant constant(常量)用来在配置阶段传递数值,注意这个常量在配置阶段是不可用的。
AngularJS 路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA)。
通常我们的URL形式为 http://runoob.com/first/page,但在单页Web应用中 AngularJS 通过 # + 标记 实现.
AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI,我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。
$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由,函数包含两个参数:
- 第一个参数是 URL 或者 URL 正则规则。
- 第二个参数是路由配置对象。