angular框架

AngularJs

1.   表达式{{5+3}}

2.   指令  ng-app 指令初始化一个 AngularJS应用程序,ng-init指令初始化应用程序数据,ng-model指令把元素值（比如输入域的值）绑定到应用程序,ng-if。

3.   控制器ng-controller                                                                                                          <div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
varapp = angular.module('myApp', []);
app.controller('personCtrl',function($scope) {
   $scope.firstName = "John";
   $scope.lastName = "Doe";
   $scope.fullName = function() {
       return $scope.firstName + " " + $scope.lastName;
   }
});
</script>

4.     过滤器  |

currency

格式化数字为货币格式。

filter

从数组项中选择一个子集。

lowercase

格式化字符串为小写。

orderBy

根据某个表达式排列数组。

uppercase

格式化字符串为大写。

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | uppercase }}</p>

</div>

5.  http $http.get(url) 是用于读取服务器数据的函数。                                

     <div ng-app="myApp" ng-controller="customersCtrl"> 

<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
varapp = angular.module('myApp', []);
app.controller('customersCtrl',function($scope, $http) {
   $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
   .success(function(response) {$scope.names = response.records;});
});
</script>

6.  dom操作 ng-disabled不可用  ng-show显示 ng-hide隐藏

7.  事件ng-click

8.  表单验证 novalidate去除浏览器默认验证，required采用angular验证

属性

描述

$dirty

表单有填写记录

$valid

字段内容合法的

$invalid

字段内容是非法的

$pristine

表单没有填写记录

 

<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

<p>邮箱:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
  <span ng-show="myForm.email.$error.email">非法的邮箱。</span>
  </span>
</p>

<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty&& myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>
<script>
varapp = angular.module('myApp', []);
app.controller('validateCtrl',function($scope) {
   $scope.user = 'John Doe';
   $scope.email = '[e-mail]';
});
</script>

9.  Api函数

API

描述

angular.lowercase()

转换字符串为小写

angular.uppercase()

转换字符串为大写

angular.isString()

判断给定的对象是否为字符串，如果是返回 true。

angular.isNumber()

判断给定的对象是否为数字，如果是返回 true。

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

<script>
varapp = angular.module('myApp', []);
app.controller('myCtrl',function($scope) {
$scope.x1= "JOHN";
$scope.x2= angular.lowercase($scope.x1);
});
</script>

10.包含

<div class="container">
  <div ng-include="'myUsers_List.htm'"></div>
  <div ng-include="'myUsers_Form.htm'"></div>
</div>

 

11.  引用

当使用angular数据地址时，要用ng-src，ng-href，而不能使用src,href,因为angularjs是在html加载完才会加载。

imgng-src="{{phone.imageUrl}}">