AngularJs 1.X 测试板

---By mike652638, Nov. 2016    


第一节

第二节

第三节

第四节

第五节

第六节

第七节

第八节

第九节

第十节

第十一节

第十二节

第一节  ng-app 与 ng-model 指令


输入姓名:

生成问候: Hi {{userName}}, how are you ?

知识点:
1.1 ng-app=""初始化angularJs, 定义了根元素;
1.2 ng-init可以定义初始值, ng-model="x"绑定数据;
1.3 {{x}}表达式或ng-bind="x"指令引用数据;

第二节  angular.module 模型

产品单价:   USD/pc
产品数量:   pcs
计总价值:   {{prc * qty}}  USD   人民币:     RMB

知识点:
2.1 ng-app="myApp2"结合下面var app = angular.module('myApp2', []);定义ng控制模块;
2.2 ng-controller="myCtrl"结合下面app.controller("myCtrl", function(){});定义ng控制器;
2.3 ng-model="prc"结合function($scope){$scope.prc=10}传参, 双向绑定数据;

第三节  ng 验证用户输入及状态

输入邮箱:

邮箱输入值是否合法 : {{myForm.myAddress.$valid}}
输入框数据是否改变 : {{myForm.myAddress.$dirty}}
是否有过(触屏)点击 : {{myForm.myAddress.$touched}}

知识点:
3.1 ng可用于验证输入数据的有效性及状态改变;
3.2 $valid, $dirty, $touched分别用于验证数据是否改变, 是否有效及是否点击;

第四节  $scope作用域及传参

姓名列表:
  • {{firstName}} {{lastName}}

知识点:
4.1 $scope 模型是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用;
4.2 $rootScope可以作用在 ng-app 指令包含的所有 HTML 元素中, 可以在各个 controller 中使用;
4.3 $scope属性可以是数组或对象, 结合ng-repeat="x in $scope.attribute"循环选择。

第五节  ng-controller控制器

姓: {{firstName}}  名: {{lastName}}  姓名: {{fullName()}}

知识点:
5.1 ng-controller="myCtrl"属性是一个JS对象, 定义一个控制器;
5.2 myCtrl是一个JS函数, 由JS对象的构建函数创建;
5.3 $scope作用域是HTML(视图)和JavaScript(控制器)的桥梁, 用来调用控制器, 包含属性和方法;
5.4 实际项目中, 控制器可以存储在外部.js文件中, 通过script src=""调用。

第六节  filter 过滤器

  • {{ (x.name + " from " + (x.country | uppercase))}}
知识点:
6.1 filter 过滤器包含格式化转换器(mike自命名)及筛选器(mike自命名), 通过管道符 | 添加;
6.2 格式化转换器包含 |uppercase 大写 |lowercase 小写 |currency 美元货币 等, 可直接用于表达式中;
6.3 筛选器包含|orderBy: ""可以按规则排序, |filter: x, 与ng-model="x" 结合可对结果进行筛选;

第七节  AngularJs Service $location服务

当前页面地址为:

{{myUrl}}

知识点:
7.1 在 AngularJS 中,服务是一个函数或对象,可在 AngularJS 应用中使用;
7.2 AngularJs内置$location, $http等30项服务, 也可以自定义服务;
7.3 本例应用了$location服务, 返回当前页面地址, 且能双向绑定;

第八节  AngularJs Service $http服务

从远程服务器读取到的数据:

  • {{x.Name + ": " + x.Country}}

知识点:
8.1 $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据;
8.2 $http.get() 可从web服务器上读取静态 JSON 数据, $http.get(url) 是用于读取服务器数据的函数;
8.3 get 请求的是本站服务器,会存在跨域问题,JSON 数据文件必须与本html文件处在同一服务器上。

第九节  AngularJs Service $select ng-options 选择框

网站选择框:

你当前选择的网站是: {{selectedWebs.site}}

对应网址为: {{selectedWebs.url}}

知识点:
9.1 在html select标签中应用"ng-options=x.key for x in variables"结合控制器中"$scope.variables=[]"定义的数组来做循环选择;
9.2 ng-model="selectedItem"与{{selectedItem.key}}结合来显示选择结果;

第十节  AngularJs table ng-repeat 表格

应用AngularJs table ng-repeat 生成的表格
No. Name Country City
{{$index +1}} {{x.Name}} {{x.Country | uppercase}} {{x.City}}
Coded by Mike, Inspired by Runoob AngularJs Lesson

知识点:
10.1 Html table tr 中应用ng-repeat = "x in variables" 与控制器中"$scope.variables"循环生成各行;
10.2 Html table td应用{{variables.key}}生成单元格数据;
10.3 结合CSS Style美化单元格, 加边框, 奇偶行背景颜色等;

第十一节  AngularJs click show hide events 事件



姓: 名: 姓名: {{user.firstName + " " + user.lastName}}

知识点:
11.1 Html中ng-click="func()"结合控制器中'$scope.func=function(){}'定义点击事件;
11.2 ng-show及ng-hide为自带的隐藏/显示指令, 拥有属性true或者false;
11.3 function(){$scope.var=!$scope.var}表示将var属性转为其对立面, 如true变为false;

第十二节  AngularJs 2.x 期待中 ...

与AngularJs相比, AngularJs2 性能上得到显著的提高;

虽然是 AngularJs 1.x 的升级版本,但AngularJs 2.x版本包含了很多颠覆性的变化, 甚至可以说是推倒重来,几乎是一种全新的框架, 需要重新学习;

由于目前各种环境(浏览器或 Node)暂不支持ES6的代码,所以需要一些shim和polyfill(IE)让ES6写的代码能够转化为ES5形式才可以正常运行在浏览器中;

本人初学AngularJs时就考虑过AngularJs1.x VS. 2.x, 学哪个版本, 要不要直接跳过1.x而直接学习2.x等问题。但截至本人初学时间(2016.11), 根据 StackOverflow, SegmentFault , 知乎 等平台的相关讨论, AngularJs 2.x目前尚未成熟, 官方还在持续迭代修复完善, 离大规模项目应用还有一段时间, 另外, 2.x相关学习教程也比较匮乏, 所以还是先了解1.x版本, 后续会持续关注2.x的迭代, 待时机成熟或项目需要再深入从头学习 AngularJs2.x 版本。