• 对AngularJs的简单了解


    一、简单介绍

    AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。

    通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足:
    类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等
    框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。框架有:knockout、sproutcore等。
    AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构,让浏览器能够识别新的语法。例如:
    使用双大括号{{}}语法进行数据绑定;
    使用DOM控制结构来实现迭代或者隐藏DOM片段;
    支持表单和表单的验证;
    能将逻辑代码关联到相关的DOM元素上;
    能将HTML分组成可重用的组件。
    二、AngularJs的核心
    AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
    三、AngularJs的理解
      AngularJS 是一个 JavaScript 框架

    AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

    AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:

    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

    AngularJS 扩展了 HTML

    AngularJS 通过 ng-directives 扩展了 HTML。

    ng-app 指令定义一个 AngularJS 应用程序。

    ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

    ng-bind 指令把应用程序数据绑定到 HTML 视图。

    AngularJS 实例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>

    <div ng-app="">
      <p>名字 : <input type="text" ng-model="name"></p>
      <h1>Hello {{name}}</h1>
    </div>

    </body>
    </html>

    当网页加载完毕,AngularJS 自动开启。

    ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。

    ng-model 指令把输入域的值绑定到应用程序变量 name

    ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

     如果您移除了ng-app指令,HTML将直接把表达式显示出来,不会去计算表达式的结果。

    四、AngularJs的简单应用

    AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。

    • AngularJS 把应用程序数据绑定到 HTML 元素。
    • AngularJS 可以克隆和重复 HTML 元素。
    • AngularJS 可以隐藏和显示 HTML 元素。
    • AngularJS 可以在 HTML 元素"背后"添加代码。
    • AngularJS 支持输入验证。

    五、AngularJs指令

    AngularJS 通过被称为 指令 的新属性来扩展 HTML。

    AngularJS 通过内置的指令来为应用添加功能。

    AngularJS 允许你自定义指令。

    AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-

    ng-app 指令初始化一个 AngularJS 应用程序。

    ng-init 指令初始化应用程序数据。

    ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

    ng-app 指令

    ng-app 指令定义了 AngularJS 应用程序的 根元素

    ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。

    稍后您将学习到 ng-app 如何通过一个值(比如 ng-app="myModule")连接到代码模块。


    ng-init 指令

    ng-init 指令为 AngularJS 应用程序定义了 初始值

    通常情况下,不使用 ng-init。您将使用一个控制器或模块来代替它。

    稍后您将学习更多有关控制器和模块的知识。


    ng-model 指令

    ng-model 指令 绑定 HTML 元素 到应用程序数据。

    ng-model 指令也可以:

    • 为应用程序数据提供类型验证(number、email、required)。
    • 为应用程序数据提供状态(invalid、dirty、touched、error)。
    • 为 HTML 元素提供 CSS 类。
    • 绑定 HTML 元素到 HTML 表单。

    ng-repeat 指令

    ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素


    创建自定义的指令

    除了 AngularJS 内置的指令外,我们还可以创建自定义指令。

    你可以使用 .directive 函数来添加自定义的指令。

    要调用自定义指令,HTML 元素上需要添加自定义指令名。

    使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive

    五、AngularJs  Scope(作用域)

    Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

    Scope 是一个对象,有可用的方法和属性。

    Scope 可应用在视图和控制器上。

    Scope 概述

    AngularJS 应用组成如下:

    • View(视图), 即 HTML。
    • Model(模型), 当前视图中可用的数据。
    • Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。

    scope 是模型。

    scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。

    七、AngularJS 控制器

    AngularJS 控制器 控制 AngularJS 应用程序的数据。

     AngularJS 控制器是常规的 JavaScript 对象


    AngularJS 控制器

    AngularJS 应用程序被控制器控制。

    ng-controller 指令定义了应用程序控制器。

    控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。

    AngularJS 使用$scope 对象来调用控制器。

    在 AngularJS 中, $scope 是一个应用象(属于应用变量和函数)。

    控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。

    控制器在作用域中创建了两个属性 (firstNamelastName)。

    ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。

  • 相关阅读:
    大数据基础1
    java之MySQL的使用
    java反射
    java多线程
    java异常
    指针综合
    指向函数的指针变量做函数的参数
    指向函数的指针
    字符串指针法赋值
    字符串冒泡排序和折半查找
  • 原文地址:https://www.cnblogs.com/wuyanliang/p/5925646.html
Copyright © 2020-2023  润新知