上一节:
下一节:

  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";
});
    在本教程的后面，您将了解有关模块和控制器的更多信息。
上一节:
下一节: