• Angular基础(一)


    AngularJS有五个主要核心特性,如下介绍:

    • 双向数据绑定 —— 实现了把model与view完全绑定在一起,model变化,view也变化,反之亦然。

    • 模板 —— 在AngularJS中,模板相当于HTML文件被浏览器解析到DOM中,AngularJS遍历这些DOM,也就是说AuguarJS把模板当做DOM来操作,去生成一些指令来完成对view的数据绑定。

    • MVVM —— 吸收了传统的MVC设计模式针但又并不执行传统意义上的MVC,更接近于MVVM(Moodel-View-ViewModel)。

    • 依赖注入 —— AngularJS拥有内建的依赖注入子系统,可以帮助开发人员更容易的开发,理解和测试应用。

    • 指令 —— 可以用来创建自定义的标签,也可以用来装饰元素或者操作DOM属性。

    指令介绍:

    AngularJS通过称为指令的新属性来扩展的HTML,带有前缀ng-,我们也可以称之为“指令属性”,它就是绑定在DOM元素上的函数,可以调用方法、定义行为、绑定controller及$scope对象、操作DOM,等等。

    Angular.js应用的动态性和响应能力,都要归功于指令属性,常见的有:ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。

    ng-app:用于告诉 AngularJS 应用当前这个元素是根元素。

    ng-model:绑定了 HTML 表单元素到 scope 变量中。如果 scope 中不存在变量, 将会创建它。

    ng-controller:用于为你的应用添加控制器。在控制器中,你可以编写代码,制作函数和变量,并使用 scope 对象来访问。

    ng-change:告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。

    ng-change 指令需要搭配 ng-model 指令使用。

    ng-change 事件只针对输入框值的真实修改,而不是通过 JavaScript 来修改。

    ng-class:用于给 HTML 元素动态绑定一个或多个 CSS 类。

    ng-click:告诉了 AngularJS HTML 元素被点击后需要执行的操作。

    <div ng-app="" ng-init="click=false">
        <button ng-click="click= !click">隐藏/显示</button>
         <div ng-hide="click">
             请输入一个名字:<input type="text" ng-model="name" />
            Hello <span ng-bind="name"></span> 
         </div>
     </div>

    ng-disabled:设置表单输入字段的 disabled 属性(input, select, 或 textarea)。 如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。

    ng-init:初始化应用程序数据,也就是为AngularJS应用程序定义初始值。

    ng-bind:告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。

    AngularJS表达式

    AngularJS框架的核心功能之一 —— 数据绑定,由两个花括号{{}}组成,可以把数据绑定到HTML,类似Javascript代码片段,可以包含文字、运算符和变量,通常在绑定数据中用到,表达式可以绑定数字、字符串、对象、数组,写在双大括号内:{{ expression }}。

    可以看看代码:

    <div ng-app="" ng-init="name='Hello World'">
      {{ name }}
    </div>
    指令ng-bind和AngularJS表达式{{}}有异曲同工之妙,但不同之处就在于ng-bind是在angular解析渲染完毕后才将数据显示出来的。
    <div ng-app="">
        请输入一个名字:<input type="text" ng-model="name" />
        Hello <span ng-bind="name"></span>
    </div>

    控制器

    现在我们就用ng-controller指令来创建一个简单的控制器定义,如下所示:

    <div ng-app="" ng-controller="MyController">
     
    请输入一个名字:<input type="text" ng-model="person.name"> 
     
    Hello <span ng-bind="person.name"></span> 
     
    </div>    
     
    <script>
    function MyController($scope) {
       $scope.person = {
          name: "World"
       };
    }
    </script>

    如上所述,我们通过ng-controller指令创建了一个JavaScript对象 —— MyController并带有name属性,那参数$scope是什么呢,代表什么意思呢。

    现在我们就来解答MyController对象参数 —— $scope。

    $scope就是把一个DOM元素连结到控制器上的对象,它提供一个绑定到DOM元素(以及其子元素)上的执行上下文。它也是一个JavaScript对象,指向应用程序作用域内的所有HTML元素和执行上下文。作用域呢,就是作为$scope的数据属性关联到DOM上的,并且能在需要调试的时候被获取到。

    要明确创建一个$scope对象,我们就要给DOM元素安上一个controller对象,使用的是ng-controller 指令属性。

    所有$scope都遵循原型继承,这意味着它们都能访问父$scope们,对任何属性和方法,如果AngularJS在当前$scope上找不到,就会到父$scope上去找,如果在父$scope上也没找到,就会继续向上回溯,一直到$rootScope上,这个$rootScope是最顶级的$scope,它对应着含有 ng-app指令属性的那个DOM元素,也就是说根作用域关联的DOM就是ng-app指令定义的地方。

    也就是说,拥有了$scope,我们就可以操作作用域内任何我们想要获取的对象数据。

    
    
    
  • 相关阅读:
    JS编码解码详解
    web的几种返回顶部
    图片的懒加载的两种效果
    获取两个日期差
    C#虚方法
    依赖注入(DI)和Ninject
    在应用程序级别之外使用注册为 allowDefinition='MachineToApplication' 的节是错误的
    PetShop的系统架构设计
    C#综合揭秘——细说多线程(下)
    C# Socket编程(4)初识Socket和数据流
  • 原文地址:https://www.cnblogs.com/weiyz/p/7077795.html
Copyright © 2020-2023  润新知