最近公司的项目前端框架用到了VX框架,其框架是在AngularJS上做了一点小小的封装,然后就有想法把AngularJS这个框架整一遍。。。。。。
一、AngularJS初识
首先,AngularJS 是一个JavaScript 框架。它可通过AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到HTML。AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications),单页面应用也可以搞一波。。。。
(说到底,angularJS也还是一个js框架,但是它有自己的一套标准,使用跟jq类似,先导库或者cdn的形式)
AngularJS 扩展了 HTMLAngularJS 通过ng-directives扩展了 HTML。ng-app指令定义一个 AngularJS 应用程序。
ng-model指令把元素值(比如输入域的值)绑定到应用程序。ng-bind指令把应用程序数据绑定到 HTML 视图。
看个小例子:
解释:当网页加载完毕,AngularJS 自动开启。
ng-app指令告诉 AngularJS,元素是 AngularJS应用程序的"所有者"。
ng-model指令把输入域的值绑定到应用程序变量name。
ng-bind指令把应用程序变量 name 绑定到某个段落的 innerHTML。
二、什么是 AngularJS?以及一些特点,能干什么?
AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。AngularJS 把应用程序数据绑定到 HTML 元素(MVVM数据双向绑定)。AngularJS 可以克隆和重复 HTML 元素。AngularJS 可以隐藏和显示 HTML 元素。AngularJS 可以在 HTML 元素"背后"添加代码。AngularJS 支持输入验证。
三、AngularJS 指令
正如您所看到的,AngularJS 指令是以ng作为前缀的 HTML 属性。ng-init指令初始化 AngularJS 应用程序变量。
HTML5 允许扩展的(自制的)属性,以 data- 开头。AngularJS 属性以 ng- 开头,但是可以使用 data-ng- 来让网页对 HTML5 有效。
四、AngularJS 表达式
AngularJS 表达式写在双大括号内:{{ expression }}。
AngularJS 表达式把数据绑定到 HTML,这与ng-bind指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式很像JavaScript
表达式:它们可以包含文字、运算符和变量。
例子如下:
五、AngularJS 应用
AngularJS模块(Module)定义了 AngularJS 应用。
AngularJS控制器(Controller)用于控制 AngularJS 应用。
ng-app指令指明了应用,ng-controller指明了控制器。
例子:
注:
上面的例子,你会发现你改动ng-model的数据时,控制器里面的也会变,当你改动控制器里面的值时,表单里面的值也会改变,感觉是一种动态的数据绑定,而且是双向的。
未完待续。。。。。。。。。
网友评论