angularjs学习笔记

作者: 扒酒说 | 来源:发表于2016-11-13 11:18 被阅读9次

angular学习资源整理
spark_learn
angularjs学习笔记
AngularJS学习笔记
angularjs 学习笔记
AngularJS学习笔记
Angularjs学习笔记
AngularJS学习笔记
AngularJS学习笔记
AngularJS学习笔记

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>