【AngularJS】—— 1 初识AngularJs

　　怀着激动与忐忑的心情，开始了学习AngularJS的旅程，好久以前就据说了这个前端框架，可是因为本身一直没有从事相关的工做，所以也没有进行学习。此次正好学习AngularJS，直接复习一下前端的知识。目前这里仍是弱点，慢慢深刻的学习。

　　AngularJS是Google的优秀的前端框架，目前已经应用于多个产品。

　　经过w3cschool.cc的学习，简单的了解了下它的使用方法，可是对于原理尚未理解。

　　

　　AngularJs相对于其余的框架来讲，有一下的特性：

　　1 MVVM

　　2 模块化

　　3 自动化双向数据绑定

　　4 语义化标签

　　5 依赖注入

　　因为不少概念都不了解，这些特性也没法理解。之后会经过学习，慢慢深刻研究。

　　

　　经过简单的学习，大体了解了AngularJS的语法以及使用，包括以下的内容：

　　1 表达式

　　支持普通的JS表达式，表达式经过{{}}使用。

<div ng-app="">
  <p>个人第一个表达式： {{ 5 + 5 }}</p>
</div>

 

　　2 指令

　　经过特定的标签指定，完成数据的绑定以及定义，抓取

<div ng-app="" ng-init="firstName='John'">
  <p>在输入框中尝试输入：</p>
  <p>姓名：<input type="text" ng-model="firstName"></p>
  <p>你输入的为： {{ firstName }}</p>
</div>

　　ng-app 定义AngularJS的应用程序

　　ng-init 初始化应用程序变量

　　ng-model 获取程序变量

　　ng-bind 绑定数据变量

 

　　3 控制器

　　经过控制器，控制应用程序。经过构造函数，完成方法以及变量的建立。

　　其中personController至关于构造方法函数，参数$scope代替指定的元素标签。

<div ng-app="" ng-controller="personController"> 名： <input type="text" ng-model="person.firstName"><br> 姓： <input type="text" ng-model="person.lastName"><br>
<br> 姓名： {{person.firstName + " " + person.lastName}} </div>

<script>
function personController($scope) { $scope.person = { firstName: "John", lastName: "Doe" }; } </script>

 

　　4 过滤器

　　经过过滤器，完成特定的排序或者过滤，大小写转换等等。

　　currency 　　数字转化成货币格式

<div ng-app="" ng-controller="costController"> 数量：<input type="number" ng-model="quantity"> 价格：<input type="number" ng-model="price">
<p>总价 = {{ (quantity * price) | currency }}</p>
</div>

　　filter　　从数据项中选定一个子集

<div ng-app="" ng-controller="namesController">
<p>输入过滤:</p>
<p><input type="text" ng-model="name"></p>

<ul>
  <li ng-repeat="x in names | filter:name | orderBy:'country'"> {{ (x.name | uppercase) + ', ' + x.country }} </li>
</ul>

</div>

　　orderBy　　排序

<div ng-app="" ng-controller="namesController">
<p>循环对象：</p>
<ul>
  <li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ', ' + x.country }} </li>
</ul>
<div>

　　lowercase uppercase　　大小写转换

<div ng-app="" ng-controller="personController">
<p>姓名为 {{ person.lastName | uppercase }}</p>
</div>

　　

　　5 http

　　经过http获取指定的文件内容

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

<script>
function customersController($scope,$http) {   $http.get("http://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php") .success(function(response) {$scope.names = response;}); } </script>

 

　　6 表格

　　经过ng-repeat实现表格展示

<div ng-app="" ng-controller="customersController"> 

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

</div>

 

　　7 html dom

　　经过DOM元素的属性，控制节点。例如：ng-disabled  ng-show

<div ng-app="">

<p>
<button ng-disabled="mySwitch">点我！</button>
</p>

<p>
<input type="checkbox" ng-model="mySwitch">按钮 </p>

</div>

　　

　　以上就是简单的学习内容，明天计划学习下w3cshcool.cc的后续内容