AngularJS 简介

  • 定义和使用

    AngularJS 是一个JavaScript框架。 可以使<script>标签将其添加到HTML页面。
    AngularJS 使用指令扩展HTML属性,并使用表达式将数据绑定到HTML。
    AngularJS 是一个用JavaScript编写的JavaScript框架。
    AngularJS 是作为JavaScript文件分发的,可以使用脚本标签将其添加到网页中:
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    
  • AngularJS 扩展HTML

    AngularJS 使用ng指令扩展了HTML。
    ng-app 指令定义了AngularJS应用程序。
    ng-model 指令将HTML控件的值(输入,选择,文本区域)绑定到应用程序数据。
    ng-bind 指令将应用程序数据绑定到HTML视图。
    下面示例演示了 ng-app、ng-model、ng-bind指令的使用:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>蝴蝶教程(jc2182.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
         <div ng-app="">
              <p>在输入框中输入内容:</p>
              <p>Name : <input type="text" ng-model="name"></p>
              <p ng-bind="name"></p>
         </div> 
    </body>
    </html>
    
    尝试一下
    示例说明:
    网页加载后,AngularJS会自动启动。
    ng-app 指令告诉AngularJS <div> 元素是AngularJS应用程序的“所有者”。
    ng-model 指令将输入字段的值绑定到应用程序变量名称。
    ng-bind 指令将<p> 元素的内容绑定到应用程序变量名称。
  • AngularJS 指令

    如您所见,AngularJS 指令是带有ng前缀的HTML属性。
    ng-init 指令初始化AngularJS应用程序变量。
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>蝴蝶教程(jc2182.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
         <div ng-app="" ng-init="firstName='John'">
            <p>这个 name 是 <span ng-bind="firstName"></span></p>
         </div> 
    </body>
    </html>
    
    尝试一下
    或者使用有效的HTML:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>蝴蝶教程(jc2182.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
         <div data-ng-app="" data-ng-init="firstName='John'">
              <p>这个 name 是 <span data-ng-bind="firstName"></span></p>
         </div> 
    </body>
    </html>
    
    尝试一下
    如果要使页面HTML有效,可以使用data-ng-而不是ng-。
    在本教程的后面,您将学到更多有关指令的知识。
  • AngularJS 表达式

    AngularJS 表达式写在双花括号内:{{expression}}。
    AngularJS 将“输出”数据精确地写入表达式:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>蝴蝶教程(jc2182.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
         <div ng-app="">
              <p>我的第一个表达式 {{ 5 + 5 }}</p>
         </div> 
    </body>
    </html>
    
    尝试一下
    AngularJS 表达式将ngularJS数据绑定到HTML的方式与ng-bind指令相同。
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>蝴蝶教程(jc2182.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
         <div ng-app="">
              <p>在输入框中输入内容:</p>
              <p>Name: <input type="text" ng-model="name"></p>
              <h1>hello {{ name }}</h1>
         </div> 
    </body>
    </html>
    
    尝试一下
    您将在本教程的后面部分了解有关表达式的更多信息。
  • AngularJS 应用

    AngularJS 模块定义AngularJS应用程序。
    AngularJS 控制器控制AngularJS应用程序。
    ng-app 指令定义应用程序,ng-controller 指令定义控制器。
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>蝴蝶教程(jc2182.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
        <p>尝试更改名称。</p>
        <div ng-app="myApp" ng-controller="myCtrl">
         First Name: <input type="text" ng-model="firstName"><br>
         Last Name: <input type="text" ng-model="lastName"><br>
         <br>
         Full Name: {{firstName + " " + lastName}}
         </div>
         <script>
             var app = angular.module('myApp', []);
             app.controller('myCtrl', function($scope) {
               $scope.firstName= "John";
               $scope.lastName= "Doe";
             });
         </script>
    </body>
    </html>
    
    尝试一下
    AngularJS 模块定义应用程序:
    var app = angular.module('myApp', []);
    
    AngularJS 控制器控制应用程序:
    app.controller('myCtrl', function($scope) {
         $scope.firstName= "John";
         $scope.lastName= "Doe";
    });
    
    在本教程的后面,您将了解有关模块和控制器的更多信息。