AngularJS学习笔记
来源:互联网 发布:java 网络请求框架 编辑:程序博客网 时间:2024/06/05 08:50
1、AngularJS 表达式
AngularJS 表达式写在双大括号内:{{ expression }},把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙,很像 JavaScript 表达式:它们可以包含文字、运算符和变量。
AngularJS 将在表达式书写的位置"输出"数据。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
2、AngularJS 常见指令
1、ng-app=" " 定义angularJS的使用范围;
2、ng-init="变量=值;变量='值'" 初始化变量的值,有多个变量时,中间用分号隔开;
3、ng-model="变量" 定义变量名;把元素值(比如输入域的值)绑定到应用程序。
4、ng-bind="变量" 绑定变量名,获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值,比如:{{变量}}。
3、创建自定义的指令
除了 AngularJS 内置的指令外,还可以创建自定义指令。可以使用 .directive 函数来添加自定义的指令。要调用自定义指令,HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
4、restrict:限制自定义指令只能通过特定的方式来调用。
E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用
5、Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。Scope 是一个对象,有可用的方法和属性,可应用在视图和控制器上。
6、根作用域
所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。
7、过滤器可以使用一个管道字符(|)添加到表达式和指令中。
AngularJS 过滤器可用于转换数据:
currency
格式化数字为货币格式。
filter
从数组项中选择一个子集。
lowercase
格式化字符串为小写。
orderBy
根据某个表达式排列数组。
uppercase
格式化字符串为大写。
8、自定义过滤器
以下实例自定义一个过滤器 reverse,将字符串反转:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope)
{
$scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
return function(text) {
return text.split("").reverse().join("");
}
});
9、什么是服务?
在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。
有个 $location 服务,它可以返回当前页面的 URL 地址。
$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求,应用响应服务器传送过来的数据。
- AngularJs学习笔记--Forms
- AngularJS入门学习笔记
- AngularJS学习笔记
- AngularJS 学习笔记(邹业盛)
- AngularJs学习笔记--bootstrap
- AngularJs学习笔记--directive
- AngularJs学习笔记--directive
- AngularJs学习笔记--bootstrap
- AngularJs学习笔记--expression
- AngularJs学习笔记--Forms
- AngularJs学习笔记--Modules
- AngularJs学习笔记--Scope
- angularjs学习笔记一
- angularJS学习笔记二
- angularjs学习笔记
- AngularJS学习笔记
- AngularJS学习笔记
- AngularJS学习笔记
- Eclipse中创建Maven项目时,报错提示:“a pom xml file already exists in the destination folder ”
- 第十八周:[Leetcode]240. Search a 2D Matrix II
- weblogic集群代理报错
- iOS UIScrollView内部子控件添加约束的注意点
- jQuery笔记
- AngularJS学习笔记
- JavaScript入门
- Winform 添加 MediaPlayer的简单操作
- 最近小结
- Custom Icon——自定义图标
- 使用PHPExcel读取写入Excel文件数据
- a w e a s d f
- 笨办法10那是什么?-转义
- Linux网络编程之select服务器