angular学习小结

最新推荐文章于 2024-01-05 15:27:34 发布

原创最新推荐文章于 2024-01-05 15:27:34 发布 · 610 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular

技术资料专栏收录该内容

188 篇文章

订阅专栏

AngularJS 指令
本教程用到的 AngularJS 指令 :
指令
ng-app 定义应用程序的根元素。
ng-bind 绑定 HTML 元素到应用程序数据
ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符

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

<p ng-bind-html="myText"></p>

</div>

<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
    $scope.myText = "My name is: <h1>John Doe</h1>";
});
</script>

ng-bind-template 规定要使用模板替换的文本内容
ng-blur 规定 blur 事件的行为
ng-change 规定在内容改变时要执行的表达式
ng-checked 规定元素是否被选中
ng-class 指定 HTML 元素使用的 CSS 类
ng-class-even 类似 ng-class，但只在偶数行起作用
ng-class-odd 类似 ng-class，但只在奇数行起作用
ng-click 定义元素被点击时的行为
ng-cloak 在应用正要加载时防止其闪烁
ng-controller 定义应用的控制器对象

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

Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

ng-copy 规定拷贝事件的行为
ng-csp 修改内容的安全策略
ng-cut 规定剪切事件的行为
ng-dblclick 规定双击事件的行为
ng-disabled 规定一个元素是否被禁用

点击这里禁用所有表单输入域:<input type="checkbox" ng-model="all"><br>
<br>

<input type="text" ng-disabled="all">
<input type="radio" ng-disabled="all">
<select ng-disabled="all">
  <option>Female</option>
  <option>Male</option>  
</select>

ng-focus 规定聚焦事件的行为
ng-form 指定 HTML 表单继承控制器表单
ng-hide 隐藏或显示 HTML 元素
ng-href 为 the a 元素指定链接
ng-if 如果条件为 false 移除 HTML 元素

保留 HTML: <input type="checkbox" ng-model="myVar" ng-init="myVar = true">

<div ng-if="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
<hr>
</div>

<p>当复选框取消选中时 DIV 元素将移除。</p>
<p>当重新选中复选框，DIV 元素会重新显示。</p>

ng-include 在应用中包含 HTML 文件
ng-init 定义应用的初始化值
ng-jq 定义应用必须使用到的库，如：jQuery
ng-keydown 规定按下按键事件的行为
ng-keypress 规定按下按键事件的行为
ng-keyup 规定松开按键事件的行为
ng-list 将文本转换为列表 (数组)

<div ng-app="">

<input ng-model="customers" ng-list/>

<pre>{{customers}}</pre>

//定义和用法
//ng-list 指令将字符串转换为数组，并使用逗号分隔。
//ng-list 指令还有另外一种转换方式，如果你有字符串数组希望在输入框中显示，你可以在 input 上使用 ng-list 指令。
//ng-list 属性值定义了分隔符。
//语法
<element ng-list="separator"></element>
//<input>, <select>, <textarea>, 和其他可编辑元素支持该指令。
//参数值
//值 描述
//separator 可选,定义分隔符，默认为", "

ng-model 绑定 HTML 控制器的值到应用数据

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
    <h1>你输入了: {{name}}</h1>
</div>

ng-model-options 规定如何更新模型

//在失去焦点时绑定输入框的值到 scope 变量中：
<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="name" ng-model-options="{updateOn: 'blur'}">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>

//定义和用法
//ng-model-options 指令绑定了 HTML 表单元素到 scope 变量中
//你可以指定绑定数据触发的时间，或者指定等待多少毫秒，参数设置可以参考以下说明。
//语法
<element ng-model-options="option"></element>
//<input>, <select>, <textarea>, 元素支持该指令。
//参数值
//值 描述
//option    指定了绑定数据的规则，规则如下:

//{updateOn: 'event'}规则指定事件发生后绑定数据

//{debounce : 1000} 规定等待多少毫秒后绑定数据

//{allowInvalid : true|false} 规定是否需要验证后绑定数据

//{getterSetter : true|false} 规定是否作为 getters/setters 绑定到模型

//{timezone : '0100'} 规则是否使用时区

ng-mousedown 规定按下鼠标按键时的行为
ng-mouseenter 规定鼠标指针穿过元素时的行为
ng-mouseleave 规定鼠标指针离开元素时的行为
ng-mousemove 规定鼠标指针在指定的元素中移动时的行为
ng-mouseover 规定鼠标指针位于元素上方时的行为
ng-mouseup 规定当在元素上松开鼠标按钮时的行为
ng-non-bindable 规定元素或子元素不能绑定数据
ng-open 指定元素的 open 属性
ng-options 在列表中指定

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

