【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的后续内容
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
