首页 > 代码库 > Angular--学习

Angular--学习

2024-09-13 05:54:33   215人阅读

18:28:34

Angular简介

AngularJS通过指令 扩展了HTML，并通过 表达式 绑定数据到HTML

Angular扩展了HTML

AngularJS 通过 ng-directives 扩展了 HTML。

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

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

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div ng-app="">
        <p>名字：<input type="text" ng-model="name"></p>
        <h1>Hello! {{name}}</h1>
    </div>
    <script src="../angular.min.js"></script>
</body>
</html>

 

当网页加载完毕，AngularJS 自动开启。

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。

ng-model 指令把输入域的值绑定到应用程序变量 name。

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

 

什么是Angular

  • AngularJS 把应用程序数据绑定到 HTML 元素。
  • AngularJS 可以克隆和重复 HTML 元素。
  • AngularJS 可以隐藏和显示 HTML 元素。
  • AngularJS 可以在 HTML 元素"背后"添加代码。
  • AngularJS 支持输入验证。

Angular指令

指以ng为前缀作为HTML属性

如 ng-init (初始化Angular应用程序变量)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div ng-app="" ng-init="firstName=‘Frank‘">
        <p>姓名为：<span ng-bind="firstName"></span> </p>
    </div>
    <script src="../angular.min.js"></script>
</body>
</html>
HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

带有有效的 HTML5：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div ng-app="" data-ng-init="firstName=‘Frank‘">
        <p>姓名为： <span data-ng-bind="firstName"></span> </p>
    </div>
    <script src="../angular.min.js"></script>
</body>
</html>

Angular表达式

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

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div ng-app="">
        {{5+2}}
    </div>
    <script src="../angular.min.js"></script>
</body>
</html>

Angular应用

AngularJS 模块（Module） 定义了 AngularJS 应用。

AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        姓：<input type="text" ng-model="firstName">
        名: <input type="text" ng-model="lastName"> 
        <br>
        姓名： {{firstName+" "+lastName}}
    </div>
    <script src="../angular.min.js"></script>
    <script>
        //定义应用
        var app=angular.module(‘myApp‘,[]);
        //控制应用
        app.controller(‘myCtrl‘, function($scope){
            $scope.firstName="Frank";
            $scope.lastName="Music";
        });
    </script>
</body>
</html>

 

Angular--学习


联系
我们