5가지 놀라운 AngularJS 기능

AngularJS는 개발자뿐만 아니라 디자이너에게도 매우 매력적인 기능을 제공하는 훌륭한 JavaScript 프레임워크입니다! 이 튜토리얼에서는 제가 가장 중요하다고 생각하는 기능과 이러한 기능이 다음 웹 애플리케이션을 더욱 향상시키는 데 어떻게 도움이 되는지 다룰 것입니다.

AngularJS가 무엇을 할 수 있는지 알아보려면 Envato Market에서 다양한 AngularJS 제품을 확인하세요. 이미지 자르기 도구, 전자상거래 웹 애플리케이션, JSON 편집기 등을 찾을 수 있습니다.

---

엘리베이터 피치: AngularJS 소개

AngularJS는 HTML, CSS 및 JavaScript를 수용하고 확장하는 동시에 눈에 띄는 결함 중 일부를 보완하는 방식으로 정말 강력한 작업을 수행할 수 있는 방법을 제공하는 새롭고 강력한 클라이언트 측 기술입니다. HTML이 동적 콘텐츠용으로 구축되었다면 바로 이것이었을 것입니다.

이 글에서는 "큰 그림"을 이해하는 데 가장 중요한 AngularJS 개념 중 일부를 다룰 것입니다. 내 목표는 이러한 기능 중 일부를 본 후 AngularJS를 사용하여 재미있는 것을 만들게 되는 것입니다.

---

기능 1: 양방향 데이터 바인딩

모델을 애플리케이션의 단일 정보 소스로 생각하세요. 모델의 애플리케이션에서 무엇이든 읽거나 업데이트할 수 있습니다.

데이터 바인딩은 아마도 AngularJS에서 가장 멋지고 유용한 기능일 것입니다. 상용구 코드를 많이 작성하지 않아도 됩니다. 일반적인 웹 애플리케이션에는 DOM 탐색, 조작 및 수신 전용 코드 베이스가 80% 정도 포함될 수 있습니다. 데이터 바인딩을 사용하면 이 코드가 사라지므로 애플리케이션에 집중할 수 있습니다.

모델을 애플리케이션의 단일 정보 소스로 생각하세요. 모델의 애플리케이션에서 무엇이든 읽거나 업데이트할 수 있습니다. 데이터 바인딩 지시문은 모델을 애플리케이션 뷰에 투영하는 기능을 제공합니다. 이 투영은 원활하며 사용자의 노력이 필요하지 않습니다.

전통적으로 모델이 변경되면 개발자는 해당 변경 사항을 반영하기 위해 DOM 요소와 속성을 수동으로 조작해야 합니다. 이것은 양방향 거리입니다. 한편으로, 모델의 변화는 DOM 요소의 변화를 주도합니다. 반면 DOM 요소를 변경하려면 모델을 변경해야 합니다. 사용자 상호작용은 상황을 더욱 복잡하게 만듭니다. 개발자가 상호작용을 해석하고, 이를 모델에 통합하고, 뷰를 업데이트하는 일을 담당하기 때문입니다. 이는 애플리케이션의 크기와 복잡성이 증가함에 따라 제어하기 어려워지는 매우 수동적이고 번거로운 프로세스입니다.

더 좋은 방법이 있을 거예요! AngularJS의 양방향 데이터 바인딩은 DOM과 모델 간의 동기화를 처리하며 그 반대의 경우도 마찬가지입니다.

이것은 입력 값을 <h1></h1> 요소에 바인딩하는 방법을 보여주는 간단한 예입니다.

으아악

설정하기가 너무 쉽고 거의 마법에 가깝습니다...

---

기능 2: 템플릿

AngularJS는 템플릿에서 문자열로 작동하지 않는다는 점을 인식하는 것이 중요합니다. 이것은 모두 브라우저 DOM입니다.

AngularJS에서 템플릿은 평범한 HTML입니다. 모델을 뷰에 투영하는 방법에 대한 지침을 포함하도록 HTML 어휘가 확장되었습니다.

브라우저는 HTML 템플릿을 DOM으로 구문 분석합니다. 그러면 DOM은 AngularJS 컴파일러의 입력이 됩니다. AngularJS는 지시문이라고 불리는 지시문을 렌더링하기 위해 DOM 템플릿을 순회합니다. 전체적으로 이러한 지시문은 애플리케이션 보기에 대한 데이터 바인딩 설정을 담당합니다.

AngularJS는 템플릿에서 문자열로 작동하지 않는다는 점을 인식하는 것이 중요합니다. AngularJS에 대한 입력은 HTML 문자열이 아닌 브라우저 DOM입니다. 데이터 바인딩은 문자열 연결이나 innerHTML 변경이 아닌 DOM 변환입니다. 문자열 대신 DOM을 입력으로 사용하는 것이 AngularJS와 형제 프레임워크의 가장 큰 차이점입니다. DOM을 사용하면 지시문 어휘를 확장하고 자신만의 지시문을 만들 수 있으며 심지어 재사용 가능한 구성 요소로 추상화할 수도 있습니다!

이 접근 방식의 가장 큰 장점 중 하나는 디자이너와 개발자 간의 긴밀한 워크플로를 생성한다는 것입니다. 디자이너는 HTML을 정상적으로 마크업할 수 있으며 개발자는 바인딩을 통해 배턴 및 후크 기능을 쉽게 인계받을 수 있습니다.

