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 指令同步

  • 相关阅读:
    SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long 解决方法
    Apache Commons 简介
    CSS设置只显示两行文字
    HTML中关于动态创建的标签无法绑定js事件的解决方法:.on()方法的 [.selector]
    AISing Programming Contest 2021(AtCoder Beginner Contest 202)E
    CF620E New Year Tree(dfs序+线段树)
    HDU6955 2021多校 Xor sum(字典树+前缀和异或)
    HDU6959 2021多校 zoto(莫队+分块)
    CF1285D Dr. Evil Underscores(分治)
    CF706D Vasiliy's Multiset(字典树的删除)
  • 原文地址:https://www.cnblogs.com/liulijun330/p/6219644.html
Copyright © 2011-2022 走看看