（二）angular.js

<div ng-app="" ng-init="firstName='John';lastName='Doe'"><p>姓名: {{ firstName + " " + lastName }}</p></div>

一、标签了解

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。

1、ng-app=" "  指令初始化一个 AngularJS 应用程序。

2、ng-init="变量=值;变量='值'"  初始化变量的值，有多个变量时，中间用分号隔开；指令初始化应用程序数据

3、ng-model="变量"  定义变量名；指令把元素值（比如输入域的值）绑定到应用程序。

4、ng-bind="变量"  绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值，比如：{{变量}}。

（一）表达式

ng-app:是一个特殊的指令，在一个HTML文档中只出现一次。如果出现多次也只有第一个生效，告诉子元素该指令属于angular.js

1、数字

<div ng-app="" ng-init="first=010;tow=55">    <p>计算出的结果：{{first * tow}}</p></div>

计算出的结果：550

2、字符串

<div ng-app="" ng-init="firstName='John';lastName='Doe'">   <p>姓名: {{ firstName + " " + lastName }}</p></div>

姓名: John Doe

（二）指令

1、ng-model:数据绑定，把数据绑定到应用程序中

<div ng-app="" ng-init="firstname='FULX'"><p>在输入框中输入这世界最帅人的名字</p><input type="text" ng-model="firstname"/><p>录入名字：{{firstname}}</p></div>

2、ng-repeat：重复一个元素的HTMl

<div ng-app="" ng-init="javas=['spring','mybatis','JDBC']">    <ul><li ng-repeat=" x in javas">{{x}}</li></ul></div>

结果：

spring
mybatis
JDBC

循环一个数据

<div ng-app="" ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]"> <p>循环对象：</p><ul>  <li ng-repeat="x    in names">    {{ x.name + ', ' + x.country }}  </li></ul> </div>

3、数据流双向绑定

<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>

三、angular scope(作用域)

概念：是一个javascript对象，带有属性和方法，这些属性和方法在视图和控制器中是可以使用。

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。

scope简述：

视图（view）：即HTML.

模型(model):视图中可以使用到的数据。

控制器（controller）:即javascript函数，可以添加个修改属性。

<div ng-app="myApp" ng-controller="myCtrl"><input ng-model="name"><h1>{{greeting}}</h1><button ng-click='sayHello()'>点我</button></div><script>    //应用于视图HTML和控制室modelvar app = angular.module('myApp',[]);app.controller('myCtrl',function($scope){$scope.name = '符亮星';//设置属性    $scope.sayHello = function(){$scope.greeting = '我就是要设置';};});</script>

四、angular 控制器

作用：也就是控制应用程序的数据

额外：应用程序是由ng-app去定义的

ng-controller='ff';属性是angular指令，用于定义一个控制器。

angularJS通过$scope对象来调用控制器的，

1、

AngularJS 控制器

<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><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {    $scope.firstName = "John";    $scope.lastName = "Doe";});</script>

应用解析：AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。myCtrl 函数是一个 JavaScript 函数。AngularJS 使用$scope 对象来调用控制器。在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。控制器在作用域中创建了两个属性 (firstName 和 lastName)。ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

2、控制器方法