다음은 템플릿에 ng-repeat 指令循环 images 数组并填充本质上是 img 사용하고 있는 것의 예입니다.

으아악 으아악

부담으로 AngularJS는 새로운 구문을 배우거나 애플리케이션에서 템플릿을 가져오도록 강요하지 않는다는 점도 언급할 가치가 있습니다.

---

기능 3: MVC

AngularJS는 원래 MVC 소프트웨어 디자인 패턴의 기본 원칙을 클라이언트 측 웹 애플리케이션 구축 방식에 통합합니다.

MVC 또는 모델-뷰-컨트롤러 패턴은 사람들마다 다양한 의미를 갖습니다. AngularJS는 전통적인 의미의 MVC를 구현하지 않지만 MVVM(Model-View-ViewModel)에 더 가깝습니다.

模型

模型只是应用程序中的数据。 模型只是普通的旧 JavaScript 对象。无需从框架类继承、将其包装在代理对象中或使用特殊的 getter/setter 方法来访问它。事实上，我们正在处理普通的 JavaScript，这是一个非常好的功能，它减少了应用程序的样板。

视图模型

视图模型是一个提供特定数据和方法来维护特定视图的对象。

viewmodel 是位于 AngularJS 应用程序中的 $scope 对象。 $scope 只是一个简单的 JavaScript 对象，带有一个小型 API，旨在检测和广播其状态的更改。

控制器

控制器负责设置初始状态并使用控制行为的方法增强 $scope。值得注意的是，控制器不存储状态，也不与远程服务交互。

视图

视图是 AngularJS 解析并编译 HTML 以包含呈现的标记和绑定后存在的 HTML。

该部门为构建您的应用程序奠定了坚实的基础。 $scope 具有对数据的引用，控制器 定义行为，视图 处理布局并将交互移交给控制器 > 做出相应的回应。

---

功能4：依赖注入

AngularJS 有一个内置的依赖注入子系统，可以帮助开发人员使应用程序更易于开发、理解和测试。

依赖注入（DI）允许您请求依赖项，而不必去寻找它们或自己创建它们。将其视为“嘿，我需要 X”的一种方式，DI 负责为您创建和提供它。

要访问核心 AngularJS 服务，只需将该服务添加为参数即可； AngularJS 将检测到您需要该服务并为您提供一个实例。

  function EditCtrl($scope, $location, $routeParams) {
       // Something clever here...
  }

您还可以定义自己的自定义服务并使这些服务也可用于注入。

  angular.
      module('MyServiceModule', []).
      factory('notify', ['$window', function (win) {
      return function (msg) {
          win.alert(msg);
      };
  }]);

  function myController(scope, notifyService) {
      scope.callNotify = function (msg) {
          notifyService(msg);
      };
  }

  myController.$inject = ['$scope', 'notify'];

---

功能 5：指令

指令是我个人最喜欢的 AngularJS 功能。您是否曾经希望您的浏览器能够为您带来新的功能？好吧，现在可以了！这是 AngularJS 我最喜欢的部分之一。这也可能是 AngularJS 最具挑战性的方面。

指令可用于创建用作新的自定义小部件的自定义 HTML 标记。它们还可以用于用行为“装饰”元素并以有趣的方式操作 DOM 属性。

这是一个简单的指令示例，该指令侦听事件并相应地更新其 $scope。

  myModule.directive('myComponent', function(mySharedService) {
      return {
          restrict: 'E',
          controller: function($scope, $attrs, mySharedService) {
              $scope.$on('handleBroadcast', function() {
                  $scope.message = 'Directive: ' + mySharedService.message;
              });
          },
          replace: true,
          template: '<input>'
      };
  });

然后，您可以像这样使用这个自定义指令。

  <my-component ng-model="message"></my-component>

将应用程序创建为离散组件的组合，可以非常轻松地根据需要添加、更新或删除功能。

---

奖励功能：测试

AngularJS 团队强烈认为任何用 JavaScript 编写的代码都需要进行一组强大的测试。他们在设计 AngularJS 时考虑到了可测试性，因此可以尽可能轻松地测试您的 AngularJS 应用程序。所以没有理由不这样做。

鉴于 JavaScript 是动态的、解释性的，而不是编译性的，对于开发人员来说，在编写测试时采用严格的思维方式非常重要。

AngularJS 完全是从头开始编写的，可测试。它甚至配备了端到端和单元测试运行程序设置。如果您想查看实际效果，请查看 Angular-seed 项目：https://github.com/angular/angular-seed。

一旦有了种子项目，对其进行测试就轻而易举了。输出如下所示：

API 文档充满了端到端测试，这些测试在说明框架的某个部分应该如何工作方面做了令人难以置信的工作。一段时间后，我发现自己直接进行测试以了解某些内容是如何工作的，然后可能会阅读其余的文档来找出答案。

---

结论

我们已经介绍了我喜欢的 AngularJS 众多功能中的六个。我相信这六个功能不仅对于启动和运行 AngularJS 至关重要，而且对于以可维护和可扩展的方式将应用程序组合在一起也是至关重要的。

AngularJS 的网站 http://angularjs.org 有大量的工作示例和大量优秀的文档。我还建议您查看 AngularJS 邮件列表上的精彩社区。​​p>

让我知道你的想法！

위 내용은 5가지 놀라운 AngularJS 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!