深入了解 AngularJS 第一部分
本文将帮助您从基础了解 Angular JS
引言
在本文中，我们将学习 AngularJS。这只是我关于 Angular JS 的完整文章的第一部分。
深入了解 Angular JS
开始使用 Angular JS。
我们所需的一切
- Visual Studio 2012 或 2013（本文我使用的是此 IDE）
- Angular JS 脚本文件。“这对我们工作来说是必须的 ;)” 您可以从 https://angularjs.org/ 获取它们。
- SQL Server 2012 或 2014（我使用 2012 进行数据库工作，你知道，如果我们没有数据，任何应用程序或网站都没有用。所以，请准备一个数据库来处理数据）。
好的……！！！如果您已准备好以上所有先决条件，那么我们可以开始了。
现在，让我们采用一种新的学习方法：边编码边学习，而不是先学习再编码。所以，如果您跟我一起，让我们开始一起头脑风暴吧……
顺便说一句，我们要开发的应用程序是关于电影数据库的，因为我是一个电影爱好者，“我看电影看得很多”。
关于 Angular JS，有几件事我们需要了解
- 它是一个由传奇的、“许多开发者梦想中的公司”Google 维护的开源框架（现在不要争论它是库还是框架）。
- 开发者可以使用 AngularJS 中的 MVC（Model-View-Controller）模式编写客户端应用程序。
- AngularJS 使用 ng-* 指令。您很快就会看到很多。
*注意：如果您继续阅读，我假设您已经了解 JavaScript 和 JQuery（一点点即可）。我将展示一些 JQuery 示例，以了解其中的区别。
咖啡备好……系统充满电……行动 :D
I. 基本检查
<html>
<head>
</head>
<body>
<script src='angularjs.js'></script>
<script>
if(!angular)
alert("Failed to load angular");
</script>
</body>
</html>
上面的程序用于检查我们是否正确加载了 AngularJS 文件。想知道 angular 有什么吗？然后将此行添加到您的脚本标签中“console.log(angular);”，您可以在控制台中找到该对象。
II. 我们最熟悉的程序（“让 angular 向您问好”）
<html ng-app>
<head>
</head>
<body>
<input type="text" ng-model="Name" autofocus/> <br/>
Hey!! <span ng-bind="Name"></span> <br/>
Hey!! {{Name}} again <br/><br/>
<b>*Note: using { {} } does the same as ng-bind</b>
<script src='angularjs.js'></script>
<script>
if(!angular)
alert("Failed to load angular");
</script>
</body>
</html>
嘿…… Angular 正在向我问好…… :D 现在让我们了解 angular 是如何与我们沟通的。
观察代码，与第一个程序相比，我们添加了一些术语。
新观察到的内容
- HTML 标签中的“ng-app”：对于 .Net 开发者来说，这可以与命名空间相媲美，对于 Java 人来说，可以与包相媲美。很明显，我们的控制器总是放在它们（命名空间/包）之下。
- 输入标签中的“ng-model”：对于熟悉 MVC 或 MVVM 模式的开发者来说，我无需提及模型的重要性，但对于其他人来说，它将 HTML 控件的值绑定到我们的应用程序。
- span 标签中的“ng-bind”：请再次查看上面的项目符号点……是的，要输出或显示模型中的任何值，我们使用此指令。
- {{}}： 现在，这是什么？！这与 ng-bind 的作用相同。忘记区别，我们很快就会明白。
让我们用纯 JavaScript 来比较同样的工作方式
JS 代码
<html>
<body>
<p>Implementation of Angular binding</p>
<input type="text" onkeyup="myFunction(this)"><br/>
<span></span>
<script>
function myFunction(data) {
var span = document.querySelector('span');
span.innerText = data.value;
}
</script>
</body>
</html>
我们已经实现了在 angular 中看到的那个数据绑定功能，使用的是纯 JavaScript。通过比较代码，我们可以观察到大量的人为/开发者的思考工作已经减少。这种隐式绑定方式在 angularJS 中被称为“数据绑定”。
使用控制器
<html ng-app="IntroApp">
<head>
</head>
<body ng-controller="IntroController as movie">
<h2><i>Showing static film details</i></h2>
<br/>
<h3>Movie Name : {{movie.MovieName}} </h3>
<h3>Hero : {{movie.Hero}} </h3>
<h3>Rating on 10 : {{movie.Rating}} </h3>
<script src='angularjs.js'></script>
<script>
if(!angular)
alert("Failed to load angular");
else{
var app = angular.module("IntroApp",[]); //defining our module which is considered as namespace or package (only for understanding)
app.controller("IntroController",function(){
var self = this;
//lets have some properties
self.MovieName = "Forest Gump";
self.Hero = "Tom Hanks";
self.Rating = 8.3;
});
}
</script>
</body>
</html>
新观察到的内容
- angular.module(“IntroApp",[]) : 我们已经看到“angular”是一个对象，如果您错过了那个部分，请在脚本中“console.log(angular)”您可以在控制台中看到一个对象。
- Module 是 angular 的一个方法，它接受 appName 作为第一个参数，并注意第二个参数中的数组。如果我们有任何依赖项，我们会将它们放在数组（第二个参数）中。
- 稍后我们会看到这些依赖项，现在，请注意一些依赖项，如 $ngRoute、$scope、$rootScope、$routeParams 等。
- 为了我们理解，我将 angular.module(…) 存储在一个名为 app 的变量中。我们也可以进行链式方法调用，如下所示：
- angular.module(“IntroApp”,[]).controller(“……..
- angular.controller("IntroController",function(){ }) : 终于轮到我们的控制器了。控制器在过滤来自 WebAPI 或您正在使用的任何服务的数据方面起着重要作用。
- Controller 是 angular 的一个方法，它接受 controllerName 作为第一个参数，并将其匿名函数作为第二个参数。
- 该函数包含如上例所示所需的函数和属性。
- 现在，尝试不断刷新您的页面……您是否注意到花括号的东西显示了零点几秒？！是的，它们就像下面的图片所示。这就是这个花括号和“ng-bind”指令的区别。“哦，拜托，这只是零点几秒”，您可能会这样想，但请想想，如果我们正在调用一个服务，并且需要等待 2-5 秒才能获得响应。向客户展示这些花括号难道不会很尴尬吗？！！！
- 为了避免这种情况，AngularJS 中有一个名为“ng-cloak”的类。以下是语法：
- [ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
} - 像为元素添加 autofocus 一样，将 ng-cloak 添加到其中，如下所示：
- <h3 ng-cloak >电影名称 : {{movie.MovieName}} </h3>
- [ng\:cloak], [ng-cloak], .ng-cloak {
- 对我们的 ControllerIntro.html 文件进行上述更改，然后尝试刷新。在数据加载之前，您将看不到花括号。
在随附的 ZIP 文件中，您可以找到一个（RegistrationsAJ - HTML）HTML 页面。下载它以供参考，代码如下：
在上述 HTML 中添加 AJ
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<style>
div.col-sm-2 {
font-size: 18px;
}
label {
font-weight: normal;
}
form {
background-color: whitesmoke;
padding: 10px;
padding-bottom: 10px;
}
form > div:not(:first-child) {
margin-top: 5px;
}
div.col-sm-4 > input[type=checkbox]:not(:first-child) {
margin-left: 10px;
}
div.container > div.row {
margin-top: 10px;
}
</style>
</head>
<body ng-app="RegApp">
<div class="container" ng-controller="RegistrationCtrl as reg" ng-init="reg.user.FirstName = 'Aditya'">
<form name="registrationForm" ng-submit="reg.SubmitDetails()" class="col-sm-offset-1">
<div class="row">
<div class="col-sm-2"> <label> First Name </label></div>
<div class="col-sm-3">
<input type="text" class="form-control" ng-model="reg.user.FirstName" autofocus />
</div>
<div class="col-sm-2 col-sm-offset-2"><label> Last Name </label> </div>
<div class="col-sm-3">
<input type="text" class="form-control" ng-model="reg.user.LastName" autofocus />
</div>
</div>
<div class="row">
<div class="col-sm-2"><label> Gender </label></div>
<div class="col-sm-3">
<input type="radio" name="gender" ng-model="reg.user.Gender" value="male" />M
<input type="radio" name="gender" ng-model="reg.user.Gender" value="female" />F
</div>
</div>
<div class="row">
<div class="col-sm-2"><label> Address </label></div>
<div class="col-sm-3">
<textarea class="form-control" ng-model="reg.user.Address"></textarea>
</div>
<div class="col-sm-2 col-sm-offset-2"><label> Country </label> </div>
<div class="col-sm-3">
<select class="form-control" ng-model="reg.user.Country" ng-options="o.name for o in reg.Countries"></select>
</div>
</div>
<div class="row">
<div class="col-sm-2"><label> Phone </label></div>
<div class="col-sm-3">
<input type="tel" class="form-control" ng-model="reg.user.Phone" />
</div>
</div>
<div class="row">
<div class="col-sm-2"><label> Hobbies </label></div>
<div class="col-sm-4">
<input type="checkbox" ng-model="reg.user.Hobbies.Gaming" ng-true-value="1" ng-false-value="0" />Gaming
<input type="checkbox" ng-model="reg.user.Hobbies.Travelling" ng-true-value="1" ng-false-value="0" />Travelling
<input type="checkbox" ng-model="reg.user.Hobbies.Gardening" ng-true-value="1" ng-false-value="0" />Gardening
</div>
</div>
<div class="row">
<div class="col-sm-2">
<button type="submit" disabled class="btn btn-success" style="width:100% !important">Submit</button>
</div>
</div>
</form>
<div class="row col-sm-offset-1" style="background-color:linen">
<h4>User Information</h4>
</div>
<div class="row col-sm-offset-1" style="background-color:lightsalmon;">
<div class="row">
<div class="col-sm-1">Name</div>
<div class="col-sm-4"> <span ng-bind="reg.FullName()"></span> </div>
</div>
<div class="row">
<div class="col-sm-1">Gender</div>
<div class="col-sm-4"> <span ng-bind="reg.user.Gender | uppercase"></span> </div>
</div>
<div class="row">
<div class="col-sm-1">Address</div>
<div class="col-sm-4"> <span ng-bind="reg.user.Address"></span> </div>
<div class="col-sm-4"> <span ng-bind="reg.user.Country.name"></span> </div>
</div>
<div class="row">
<div class="col-sm-1">Phone</div>
<div class="col-sm-4"> <span ng-bind="reg.user.Phone"></span> </div>
</div>
<div class="row">
<div class="col-sm-1">Hobbies</div>
<div class="row">
<div class="col-sm-1 " ng-repeat="hasHobby in reg.getHobbies()">
<span ng-bind="hasHobby"></span>
</div>
</div>
</div>
</div>
</div>
<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/angular.min.js"></script>
<script>
var app = angular.module("RegApp", []);
app.controller("RegistrationCtrl", function () {
var self = this;
this.Countries = [{ name: 'Country 1', }, { name: 'Country 2', }, { name: 'Country 3', }, { name: 'Country 4', }];
this.getHobbies = function () {
var a =[];
for (var prop in self.user.Hobbies)
if (self.user.Hobbies[prop] == 1)
a.push(prop);
return a;
}
this.FullName = function () {
return self.user.FirstName + " " + (function () { if (!self.user.LastName) return ""; return self.user.LastName; })();
}
});
</script>
</body>
</html>
哇！！！代码太长了，而且很混乱……不是吗？那么，让我们先找出我们在新文件中添加了什么。观察下面图片中的差异。
如果上面的图片缺失 => https://onedrive.live.com/redir?resid=76572BF81D528DBA!7162&authkey=!AEVQ0saUghWYbao&v=3&ithint=photo%2cPNG
图片左侧是我们的基本 HTML，右侧是添加到 HTML 的 AJ。如果您能看到，AJ 文件有很多更改，如果您看不到，请在新页面中打开图片并放大。
（AJ 与 HTML 是使用控制器进行的演示）
观察到的内容
ng-init：此指令用于在加载之前初始化值。因此，当您打开此文件时，您会看到 FirstName 字段已预先填充了 Name。
尝试移除 ng-init 并查看您的控制台，您会发现一个错误。这是因为我们在控制器中没有创建 reg.user 变量。只有当我们开始为 HTML 字段赋值时，这个变量才会被初始化或添加到控制器的作用域中。
当您在浏览器中打开第二个文件并开始为字段赋值时，它们会自动显示在用户信息部分。
如果您在控制器中找不到“re.user.*”变量，请不要感到困惑。这是 AJ 的一大优点。当您在作用域（HTML）中定义一个变量时，它会自动将其视为其成员。
接下来我们有表单验证
我们将在“深入了解 AJ - 第二部分”中讨论 AJ 中的表单验证和服务。
关注点
尝试玩转代码以获得更多头疼 ;) 你玩代码玩得越多，编码就越容易。
历史
在此处保持您所做的任何更改或改进的实时更新。