AngularJs 学习

理解：要理解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  

       };

});