angularjs学习笔记
2016-11-13 本文已影响9人
扒酒说
angularjs简介
angularjs按照官方的说法，是对html的扩展，那么问题就来了
-
如何知道是一个angularjs程序？
ng-app 指令，可以在html的标签中指定 ng-app = “scae” ， 该指令有作用域，和所加的区域一致 -
如何进行逻辑&数据控制？
ng-controller 指令，是一个标准的javascript对象，需要进行初始化 -
来个具体例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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="personCtrl"> // 声明angularjs app，& 初始化
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
</body>
</html>
angularjs各种指令
各种原生指令，温故知新
- ng-app 指令初始化一个 AngularJS 应用程序。
- ng-init 指令初始化应用程序数据。
- ng-model 指令把元素值（比如输入域的值）绑定到应用程序
- ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
- Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。是一个对象，有可用的方法和属性，可应用在视图和控制器上。
- ng-controller AngularJS 控制器 控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。 - 过滤器，过滤器可以使用一个管道字符（|）添加到表达式和指令中。
| 指令 | 用途 |
|---|---|
| currency | 格式化数字为货币格式 |
| filter | 从数组项中选择一个子集 |
| lowercase | 格式化字符串为小写 |
| orderBy | 根据某个表达式排列数组 |
| uppercase | 格式化字符串为大写 |
- service 服务，创建自定义服务，可以写出很多通用的脚本
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
</script>
