zoukankan      html  css  js  c++  java
  • AngularJs之一

    在讲正题之前,先说一下有关angular简介方面的信息:

     1. angularJS  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
     2. AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
     3. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。

    接下来先讲第一个实例:

    <div ng-app=“” ng-init=“name=‘恒博'">
    你的名字是:{{name}}
    </div>

    ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。
    ng-model 指令把输入域的值绑定到应用程序变量 name。
    ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

    接下来讲一下angularJs功能:

    1.AngularJS 使得开发现代的单一页面应用程序变得更加容易。
    2.AngularJS 把应用程序数据绑定到 HTML 元素。
    3.AngularJS 可以克隆和重复 HTML 元素。
    4.AngularJS 可以隐藏和显示 HTML 元素。
    5.AngularJS 可以在 HTML 元素"背后"添加代码。
    6.AngularJS 支持输入验证。

    angularJs的表达式:

    1.AngularJS 表达式写在双大括号内:{{ 表达式 }}。
    2.AngularJS 表达式把数据绑定到 HTML,
    3.AngularJS 将在表达式书写的位置"输出"数据。
    4.AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。
    如{{5+5}} , {{uname+”和”+yname}},{{r*3.1415926}}

    接下来讲一下angularJs的几个指令:

    指令一:

    <div ng-app="" ng-init="name='李宝裤'">
    你的名字是:{{name}}
    </div>

    AngularJS 指令是以 ng 作为前缀的 HTML 属性。
    ng-init 指令初始化 AngularJS 应用程序变量。
    HTML5 允许扩展的以 data- 开头自定义属性。 AngularJS 属性以 ng- 开头,
    在html5页面中也可以使用 data-ng- 来让网页对 HTML5 有效。

    ng-app 指令定义了 AngularJS 应用程序的 根元素。
    ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。
    ng-init 指令为 AngularJS 应用程序定义了 初始值。
    通常情况下,不使用 ng-init。将使用一个控制器或模块来代替它。

    angularJs的数据绑定:

    <div ng-app="" ng-init="nn=1;price=5">
     <h2>刀削面计价器</h2>
     数量: <input type="number" ng-model="nn">
     价格: <input type="number" ng-model="price">
     <h3> {{ nn * price }}</h3>
    </div>

    通过ng-model 指令同步

  • 相关阅读:
    剑指offer-二维数组中的查找 java实现
    Matlab2015b激活失效解决办法
    解决ueditor在多图上传的时候偶尔抽风,图片丢失或者乱序
    用.net正则去除所有的html源码或者提取出图片地址以及存数据库时的符号替换(如富文本编辑器)
    DropDownList的动态绑定方法(两种)
    Ueditor使用说明(包括设置其可编辑不可编辑)
    用webuploader上传图片并预览(上传文件)
    .net日期控件(全.net)
    代码注释
    面向对象的概念
  • 原文地址:https://www.cnblogs.com/liulijun330/p/6219644.html
Copyright © 2011-2022 走看看