angular.js

Angular.js
ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。最外层的div设置ng-app=""

ng-model 指令把输入域的值绑定到应用程序变量 name。

<input type="text" ng-model="name"/>

<p>{{name}}</p>

当输入框输入什么内容下面的p就显示什么

ng-bind :这个标签里html的内容绑定到了那个内容，显示的html的内容就是这个ng-bind的内容
  <p>姓名为 <span ng-bind="firstName"></span></p>和  <p>姓名为 {{firstName}}</p>是一样的效果

ng-init:  初始化变量。这样就可以直接在html的标签里定义变量啦。

         <div ng-app="" ng-init="quantity=1;cost=5">

        <p>总价: {{ quantity * cost }}</p>  --结果是1*5=5

AngularJS 数组

<div ng-app=""  ng-init="img=[2,5,9,0]">

<p ng-bind="img[2]"></p>

</div>

---输出的是5

对象

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>姓为 <span ng-bind="person.lastName"></span></p>

</div>

ng-repeat 重复一个 HTML 元素

<div ng-app=""  ng-init="names=['a','b','c','d']"  >

<ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>

</div>

---结果就是遍历了names这个数组并输出

ng-controller 定义了控制器。

<divng-app="myApp"ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>

var app = angular.module('myApp', [])
app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});

表达式写在双大括号内：{{ expression }}。

<div ng-app=""  ng-init="firstName='John'">
  <p>名字 : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>             ---输出的是你写的那个输入框的内容
    <div ng-bind=”firstName”></div>   ---输出的是John

</div>

AngularJS Scope(作用域)

scope是应用在js和html之间的纽带，它是一个对象有自己的对象和方法.可以作为一个参数参数传递。

AngularJS 控制器

控制里面的数据，我感觉就相当于把ng-init里面的数据写在了这个控制器的js里面。

<div ng-app="myApp"ng-controller="myCtrl">
   名: <input type="text" ng-model="firstName"><br>
   姓: <input type="text" ng-model="lastName"><br>
<br>
   姓名: {{firstName + " " + lastName}}
</div>

var app=anglar.module('myApp',[]);

app.controller('myCtrl',function($scope){

    $scope.firstName = "John";
    $scope.lastName = "Doe";

})