<select ng-model="selectedName" ng-options="item for item in names">
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

ng-paste 规定粘贴事件的行为
ng-pluralize 根据本地化规则显示信息
ng-readonly 指定元素的 readonly 属性
ng-repeat 定义集合中每项数据的模板

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

<h1 ng-repeat="x in records">{{x}}</h1>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    "教程1",
    "教程2",
    "教程3",
    "教程4",
  ]
});
</script>

</body>

ng-selected 指定元素的 selected 属性

点击复选框选择 BMW 选项:
<input type="checkbox" ng-model="mySel">

<p>我喜欢的车:</p>

<select>
<option>Volvo</option>
<option ng-selected="mySel">BMW</option>
<option>Ford</option> 
</select>

ng-show 显示或隐藏 HTML 元素
ng-src 指定元素的 src 属性
ng-srcset 指定元素的 srcset 属性
ng-style 指定元素的 style 属性

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

<h1 ng-style="myObj">教程</h1>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.myObj = {
    "color" : "white",
    "background-color" : "coral",
    "font-size" : "60px",
    "padding" : "50px"
  }
});
</script>

</body>
//定义和用法
//ng-style 指令为 HTML 元素添加 style 属性。
//ng-style 属性值必须是对象，表达式返回的也是对象。
//对象由 CSS 属性和值组成，即 key=>value 对。

ng-submit 规定 onsubmit 事件发生时执行的表达式
ng-switch 规定显示或隐藏子元素的条件

<div ng-switch="myVar">
  <div ng-switch-when="runoob">
     <h1>菜鸟教程</h1>
     <p>欢迎访问菜鸟教程</p>
  </div>
  <div ng-switch-when="google">
     <h1>Google</h1>
     <p>欢迎访问Google</p>
  </div>
  <div ng-switch-when="taobao">
     <h1>淘宝</h1>
     <p>欢迎访问淘宝</p>
  </div>
  <div ng-switch-default>
     <h1>切换</h1>
     <p>选择不同选项显示对应的值。</p>
  </div>
</div>

ng-transclude 规定填充的目标位置
ng-value 规定 input 元素的值
过滤器解析 AngularJs 过滤器。
AngularJS 事件
AngularJS 支持以下事件:
ng-click
ng-dbl-click
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-keydown
ng-keyup
ng-keypress
ng-change
事件解析： Angular 事件。
AngularJS 验证属性
$dirty$ invalid
$error
验证解析：Angular 验证。

<h2>Validation Example</h2>

<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" 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>

<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = 'john.doe@gmail.com';
});
</script>
//AngularJS ng-model 指令用于绑定输入元素到模型中。
//模型对象有两个属性： user 和 email。
//我们使用了 ng-show指令， color:red 在邮件是 $dirty 或 $invalid 才显示。
//属性    描述
//$dirty   表单有填写记录
//$valid   字段内容合法的
//$invalid 字段内容是非法的
//$pristine    表单没有填写记录

AngularJS 全局 API
转换
API 描述
angular.lowercase() 将字符串转换为小写
angular.uppercase() 将字符串转换为大写
angular.copy() 数组或对象深度拷贝
angular.forEach() 对象或数组的迭代函数
比较
API 描述
angular.isArray() 如果引用的是数组返回 true
angular.isDate() 如果引用的是日期返回 true
angular.isDefined() 如果引用的已定义返回 true
angular.isElement() 如果引用的是 DOM 元素返回 true
angular.isFunction() 如果引用的是函数返回 true
angular.isNumber() 如果引用的是数字返回 true
angular.isObject() 如果引用的是对象返回 true
angular.isString() 如果引用的是字符串返回 true

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.x1 = "JOHN";
$scope.x2 = angular.isString($scope.x1);
});
</script>

angular.isUndefined() 如果引用的未定义返回 true
angular.equals() 如果两个对象相等返回 true
JSON
API 描述
angular.fromJson() 反序列化 JSON 字符串
angular.toJson() 序列化 JSON 字符串
基础
API 描述
angular.bootstrap() 手动启动 AngularJS
angular.element() 包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。
angular.module() 创建，注册或检索 AngularJS 模块