helloWorld.html
<!doctype html>
<html ng-app="helloWorldApp">
<head>
<title>Hello World - AngularJS</title>
</head>
<body>
<div ng-controller="MyController">
<span>First Value:</span> <input type="text" ng-model="first"> <br />
<span>Second Value:</span> <input type="text" ng-model="second"> <br /><br />
<button ng-click='updateSum()'>Sum</button> <br /><br />
{{heading}} {{total}}
</div>
<script src="angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
构建 AngularJS HelloWorld 应用程序
到目前为止，我们已经了解了 AngularJS 中涉及的一些重要概念。
让我们使用所有这些知识来构建我们的第一个 hello world 应用程序。
在这个例子中，我们将尝试使用所有组件而不增加复杂性，以便于理解。
稍后，如果我们愿意，可以尝试添加功能，从而在此应用程序中增加更多复杂性。
此应用程序显示两个文本框，我们可以其中输入任何数字，然后单击总和按钮以添加值并更新它们下方显示的消息。
让我们看一下 HTML 视图和Angular控制器 JS 文件的代码，以了解它是如何工作的。
为什么要使用 AngularJS？
最初建立网站时，他们纯粹是在完整的请求-响应模型上工作。
流程就像首先在浏览器中呈现网页，然后用户在网页中进行任何交互，例如表单提交或者按钮单击，新请求进入服务器，然后从服务器返回全新页面以在浏览器中呈现响应。
该模型一直在使用，直到 Microsoft 引入了“XMLHttpRequest”，它使开发人员能够对服务器进行异步调用，而无需实际刷新页面，并使用服务器响应来部分刷新页面。
这使得用户体验更加连贯，因为用户可以执行需要远程调用的任务，并且在调用和处理调用时仍然与应用程序交互。
仅在这个时间段，大多数 JS 框架出现，例如 jQuery、Prototype 等。
jQuery 是该列表中最引人注目的框架，它可能仍然是 UI 开发的最佳和最简单的选择。
如果我们从事过在 UI 组件中使用 jQuery 的相当大的项目，那么我们可以轻松地将代码维护在一段时间内变成地狱。
一段时间后，我们在项目中拥有 100 多个 JS 文件甚至更多，它们都相互引用而没有设计强制执行。
jQuery 确实是使编码变得容易的伟大框架，但它缺乏任何结构性指导，可以在代码库增长时帮助我们。
因此，我们最终得到了难以维护和测试的意大利面条式代码。
这就是模型视图控制器 (MVC) 等架构模式和 AngularJS 等框架出现的地方。
Google 的 AngularJS 是一个包罗万象的 JavaScript 模型-视图-控制器 (MVC) 框架，可以非常轻松地快速构建在任何桌面或者移动平台上运行良好的应用程序。
AngularJS 完全支持单元测试，以帮助减少质量保证 (QA) 时间。
AngularJS 中的模型和视图比我们在大多数 JavaScript 客户端框架中找到的要简单得多。
控制器，通常在其他 JavaScript 客户端框架中缺失，是 AngularJS 中的关键功能组件。
理解 AngularJS 组件
正如我们已经了解到 AngularJS 是基于 MVC 的结构化框架，因此我们将需要编写许多组件和实用程序来使应用程序代码结构化和维护良好。
让我们简短地了解这些组件。
我们将在下一个教程中详细讨论。
- 模块
模块是控制器、指令、过滤器、服务和其他配置信息的集合。所有这一切的主要参与者是angular.module()，因为它是模块 API 的网关，用于配置 angular 模块的机制。它用于注册、创建和检索以前创建的 AngularJS 模块。
例如，将以下代码添加到一个新的 JavaScript 文件中，我们可以将其命名为myAppModule.js。
// Create a new module
var myAppModule = angular.module('myAppModule', []);
我们刚刚创建了一个模块。很简单，不是吗？module()中传入的数组参数可以用来传递依赖列表；也就是说，这个模块依赖的其他模块。我们没有任何依赖项，所以我们只是传递一个空数组。
现在，我们可以使用 myAppModule变量来定义模块特定的其他组件，例如控制器或者过滤器。例如
// configure the module with a controller
myAppModule.controller('MyFilterDemoCtrl', function ($scope) {
// controller code would go here
}
);
- 作用域
在 AngularJS 中，$scope是一个对象，具有可用的属性和方法。请注意，范围可用于视图和控制器。
当我们在 AngularJS 中创建控制器时，我们将 $scope 对象作为参数传递。
var myAppModule = angular.module('MyFilterDemoCtrl', []);
myAppModule.controller('myController', function($scope) {
$scope.firstName = "Lokesh";
});
向控制器中的“$scope”添加属性时，视图 (HTML) 可以访问这些属性。
<div ng-app="myAppModule" ng-controller="myController">
<h1>{{firstName}}</h1>
</div>
- 指令
AngularJS 指令是扩展的 HTML 属性，带有前缀"ng-""。有一些预定义的指令，例如ng-app、ng-init和ng-controller。此外，我们也可以定义自己的指令。 例如，使用ng-init` 指令，我们可以将应用程序数据初始化为某个默认值。
<div ng-app="myAppModule" ng-init="firstName='Lokesh'">
<h1>{{firstName}}</h1>
</div>
- 表达式
视图中使用的范围变量，实际上是表达式。这些表达式写在双大括号内：{{ expression }}。我们可以编写简单的表达式以及复杂的表达式，例如{{ firstName + " " + lastName }}" 或者{{ "id = " + 0 }}" 。 - 控制器
在 Angular 中，控制器通过设置范围内的初始状态或者值以及向范围添加行为来扩大范围。例如，我们可以添加一个对范围内的值求和的函数以提供总计，这样如果范围背后的模型数据发生变化，则总值始终会发生变化。
我们必须使用“ng-controller”将控制器添加到 HTML 元素，然后在后台将它们实现为 JavaScript 代码。
<div ng-app="myApp" ng-controller="sumController">
First Value: <input type="text" ng-model="firstValue"><br>
Second Value: <input type="text" ng-model="secondValue"><br>
<br />
Sum is = {{sum()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sumController', function($scope) {
$scope.firstValue = 5;
$scope.secondValue = 10;
$scope.sum = function() {
return $scope.firstValue + $scope.secondValue;
};
});
</script>
- 数据绑定或者模型
这是AngularJS的最佳功能。数据绑定是将模型中的数据与网页中显示的内容链接起来的过程。AngularJS提供了一个非常干净的界面，将模型数据链接到网页中的元素。
在AngularJS中，数据绑定是一个双向过程：当网页上的数据发生更改时，模型会更新；当模型中的数据发生更改时，网页会自动更新。这样，模型始终是向用户表示的数据的唯一来源，视图只是模型的投影。
“控制器”部分中的上述示例也是数据绑定的示例。因此，当您更改文本框中的“第一个值”或者“第二个值”时，总和字段将自动更新，而无需另外努力。简直太棒了。
- 服务
服务是 AngularJS 环境中的主要工作。服务是为 Web 应用程序提供功能的单例对象。例如，Web 应用程序的一个常见任务是向 Web 服务器执行 AJAX 请求。AngularJS 提供了一个 HTTP 服务，其中包含访问 Web 服务器的所有功能。
服务功能完全独立于上下文或者状态，因此可以轻松地从应用程序的组件中使用。AngularJS 提供了很多用于基本用途的内置服务组件，例如 HTTP 请求、日志记录、解析和动画。我们还可以创建自己的服务并在整个代码中重复使用它们。
例如，$http是从 Web 服务器读取数据的核心服务。我们可以按以下方式使用此服务。
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("some HTTP URL")
.then(function(response) {
//process the response here
});
});
- 编译器
AngularJS 提供了一个 HTML 编译器，它将发现 AngularJS 模板中的指令并使用 JavaScript 指令代码构建扩展的 HTML 元素。
当 AngularJS 库被引导时，AngularJS 编译器被加载到浏览器中。加载时，编译器将在浏览器中搜索 HTML DOM，并将任何后端 JavaScript 代码链接到 HTML 元素，然后将最终的应用程序视图呈现给用户。
使用 AngularJS 的优势？
让我们记下 Angular 比其他框架提供的其他一些好处
- Angular 直接修改页面 DOM，而不是添加内部 HTML 代码。它更快。
- Angular 根据页面中特定于 Angular 的元素属性构建绑定。这有助于减少编写，代码更清晰，更易于理解且不易出错。
- Angular 有一些扩展特性，例如依赖注入、路由、动画、视图编排等。它们有助于编写更健壮和可维护的代码，并鼓励良好的设计实践。
- AngularJS 完全支持单元测试。
- Angular 中的发布-订阅系统支持上下文感知通信。
broadcast()将向所有子控制器发送一条消息，而emit()将向所有祖先发送一条消息。 - 它得到了谷歌和一个伟大的开发社区的支持。
app.js
var firstApp = angular.module('helloWorldApp', []);
firstApp.controller('MyController', function($scope) {
$scope.first = 5;
$scope.second = 10;
$scope.heading = 'Sum is : ';
$scope.total = 15;
$scope.updateSum = function() {
$scope.total = parseInt($scope.first) + parseInt($scope.second);
};
});
当我们执行上面的Angular示例时，我们将看到作为工作应用程序的添加图像的输出。