【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的后续内容

本文转自博客园xingoo的博客,原文链接:【AngularJS】—— 1 初识AngularJs,如需转载请自行联系原博主。
相关文章
|
前端开发 JavaScript 测试技术
angularjs初识
angularjs初识
71 0
|
存储 缓存 前端开发
Day 2: AngularJS —— 对AngularJS的初步认识
我们发现了比较有趣的系列文章《30天学习30种新技术》,准备翻译,一天一篇更新,年终礼包。以下是第二天技术的译文。
163 0
Day 2: AngularJS —— 对AngularJS的初步认识
|
Web App开发 JavaScript 前端开发
AngularJS
AngularJS 是比较新的技术,版本 1.0 是在 2012 年发布的。 AngularJS 是由 Google 的员工 Miško Hevery 从 2009 年开始着手开发。 这是一个非常好的构想,该项目目前已由 Google 正式支持,有一个全职的开发团队继续开发和维护这个库。
1097 0
|
Web App开发 前端开发 JavaScript
|
Web App开发 Java 测试技术
|
JSON JavaScript 前端开发
|
JavaScript 前端开发 容器
|
安全 缓存 前端开发
|
JavaScript 前端开发 缓存