• AngularJs——简介,表达式,指令


    AngularJs简介

    AngularJs是一个JavaScript框架,它可通过<script>标签添加到HTML页面,它是一个以JavaScript编写的库。

    AngularJs通过指令扩展了HTML,且通过表达式绑定数据到HTML。

    AngularJs扩展了HTML

    AngularJs通过ng-directives扩展了HTML。

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

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

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

    实例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.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。

    什么是AngularJs?

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

    AngularJs把应用程序数据绑定到HTML元素。

    AngularJs可以克隆和重复HTML元素。

    AngularJs可以隐藏和显示HTML元素。

    AngularJs可以在HTML元素"背后"添加代码。

    AngularJs支持输入验证。

    AngularJs表达式

    AngularJs表达式写在双大括号内:{{expression}}.

    AngularJs表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之妙。

    AngularJs将在表达式书写的位置“输出”数据。

    AngularJs表达式很像JavaScript表达式:它们可以包含文字、运算符和变量。

    实例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
    </head>
    <body>
    <div ng-app="">
      <p>我的第一个表达式: {{ 5 + 5 }}</p>
    </div>
    </body>
    </html>

    AngularJs数字

    实例:

    AngularJS 数字就像 JavaScript 数字:

    <div ng-app="" ng-init="quantity=1;cost=5">
    <p>总价: {{ quantity * cost }}</p>
    </div>

    使用 ng-bind 的相同实例:

    <div ng-app="" ng-init="quantity=1;cost=5">
    <p>总价: <span ng-bind="quantity * cost"></span></p>
    </div>

    AngularJs字符串

    实例:

    AngularJS 数字就像 JavaScript 数字:

    <div ng-app="" ng-init="firstName='John';lastName='Doe'">
    <p>姓名: {{ firstName + " " + lastName }}</p>
    </div>

    使用 ng-bind 的相同实例:

    <div ng-app="" ng-init="firstName='John';lastName='Doe'">
    <p>姓名: <span ng-bind="firstName + ' ' + lastName"></span></p>
    </div>

    AngularJs对象

    AngularJS 对象就像 JavaScript 对象:

    <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
    <p>姓为 {{ person.lastName }}</p>
    </div>

    使用 ng-bind 的相同实例:

    <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
    <p>姓为 <span ng-bind="person.lastName"></span></p>
    </div>

    AngularJs数组

    AngularJS 数组就像 JavaScript 数组:

    <div ng-app="" ng-init="points=[1,15,19,2,40]">
    <p>第三个值为 {{ points[2] }}</p>
    </div>

    使用 ng-bind 的相同实例:

    <div ng-app="" ng-init="points=[1,15,19,2,40]">
    <p>第三个值为 <span ng-bind="points[2]"></span></p>
    </div>

    AngularJS 表达式 与 JavaScript 表达式

    类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。

    与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。

    与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。

    与 JavaScript 表达式不同,AngularJS 表达式支持过滤器

    AngularJs应用

    AngularJs模块(Module)定义了AngularJs应用。

    AngularJs控制器(Controller)用于控制AngularJs应用。

    ng-app指令定义了应用,ng-controller定义了控制器。

    实例:

    <div ng-app="myApp" ng-controller="myCtrl">
    名: <input type="text" ng-model="firstName"><br>
    姓: <input type="text" ng-model="lastName"><br>
    <br>
    姓名: {{firstName + " " + lastName}}
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName= "John";
        $scope.lastName= "Doe";
    });
    </script>

    AngularJs模块

    var app = angular.module('myApp', []);

    AngularJs控制器

    app.controller('myCtrl', function($scope) {
        $scope.firstName= "John";
        $scope.lastName= "Doe";
    });

    AngularJs指令

    AngularJs指令是以ng作为前缀的HTML属性。ng-init指令初始化AngularJs应用程序变量。

    实例:

    <div ng-app="" ng-init="firstName='John'">
    <p>姓名为 <span ng-bind="firstName"></span></p>
    </div3>I::II

  • 相关阅读:
    Martix工作室考核题 —— 打印一个菱形
    Martix工作室考核题 —— 打印一个菱形
    Martix工作室考核题 —— 打印九九乘法表
    Martix工作室考核题 —— 打印九九乘法表
    Martix工作室考核题 —— 打印九九乘法表
    Martix工作室考核题 —— 201938 第三题
    Martix工作室考核题 —— 201938 第三题
    Martix工作室考核题 —— 201938 第三题
    Martix工作室考核题 —— 201938 第一题
    fiddler模拟发送post请求
  • 原文地址:https://www.cnblogs.com/watchmen/p/5619887.html
Copyright © 2020-2023  润新知