AngularJS로 웹 앱을 구축하기위한 초보자 가이드

angularjs 홈페이지

Google의 웹 앱 프레임 워크에 참여하세요

전문 자바 스크립트 개발자라면 아마 들어 보셨을 것입니다. Ember.js (오픈 소스 JavaScript 프레임 워크) 및 Backbone.js (RESTful JSON 인터페이스가있는 JavaScript 라이브러리). 하지만 익숙하지 않다면 AngularJS 그러나 웹 애플리케이션 용 HTML을 실제로 향상시킬 수있는 매우 매력적인 기능 중 일부를 놓칠 것입니다.

여기에서는 뛰어난 기능과 ​​시작하는 과정을 포함하여 매우 영웅적인 JavaScript MVW 프레임 워크 인 AngularJS를 맛볼 수 있습니다.



바라건대, 이것은 잘 구조화되고 유지 관리가 가능한 풍부한 웹 애플리케이션을 개발하는 데 도움이 될뿐만 아니라 향후 프로젝트를 위해 AngularJS를 선택해야하는 확실한 이유를 제공 할 것입니다. 의 시작하자!

어도비 포토샵의 스마트 오브젝트 란?

01. AngularJS 란?

Google에서 구축 한 AngularJS는 웹 개발자가 프런트 엔드 개발과 테스트를보다 쉽게 ​​수행 할 수 있도록 설계된 오픈 소스 웹 애플리케이션 프레임 워크입니다. AngularJS의 주요 목표는 MVC (모델-뷰-컨트롤러) 기능으로 웹 애플리케이션을 확장하는 것입니다. 완전히 확장 가능하고 라이브러리 종속성없이 실행되며 다른 라이브러리와도 잘 작동하는 클라이언트 측 JavaScript MVC / MVVM 프레임 워크입니다. 또한 특정 요구 사항에 맞게 모든 기능을 수정하거나 교체 할 수도 있습니다.

AngularJS는 2009 년 당시 Google 엔지니어였던 Adam Abrons와 Mi & scaron; ko Heverym이 개발했습니다. 공식 웹 사이트에서 언급했듯이 클라이언트 측에서 JavaScript, CSS 및 HTML 만 필요한 단일 페이지 웹 응용 프로그램을 만드는 데 가장 적합한 '동적 웹 응용 프로그램을위한 구조적 프레임 워크'입니다.

HTML을 템플릿 언어로 사용할 수 있으며 웹 애플리케이션의 구성 요소를 깔끔하고 간결하게 표현하기 위해 HTML 구문을 확장 할 수 있습니다. AngularJS는 JavaScript 코드를 더 잘 구성하고 테스트하기 쉽게 만들어 브라우저에 서버 기술에 대한 종속성 주입을 사용하는 방법을 알려줍니다.

AngularJS 사용 방법

AngularJS를 시작하는 것은 아주 쉽습니다. HTML 스크립트에 몇 가지 속성을 추가하여 5 분만에 간단한 Angular 앱을 만들 수 있습니다. 이것들은:

1. 태그에 'ng-app'지시문을 포함합니다. 페이지에서 AngularJS를 실행하여 페이지를 Angular 애플리케이션으로 정의합니다.

2. Angular 태그를 태그가 끝나는 페이지 하단에 배치합니다.

3. 일반 HTML을 추가합니다. HTML 속성은 AngularJS 지시문에 액세스하는 데 사용되는 반면 표현식 평가는 이중 대괄호 표기법으로 수행됩니다.

Today's tasks

  • {{task.name}}

여기서 ng-controller 지시문은 데이터를 제어하고 HTML에서 표현식을 평가하기 위해 Angular JS를 배치 할 수있는 네임 스페이스를 정의합니다. ng-repeat 지시문은 Angular repeater 객체이지만 표시 할 작업이있는 한 Angular에 목록 요소를 만들도록 요청합니다.

ipad mini 2를위한 최고의 스타일러스

