简体中文

AngularJS 教程

AngularJS 应用

AngularJS - 概述

你好，未来的网页开发者们！今天，我们将踏上一段激动人心的旅程，探索AngularJS的世界。如果你是编程新手，不用担心——我会成为你的友好向导，我们会一步步前进。在本教程结束时，你将对AngularJS有一个扎实的了解。那么，让我们开始吧！

AngularJS - Overview

常规特性

AngularJS就像是网页开发的瑞士军刀。它是一个强大的JavaScript框架，可以帮助我们轻松构建动态网页应用。想象你在建造一座房子——AngularJS为你提供了所有工具和蓝图，帮助你创建一个美丽、功能性的结构。

以下是一些使AngularJS脱颖而出的一般特性：

  1. 模型-视图-控制器（MVC）架构：这就像拥有一个组织良好的工具箱。它帮助将你的应用数据（模型）、用户界面（视图）和业务逻辑（控制器）分离开来。

  2. 双向数据绑定：想象这是一面魔镜。当你在一面改变某物时，另一面会自动更新！

  3. 依赖注入：这就像有一个私人助手，在你需要时给你带来确切的东西。

  4. 指令：这些是特殊的指令，告诉AngularJS如何行为。就像教会一只已经很聪明的狗新技巧！

让我们看一个简单的例子，了解这些特性是如何工作的：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>我的第一个AngularJS应用</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>你好，{{name}}！</h1>
<input type="text" ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.name = '世界';
});
</script>
</body>
</html>

在这个例子中，我们使用了MVC架构（ng-app, ng-controller）、双向数据绑定（ng-model）和一个简单的指令（ng-controller）。当你在输入字段中键入时，你会看到问候语实时更新。神奇吧？

核心特性

既然我们已经浅尝辄止，让我们更深入地了解AngularJS的核心特性：

  1. 作用域（Scope）：这就像是粘合你的应用的东西。你的模型数据就存在于这里。

  2. 控制器（Controller）：想象这是你的应用的头脑。在这里定义行为。

  3. 表达式（Expressions）：这些就像是你可以直接嵌入到HTML中的小代码片段。

  4. 过滤器（Filters）：这些是数据转换器。它们可以按照你的方式格式化数据。

让我们看看这些特性是如何工作的：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS核心特性</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>你好，{{name | uppercase}}！</h1>
<p>你最喜欢的水果是：{{fruit}}</p>
<button ng-click="changeFruit()">改变水果</button>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.name = '世界';
$scope.fruit = '苹果';
$scope.changeFruit = function() {
$scope.fruit = '香蕉';
};
});
</script>
</body>
</html>

在这个例子中，我们使用了一个作用域（$scope）、一个控制器（MyController）、一个表达式（{{name}}）和一个过滤器（| uppercase）。按钮展示了我们如何在作用域中更改数据。

概念

让我们分解一些AngularJS中的关键概念：

  1. 模块（Modules）：这些就像是不同部分的容器的应用。它们帮助保持代码的组织性。

  2. 服务（Services）：这些是可以在你的应用中共享的代码的可重用部分。

  3. 指令（Directives）：我们之前提到了这些，但它们如此重要，值得再次提及。它们扩展了HTML的新属性和元素。

  4. 模板（Templates）：这些是你的带有特殊AngularJS标记的HTML文件。

以下是一个展示这些概念的例子：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS概念</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>{{greeting}}</h1>
<button ng-click="sayHello()">说你好</button>
</div>

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

app.service('GreetingService', function() {
this.getGreeting = function() {
return "你好，AngularJS！";
};
});

app.controller('MyController', function($scope, GreetingService) {
$scope.sayHello = function() {
$scope.greeting = GreetingService.getGreeting();
};
});
</script>
</body>
</html>

这个例子展示了模块（myApp）、服务（GreetingService）、使用依赖注入的控制器，以及带有AngularJS标记的模板。

AngularJS的优势

AngularJS带来了一系列的好处：

  1. 易于学习：其直观的结构使它对初学者友好。
  2. 可重用组件：写一次，多次使用！
  3. 测试变得简单：AngularJS是为测试而设计的。
  4. 社区支持：一个庞大、活跃的社区意味着帮助总是触手可及。

AngularJS的缺点

但就像任何工具一样，它也有自己的挑战：

  1. 性能问题：复杂的应用有时可能运行缓慢。
  2. 学习曲线：虽然入门容易，但掌握AngularJS需要时间。
  3. 版本问题：版本之间的重大变化可能具有挑战性。

AngularJS指令

指令是AngularJS的秘密武器。它们允许你创建可重用组件并扩展HTML的能力。以下是一些常见指令的表格：

指令 描述
ng-app 初始化一个AngularJS应用
ng-controller 为应用指定一个控制器
ng-model 将输入绑定到一个属性
ng-repeat 为集合中的每个项目重复一个元素
ng-click 指定点击行为
ng-show 显示或隐藏一个元素
ng-hide 隐藏或显示一个元素
ng-if 在DOM中移除或重新创建一个元素
ng-class 动态绑定一个或多个CSS类
ng-style 允许动态样式

让我们看看一些指令是如何工作的：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS指令</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>
</head>
<body>
<div ng-controller="MyController">
<h1 ng-class="{red: isRed, bold: isBold}">你好，AngularJS！</h1>
<button ng-click="toggleRed()">切换红色</button>
<button ng-click="toggleBold()">切换加粗</button>

<h2>我的水果：</h2>
<ul>
<li ng-repeat="fruit in fruits">{{fruit}}</li>
</ul>

<input type="text" ng-model="newFruit">
<button ng-click="addFruit()">添加水果</button>

<p ng-show="fruits.length > 3">你有很多水果！</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.isRed = false;
$scope.isBold = false;
$scope.fruits = ['苹果', '香蕉', '橙子'];

$scope.toggleRed = function() {
$scope.isRed = !$scope.isRed;
};

$scope.toggleBold = function() {
$scope.isBold = !$scope.isBold;
};

$scope.addFruit = function() {
if($scope.newFruit) {
$scope.fruits.push($scope.newFruit);
$scope.newFruit = '';
}
};
});
</script>
</body>
</html>

这个例子展示了几个指令：ng-class、ng-click、ng-repeat、ng-model和ng-show。它演示了这些指令如何用几行代码创建动态、交互式的网页应用。

就是这样！我们完成了AngularJS的旋风之旅，从其一般特性到其核心概念和指令。记住，最好的学习方式是实践，所以不要害怕用这些例子做实验并创建你自己的内容。未来的AngularJS大师们，祝你们编码愉快！

Credits: Image by storyset

上一教程:
AngularJS - 首页
下一教程:
AngularJS - 环境配置