zoukankan      html  css  js  c++  java
  • angular JS

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

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

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

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

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

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

    AngularJS是以一个JavaScript文件形式发布的,可通过script标签载入AngularJS脚本,如下所示:

    <script type="text/javascript" src="../js/angular.min.js"></script>

    复制以下代码.

    <html ng-app>

    ng-init指令初始化应用程序数据,也就是为AngularJS应用程序定义初始值,通常情况下,我们会使用一个控制器或模块来代替它,后面我们会介绍有关控制器和模块的知识。

    我们不仅可以赋值字符串,也可以赋值为数字、数组、对象,而且可以为多个变量赋初始值:

    <div ng-app="" ng-init="quantity=1;price=5"> 
        </div>
        //或者
        <div ng-app="" ng-init="names=['Tom','Jerry','Gaffey']">
         
        </div>

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

    我们就可以使用表达式这样调用初始化的变量值,如下。

    <div ng-app="" ng-init="name='Hello World'">
      {{ name }}
    </div>

    ng-model指令就可以把应用程序数据绑定到HTML元素,实现model和view的双向绑定。

    使用ng-model指令对数据进行绑定。

    <div ng-app="">
    
    <p>请输入任意值:<input ng-model="name" type="text"></p>
    
    <p>你输入的为: {{ name }}</p>
    
    </div>

    通过ng-click定义一个AngularJS单击事件。

    对按钮、链接等,我们都可以用ng-click指令属性来实现绑定,如下简单示例:

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

    用ng-controller指令来创建一个简单的控制器定义:

    <div ng-app="" ng-controller="MyController">
    
      <p>请输入一个名字:<input ng-model="person.name" type="text"> </p>
    
      <p>Hello <span ng-bind="person.name"></span> </p>
    
    </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 指令属性。

    ng-repeat指令,遍历一个数据集合中的每个数据元素,并且加载HTML模版把数据渲染出来,当我们要向HTML容器节点中添加更多类似DOM元素的时候,使用ng-repeat是再好不过了。

    <div ng-app="" ng-init="friends = [
    
      {name:'Tom', age:25},
    
      {name:'Jerry', age:28},
    
      {name:'Tom', age:25},
    
      {name:'Jerry', age:28}]">
    
    <table>
    
    <tbody>

      <tr ng-repeat="x in friends">   <td> {{ 'Name:'+ x.name +' ,Age:'+ x.age}} </td>   </tr>   </tbody>
    </table> </div>

    管道字符(|)+过滤器名

    过滤器uppercase、lowercase对字符串转换大、小写,如下所示:

    <div ng-app="">
    
    请输入: <input ng-model="name" type="text">
    
    <p>结果为: {{ name | uppercase}}</p>
    
    </div>

    filter过滤器可以过滤数组并从中选择出一个子集出来,用法是“filter:模型名称”:

    <div ng-app="" ng-init="friends = [
    
      {name:'tom', age:16},
    
      {name:'jerry', age:20},
    
      {name:'garfield', age:22}]"> 
    
      <p>输入过滤:<input ng-model="name" type="text"></p> 
    
    <ul style="list-style-type:none">
    
      <li>姓名,年龄</li>
    
      <li ng-repeat="x in friends | filter:name">
    
        {{ x.name + ' , ' + x.age }}
    
      </li>
    
    </ul>
    
    </div>
  • 相关阅读:
    Ubuntu更新Hostname和hosts
    Github 的其他用法
    Git与Github使用
    【实习】实习期间一些工具的使用
    【实习】实习第一周周报
    QT_string转char*
    QT_获取正在运行程序的进程id(判断程序是否正在运行)
    QT_获取运行进程所在目录路径_2
    QT_获取运行进程所在目录路径_1
    QT_强杀进程
  • 原文地址:https://www.cnblogs.com/Outyua/p/4697152.html
Copyright © 2011-2022 走看看