오늘날 대부분의 프레임 워크는 기존 도구의 번들에 불과하지만 AngularJS는 차세대 프레임 워크로 개발자뿐만 아니라 디자이너에게도 똑같이 유용한 매우 매력적인 기능을 제공합니다. 다음은 개발자가 미래의 웹 애플리케이션을 멋지게 만드는 데 도움이되는 AngularJS의 놀라운 기능입니다.

지시어

지시문은 AngularJS의 가장 강력하고 강력한 기능 중 하나입니다. HTML을 확장 할 수 있으며 AngularJS에서 해당 작업을 페이지에 연결하는 데 사용됩니다. DOM 속성을 조작하고 특정 요소의 동작을 조정하는 데 사용할 수있는 사용자 정의 및 재사용 가능한 HTML 태그를 지정할 수 있습니다. 모든 지시문은 ng-로 시작하고 MVC 응용 프로그램과 분리 된 독립형 요소로 설계되었으며 HTML 속성에 배치됩니다.



주목할만한 AngularJS 지시어 중 일부는 다음과 같습니다.

  • ng-app :이 지시문은 Angular에 활성화 할 위치를 알려줍니다. 페이지를 Angular 애플리케이션으로 정의하려면 간단한 코드를 사용해야합니다..
  • ng-bind :이 지시문은 Angular에게 주어진 표현식의 값으로 HTML 요소의 텍스트 내용을 변경하고 해당 표현식의 값이 변경되면 텍스트를 업데이트하도록 지시합니다.
  • ng-model : ng-bind와 매우 유사하지만 select, textarea 또는 input과 같은 다른 지시문에 필요한 모델에 뷰를 바인딩합니다.
  • ng-class : 클래스 속성의 동적로드를 허용합니다.
  • ng-controller :이 지시문을 사용하면 HTML 표현식을 평가하기위한 JavaScript 컨트롤러 클래스를 지정할 수 있습니다.
  • ng-repeat : 컬렉션에서 주어진 루프 변수가 설정된 항목을 쉽게 반복합니다.
  • ng-hide 및 ng-show : 부울 표현식의 값을 사용하여이 지시문은 요소를 표시할지 여부를 결정합니다.
  • ngIf : 조건이 참인 경우 컴파일 된 요소의 복제본을 DOM에 다시 삽입 할 수있는 기본 if 문 지시문입니다. 조건이 거짓이면 DOM에서 요소를 제거합니다.

다음은 이벤트를 수신하고 결과적으로 $ 범위를 업데이트하는 지시문의 예입니다.

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: '' }; });

이 사용자 지정 지시문은 다음과 같이 사용할 수 있습니다.

늑대 몸을 그리는 방법

양방향 데이터 바인딩

데이터 바인딩은 아마도 AngularJS의 가장 지배적이고 주목할만한 기능 일 것입니다. 서버 백엔드의 부담을 많이 줄여 개발자가 상당한 양의 코드를 작성하지 않아도됩니다. 일반적인 웹 애플리케이션에서 코드베이스의 80 %는 DOM 조작, 순회 및 수신에 전념합니다. 데이터 바인딩은이 코드를 보이지 않게하므로 애플리케이션의 다른 중요한 사항에 집중할 수 있습니다.

전통적으로 대부분의 템플릿 시스템에는 단방향 데이터 바인딩이 있습니다. 모델 및 템플릿 구성 요소를 하나의 뷰로 병합합니다. 병합 후 모델에 대한 변경 사항은 뷰에 자동으로 반영되지 않습니다. 이러한 변경 사항을 반영하려면 개발자가 DOM 요소 및 속성을 수동으로 조작해야합니다. 이 프로세스는 사용자가 뷰를 변경하면 더 복잡하고 복잡해집니다. 그런 다음 개발자는 상호 작용을 해석하고 모델에 병합하고 뷰를 업데이트해야합니다.

단방향 데이터 바인딩 다이어그램

이미지 제공 : http://docs.angularjs.org

반대로 AngularJS는 모델과 DOM 간의 데이터 동기화를 처리하여 더 나은 방식으로 데이터 바인딩을 수행하며 그 반대의 경우도 마찬가지입니다.

