AngularJS初识

作者: 聂叼叼 | 来源:发表于2018-04-13 16:46 被阅读0次

    最近公司的项目前端框架用到了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的数据时,控制器里面的也会变,当你改动控制器里面的值时,表单里面的值也会改变,感觉是一种动态的数据绑定,而且是双向的。

    未完待续。。。。。。。。。

    相关文章

      网友评论

        本文标题:AngularJS初识

        本文链接:https://www.haomeiwen.com/subject/zxnckftx.html