逐步学习 Angularjs – 实验 1
4.81/5 (22投票s)
逐步学习 Angularjs – 实验 1
本文编写于Angular 1.X。由于Angular经历了大量变化，我已使用Angular 4重写了整篇文章，请参考此文章以避免进一步混淆 一步一步学习Angular 4
目录
步骤3 应用ng-controller、ng-model和表达式
引言
AngularJS是最受欢迎的JavaScript框架之一。Angular丰富的绑定功能使得HTML和JavaScript对象之间的交互轻而易举。Angular诞生的根本原因就是绑定、绑定、绑定。它是一个将HTML UI与JavaScript对象绑定的框架。
通过这样做，它减少了我们在HTML和JavaScript对象之间编写大量的交互代码。
出于同样的原因，Angular团队将其命名为一个MVW框架。其中“M”代表JavaScript对象，“V”代表HTML UI，“W”代表绑定模型和UI的任何代码。很多人称之为粘合代码、后台代码、视图模型等。
因此，在这个演示中，将涵盖16个章节，展示所有可能的实际步骤。
步骤1：创建一个简单的HTML hello world项目
那么，让我们开始创建一个简单的项目并将其集成Angular。现在，当我们使用Visual Studio创建任何项目时，它总是附带Microsoft的印记。
我的意思是，例如，当你创建一个空的ASP.NET Web应用程序时，你会得到“Web.config”文件、ASPX文件等。这些文件非常Microsoft特有。
现在，为了保持Angular的纯洁性，我们希望创建一个没有Microsoft印记的简单项目。但同时，我们希望获得Visual Studio智能提示的好处。
这将是一个简单的项目，只包含HTML、CSS、JS文件和Angular文件。所以，在你的硬盘上创建一个简单的文件夹，打开Visual Studio，然后点击“文件”->“打开”->“网站”，如下图所示。当你将一个文件夹打开为网站时，Visual Studio不会添加不必要的文件，如web.config和global.asax文件等。
并按照下图所示提供文件夹路径
完成此操作后，您将看到一个非常简单的项目，里面什么都没有。它只有一个没有Microsoft特定文件的简单项目。
在这个项目中，让我们添加一个简单的HTML页面，并将其命名为“HelloWorld.html”。
在这个HTML页面中，我们将创建一个简单的文本输入框，称为“txtHello”，这个文本框将与“Hello”JavaScript函数/类绑定。
您可以看到下面的代码，其中我们有hello world文本框和JavaScript函数“Hello”，我们的目标是将文本框与JavaScript函数绑定。
现在，我们将使用Angular来绑定这两个实体。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<script>
function Hello() {
this.txthello = "HELLO WORLD";
}
</script>
<body>
<div id=" HelloWorldScreen">
<input id="txthello" type="text" /><br /><br />
</div>
</body>
</html>
步骤2：获取AngularJS框架
现在我们已经有了HTML UI和JavaScript类，让我们先获取AngularJS框架。右键单击项目，然后单击“管理NuGet程序包”，如下图所示
在搜索文本框中搜索Angular，然后从列表中安装“AngularJS”核心。您可以看到许多其他Angular包，它们是Angular的扩展。稍后我们会逐渐介绍其他包。
最重要的是Angular核心，所以点击安装并获取它。
安装时，将出现以下对话框（选择项目），然后单击“确定”。
安装完成后，您可以在scripts文件夹中看到Angular文件。
现在使用script标签引用“Angular”文件，如下图所示（请看粗体行）。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<script src="Scripts/angular.js"></script>
..... Code deleted for simplification
步骤3：应用ng-controller、ng-model和表达式
现在，为了将“HelloWorld”类与hello HTML文本框绑定，我们需要做两件事
- 创建“
HelloWorld”类的实例。 - 其次，将“
HelloWorld”对象的属性设置为textbox。
为此，我们需要使用“ng-controller”和“ng-model”。“ng-controller”和“ng-model”被称为指令。请记住，Angular是一种声明式编程语言。
声明式意味着您只需应用指令，事情就会奏效。如果您不熟悉这种声明式工作方式，我建议您快速查看下面的视频链接，其中通过一个示例进行了说明 https://youtu.be/0kmdjqgO9IY?t=15m33s
“ng-controller”指令创建一个“Helloworld”控制器的对象，并将其与UI DIV标签绑定；“ng-model”将属性与textbox绑定，属性名为“txtHello”。
要将属性显示在屏幕上，我们需要使用表达式“{{}}”，如下图所示。所以当我们输入文本“txthello”时，它将显示在“div1”标签内。
<div id=" HelloWorldScreen" ng-controller="HelloWorld">
<input ng-model="txthello" id="txthello" type="text" /><br /><br />
<div id="div1">{{txthello}}</div>
</div>
步骤4：ng-app和理解作用域
那么，如果“ng-controller”指令创建实例，那么当您的HTML页面中有多个“ng-controller”指令时会发生什么？如以下代码所示。它会创建两个实例还是一个实例？
想想看……。
<div id=" HelloWorldScreen" ng-controller="HelloWorld">
<input ng-model="txthello" id="txthello" type="text" /><br /><br />
<div id="div1">{{txthello}}</div>
</div>
<div id=" HelloWorldScreen" ng-controller="HelloWorld">
<input ng-model="txthello" id="txthello" type="text" /><br /><br />
<div id="div1">{{txthello}}</div>
</div>
HelloWorld”的不同实例与两个DIV HTML UI绑定。这正是Angular所做的，因为它会创建两个不同的实例。但是现在，如果同一个HTML页面中有两个实例，那么这两个实例的作用域是什么？是整个HTML页面还是其他什么？
这两个实例的作用域是从<di-v>标签的开始“<div>”到结束“</div>”标签。当Angular遇到“ng-controller”标签时，这些实例会自动创建。
现在，可能会出现一种情况，您希望这些控制器实例相互通信，共享一些公共数据。这时就有了“ng-app”。
“ng-app”创建一个顶级对象，该对象控制所有控制器对象，并且它们还帮助在控制器实例之间共享数据。
<body ng-app="myApp">
<div id=" HelloWorldScreen" ng-controller="HelloWorld">
<!--Code removed for simplification ->
</div>
</body>
步骤5：引导项目并查看结果
现在一切准备就绪，我们需要一些代码来帮助启动Angular。我们希望Angular开始创建控制器对象、ng-app对象并进行绑定。
所以我们需要两行代码，如下所示。第一行创建应用程序实例，第二行将控制器对象添加到应用程序中。
var myApp = angular.module("myApp", []);
myApp.controller("HelloWorld", Hello);
就这样，按下Ctrl + F5，看看自动绑定的乐趣。您在textbox中输入时，表达式就会更新。
最终完整代码
以下是完整源代码。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<scriptsrc="Scripts/angular.js"></script>
<script>
function Hello($scope) {
$scope.txthello = "HELLO WORLD";
}
varmyApp = angular.module("myApp", []);
myApp.controller("HelloWorld", Hello);
</script>
</script>
<body ng-app="myApp">
<div id=" HelloWorldScreen" ng-controller="HelloWorld">
<input ng-model="txthello" id="txthello" type="text" /><br /><br />
<div id="div1">{{txthello}}</div>
</div>
</body>
</html>
下一个实验室内容？
在下一个实验室中，我们将学习如何在Angular中使用事件和验证。
如需进一步阅读，请观看以下面试准备视频和分步视频系列。