양방향 데이터 바인딩 다이어그램

이미지 제공 : http://docs.angularjs.org

다음은 입력 값을에 바인딩하는 간단한 예입니다.

꼬리표.

Name:

Hello, {{yourName}}!

의존성 주입

AngularJS에는 개발자가 애플리케이션을 쉽게 개발, 이해 및 테스트 할 수 있도록하는 기본 제공 인젝터 하위 시스템이 있습니다. AngularJS의 종속성 주입은 구성 요소를 만들고, 종속성을 확보하는 방법을 처리하고, 요청시 다른 구성 요소에서 사용할 수 있도록합니다.

의존성 주입을 사용함으로써 AngularJS는 클라이언트 측 웹 애플리케이션에 전통적인 서버 측 서비스를 가져와 백엔드에 대한 부담을 줄이고 웹 애플리케이션을 훨씬 가볍게 만듭니다.

핵심 AngularJS 서비스에 대한 액세스 권한을 얻으려면 특정 서비스를 매개 변수로 추가해야합니다. AngularJS는 해당 서비스를 사용하고 싶다는 사실을 자동으로 인식하고 인스턴스를 사용할 수 있도록합니다.



function EditCtrl($scope, $location, $routeParams) { // Write something 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'];

템플릿

AngularJS에서 템플릿은 Angular 관련 속성 및 요소를 포함하는 HTML로 작성됩니다. 템플릿을 컨트롤러 및 모델의 정보와 결합함으로써 AngularJS는 브라우저에서 동적 뷰를 렌더링합니다.

다음은 사용할 수있는 Angular 요소와 속성입니다.

  • 필터 : 표시 할 데이터 형식화는이 요소에 의해 수행됩니다.
  • 양식 컨트롤 : 사용자 입력 유효성 검사에 사용됩니다.
  • 마크 업 : 이중 중괄호 표기법 {{}}을 사용하여 표현식을 요소에 바인딩합니다.
  • 지시어 : 재사용 가능한 DOM 구성 요소를 렌더링하거나 기존 DOM 요소를 확장하는 요소 또는 속성입니다.

아래의 코드는 지시문과 마크 업이있는 템플릿을 보여줍니다.

아마존 블랙 프라이데이 외장 하드 드라이브
{{buttonText}}

일반적인 애플리케이션에서 템플릿에는 단일 HTML 파일 (일반적으로 index.html)에 CSS, HTML 및 Angular 지시문이 있습니다.

테스팅

JavaScript는 동적이며 강력한 표현력으로 해석되지만 컴파일러의 도움을 거의받지 않습니다. 따라서 AngularJS 팀은 모든 JavaScript 코드가 일련의 엄격한 테스트를 거쳐야한다는 것을 잘 알고 있습니다. 따라서 AngularJS를 처음부터 테스트 할 수 있도록 설계하여 웹 애플리케이션을 가능한 한 쉽게 테스트 할 수 있습니다.

AngularJS는 의존성 주입을 최대한 활용하고, 모의와 함께 미리 번들로 제공되며, 행동-뷰 분리를 장려합니다. 엔드 투 엔드 테스트를 위해 AngularJS에는 테스트 결함을 제거하기 위해 AngularJS의 내부 작동을 이해하고 애플리케이션과의 사용자 상호 작용을 시뮬레이션하는 Protractor라는 엔드 투 엔드 테스트 실행기가 있습니다.

AngularJS의 또 다른 종류의 테스트는 개별 코드 단위를 테스트 할 수있는 단위 테스트입니다. 또한 Angular 팀은 Chrome 확장 프로그램도 만들었습니다. AngularJS Batarang ,이를 통해 개발자는 성능 병목 현상을 쉽게 감지하고 브라우저에서 애플리케이션을 디버깅 할 수 있습니다.

Ajeet Yadav는 다음과 관련된 전문 웹 개발자입니다. wordpressintegration.com , WordPress 테마 / 템플릿 변환 서비스에 고품질 Photoshop을 제공하는 유명한 웹 개발 회사입니다. 따르다 안녕하세요. 트위터에서.