【web】AngularJS 教程

最新推荐文章于 2023-11-12 18:01:21 发布

协议森林

最新推荐文章于 2023-11-12 18:01:21 发布

阅读量419

点赞数

分类专栏： web开发

本文链接：https://blog.csdn.net/u012503639/article/details/89467274

版权

web开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.概念

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。

2.特点

AngularJS 通过 ng-directives 扩展了 HTML。
1.ng-app 指令定义一个 AngularJS 应用程序。
2.ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
3.ng-bind 指令把应用程序数据绑定到 HTML 视图。

<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/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。

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

ng-init 指令初始化 AngularJS 应用程序变量。

<div data-ng-app="" data-ng-init="firstName='John'">
 
<p>姓名为 <span data-ng-bind="firstName"></span></p>
 
</div>

HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

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>

Scope概述
AngularJS应用组成如下：
View(视图),即 HTML。
Model(模型),当前视图中可用的数据。
Controller(控制器),即JavaScript函数，可以添加或修改属性。

scope是一个JavaScript对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="name">
    <h1>{{greeting}}</h1>
    <button ng-click='sayHello()'>点我</button>    
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "Runoob";
    $scope.sayHello = function() {
        $scope.greeting = 'Hello ' + $scope.name + '!';
    };
});
</script>

3.控制器方法

<div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>