1、引入
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
或者下载下来
2、特点
AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。
- AngularJS 把应用程序数据绑定到 HTML 元素。
- AngularJS 可以克隆和重复 HTML 元素。
- AngularJS 可以隐藏和显示 HTML 元素。
- AngularJS 可以在 HTML 元素"背后"添加代码。
- AngularJS 支持输入验证。
3、AngularJs 指令
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
双向绑定
就是下面这种用控制器的
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
<h1>你输入了: {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
ng-bind 指令把应用程序变量 绑定到某个段落的 innerHTML。
ng-init 指令初始化 AngularJS 应用程序变量。（初始也可以是对象）
| HTML5 允许扩展的（自制的）属性，以 data- 开头。 AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。 |
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，与 ng-bind 指令差不多。差哪儿不知道。
ng-app 为空会自动搞 不为空需要控制器 和js代码
ng-repeat 指令会重复一个 HTML 元素：（ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。）
<li ng-repeat="x in names"> {{ x }} </li>
自定义指令
使用 .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>
你可以通过以下方式来调用指令：
- 元素名
- 属性
- 类名
- 注释
通过添加 restrict 属性限制你的指令只能通过特定的方式来调用。
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "A",
template : "<h1>自定义指令!</h1>"
};
});
restrict 值可以是以下几种:
E作为元素名使用A作为属性使用C作为类名使用M作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
AngularJS 控制器
- AngularJS 控制器是常规的 JavaScript 对象。
- ng-controller 指令定义了应用程序控制器。
- AngularJS 使用$scope 对象来调用控制器。
- 控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
-
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。创建属性然后model绑定属性
-
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
}); -
如上，控制器可以有函数 ，控制器可以在外部文件中定义引用。
668
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
