理解: 要理解AngularJS,第一件要做得事情就是要明白这是一个根本上就和jQuery不一样的工具。jQuery是一个库而AngularJS是一个框架。使用库是指,你的代码决定什么时候从库中调用一个特定的方法;使用框架则是,你实现了一些回调方法,到了特定的时候框架会去调用这些方法。
1.ng-app 指令定义一个 AngularJS 应用程序。
<div ng-app=""> <p>名字 : <input type="text" ng-model="name"></p> <h1>Hello { {name}}</h1> </div>
> hello + 输进去的内容
告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。
2.ng-model 指令把元素值(比如输入域的值)绑定到应用程序。 数据模型
把输入域的值绑定到应用程序变量 name。
model(模型、模特) 和 module (模块) 区分 看 2和9
3.ng-bind 指令把应用程序数据绑定到 HTML 视图。
把应用程序变量 name 绑定到某个段落的 innerHTML。
4.ng-init 指令初始化 AngularJS 应用程序变量
<div data-ng-app="" data-ng-init="firstName='John'">
<p>姓名为 <span data-ng-bind="firstName"></span></p>
</div> <1>.但是您可以使用 data-ng- 来让网页对 HTML5 有效。
<2>.初始化的值就是 john
5.{ { 表格式 }}
<p>我的第一个表达式: { { 5 + 5 }}</p>
>我的第一个表达式: 10
6.angular 应用
<div ng-app="myApp" ng-c>myCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: { {firstName + " " + lastName}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; }); </script>
<1>. angular.module('myApp', []); 模块定义应用
对应上面的 ng-app="myApp"
<2>. app.controller('myCtrl', function()); 控制器控制应用
对应上面的 ng-c>myCtrl"
7.ng-repeat 指令会重复一个 HTML 元素:
<div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <p>使用 ng-repeat 来循环数组</p> <ul> <li ng-repeat="x in names"> { { x }} </li> </ul> <div>
8.ng-show 属性返回
true
的情况下显示。 9. var app = angular.module("myApp", []);
[]表示 依赖的 模块!!
10.directive 指令 可以让代替html代码
var appModule = angular.module('app', []);
appModule.directive('hello', function() {
return {
restrict: 'E',
template: '<div>Hi there</div>',
replace: true
};
});