65.9K
CodeProject 正在变化。 阅读更多。
Home

Angular JS：一个简单的加法练习

19sanjeev
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.89/5 (6投票s)

2014年10月24日

CPOL

3分钟阅读

viewsIcon

39269

Angular JS 中一个简单的两个数字相加的练习

在上一篇博文中，我们学习了 Angular.JS，今天，我们将编写一些代码，看看它是如何工作的。

首先，让我们了解 Angular 脚本是如何工作的。

这是一个简单的浏览器示例，展示了当我们请求任何网页时会发生什么。
浏览器向服务器请求 URL，服务器响应 HTML 和 JS 文件，这些文件在浏览器中加载。

browser1

现在，如果我们以传统方式进行另一次请求会怎么样？我们再次来看看。
浏览器再次向服务器发送 URL 请求，服务器再次发送 HTML 和 JS 文件，整个页面再次加载。

browser2

这非常耗时，网络拥堵，网页一直闪烁。
所以我们需要一些加载速度更快、没有闪烁、并且在网络中占用带宽更少的东西。
Angular 就派上用场了。我们可以看到这张图片。

angularjs

当用户第二次请求时，服务器只发送所需的数据，这些数据加载到现有的 HTML 页面中，页面加载速度更快。

如何实现这一点？这非常简单！

但在编写任何代码之前，我们需要学习 Angular 的一些部分，即 Angular JS 由什么组成。基本上，它由 5 个部分组成

  1. 模块
  2. 控制器 (Controller)
  3. 路由
  4. Service
  5. 依赖注入

对于基础知识，我们只需要模块、控制器、指令和表达式。

让我们从模块开始

模块就像应用程序不同部分的容器——控制器、服务、过滤器、指令等。

var myApp = angular.module('myApp',[]);
}]);

控制器：它是一个 JavaScript 构造函数，用于增强 Angular Scope。我们使用 ng-controller 指令来使用控制器。

例如

var myApp = angular.module('myApp',[]);

myApp.controller('BaseController', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

指令：这些是 Angular 定义的各种关键字，用于使 Angular 运行。
例如：ng-app、ng-controller、ng-click、ng-show 等。

表达式：这些是类似于 JavaScript 的代码片段，通常放置在 HTML 中的绑定中，例如 {{ expression }}。

ex:- {{ 1+2 }}, {{a+b}}

现在，让我们开始简单的编码。
我们想使用 Angular JS 显示两个数字的和。

打开任何编辑器并创建一个 HTML 文件，比如 angular.html，并将这段代码写入其中。

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@*" data-semver="1.3.0" 
	src="//code.angularjs.org/1.3.0/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp">
  <h1>Hello Angular</h1>
  <div ng-controller="MainCtrl">
  1st Number : <input type="text" ng-model="num1"><br/>
  2nd Number : <input type="text" ng-model="num2">
  <input type="button" ng-click="add(num1,num2)" value="ADD"><br/>
  Sum : {{result}}
  <div>
</body>

</html>

这里，我们使用 ‘ng-app=”myApp”’，这告诉 Angular 在这个区域内，我们的 Angular 脚本将工作并被调用。

我们还使用了 ‘ng-controller=”MainCtrl”’。这告诉 Angular 控制器存在的位置，并帮助操作 DOM 元素。

ng-model=”num1″，即用于保存变量值并传递给控制器。
ng-click=”add(num1,num2)”，即用于调用控制器中的 “add()” 方法。

{{result}}，即 Angular 表达式，用于显示结果。

我们完成了 HTML 代码，创建另一个文件用于 JS，并将其命名为 “script.js”，并将下面的代码写入其中。

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

app.controller('MainCtrl', function($scope) {
$scope.add=function(num1,num2)
{
  $scope.result=parseInt(num1)+parseInt(num2);
}

});

第一行定义了我们在脚本中编写模块的方式，第三行定义了我们如何使用控制器。

第四行调用 add 方法并将结果返回到 HTML。

你可以通过点击 这里 来查看它是如何工作的。

嗯…不错 :)。现在我们完成了使用 Angular JS 获取两个数字相加输出的简单数学练习。我们感觉如何！！这真的很容易吗 :)。是的，它确实很简单。所以，现在你可以稍微改变一下逻辑，并检查减法、乘法、除法等等…

感谢阅读，希望你喜欢这篇博文。:)

© . All rights reserved.