AngularJS란 무엇입니까? AngularJS_AngularJS 소개

AngularJS란 무엇인가요?

AngularJS는 동적 웹 애플리케이션용으로 설계된 구조적 프레임워크입니다. 이를 통해 HTML을 템플릿 언어로 사용할 수 있으며, HTML 구문을 확장하여 애플리케이션 구성 요소를 보다 명확하고 간결하게 구축할 수 있습니다. 그 혁신은 데이터 바인딩과 종속성 주입을 사용하여 많은 코드를 작성하지 않아도 된다는 것입니다. 이는 모두 브라우저 측 Javascript를 통해 구현되므로 모든 서버 측 기술과 완벽하게 통합됩니다.

AngularJS는 애플리케이션 구축 시 HTML의 단점을 극복하도록 설계되었습니다. HTML은 정적 텍스트 표시를 위해 설계된 훌륭한 선언적 언어이지만 웹 애플리케이션을 구축하는 데에는 취약합니다. 그래서 나는 브라우저가 내가 원하는 것을 할 수 있도록 몇 가지 작업(원한다면 트릭)을 수행했습니다. 형식날짜

일반적으로 동적 애플리케이션을 구축할 때 정적 웹페이지 기술의 단점을 해결하기 위해 다음 기술을 사용합니다.

1. 클래스 라이브러리 - 클래스 라이브러리는 웹 애플리케이션 작성에 도움이 되는 함수 모음입니다. 제어권을 갖는 것은 귀하의 코드이며 라이브러리를 언제 사용할지 결정하는 것은 귀하입니다. 클래스 라이브러리에는 jQuery 등이 포함됩니다.

2. 프레임워크 - 프레임워크는 이미 구현된 특별한 웹 애플리케이션입니다. 특정 비즈니스 로직으로만 채우면 됩니다. 여기서 프레임워크는 특정 애플리케이션 논리에 따라 코드를 호출하는 선도적인 역할을 합니다. 프레임워크에는 녹아웃, 새싹코어 등이 포함됩니다.

AngularJS는 애플리케이션 구축 시 HTML 자체의 단점을 보완하기 위해 다른 접근 방식을 사용합니다. AngularJS를 사용하면 브라우저가 지시문이라고 부르는 구조를 사용하여 새로운 구문을 인식할 수 있습니다. 예:

1. 데이터 바인딩에 이중 중괄호 {{}} 구문을 사용합니다. 2. DOM 제어 구조를 사용하여 DOM 조각을 반복하거나 숨깁니다.
3. 지원 양식 및 양식 유효성 검사
4. 관련 DOM 요소에 논리 코드를 연결하는 기능
5. HTML을 재사용 가능한 구성 요소로 그룹화하는 기능.

엔드 투 엔드 솔루션

AngularJS는 웹 애플리케이션을 위한 엔드 투 엔드 솔루션을 시도합니다. 이는 웹 애플리케이션의 작은 부분이 아니라 완전한 엔드투엔드 솔루션임을 의미합니다. 이렇게 하면 CRUD(생성 추가, 검색 쿼리, 업데이트 업데이트, 삭제 삭제) 애플리케이션을 구축할 때 AngularJS가 매우 "의견적"이 됩니다(원본 텍스트는 독단적이므로 다른 방법이 많지 않음을 의미). 그러나 "완고함"이 있더라도 응용 프로그램을 빌드할 때 "완고함"이 시작점에만 있음을 보장하고 여전히 변경할 수 있는 유연성을 제공합니다. AngularJS의 뛰어난 기능 중 일부는 다음과 같습니다.

1. CRUD 애플리케이션을 구축하는 데 사용할 수 있는 모든 것에는 데이터 바인딩, 기본 템플릿 식별자, 양식 유효성 검사, 라우팅, 딥 링크, 구성 요소 재사용 및 종속성 주입이 포함됩니다.

2. 테스트에는 단위 테스트, 엔드투엔드 테스트, 시뮬레이션 및 자동화된 테스트 프레임워크가 포함됩니다.
3. 디렉토리 레이아웃과 테스트 스크립트를 시작점으로 하여 애플리케이션을 시드합니다.

AngularJS의 귀여움

AngularJS는 개발자에게 더 높은 수준의 추상화를 제공하여 애플리케이션 개발을 단순화합니다. 다른 추상화 기술과 마찬가지로 일부 유연성이 손실됩니다. 즉, 모든 애플리케이션이 AngularJS에 적합한 것은 아닙니다. AngularJS는 주로 CRUD 애플리케이션 구축과 관련이 있습니다. 다행스럽게도 WEB 애플리케이션의 최소 90%는 CRUD 애플리케이션입니다. 하지만 AngularJS를 사용하여 빌드하는 데 적합한 것이 무엇인지 이해하려면 AngularJS를 사용하여 빌드하는 데 적합하지 않은 것이 무엇인지 이해해야 합니다.

예를 들어 게임, 그래픽 인터페이스 편집기, 빈번하고 복잡한 DOM 작업이 포함된 애플리케이션은 CRUD 애플리케이션과 매우 다르며 AngularJS로 구축하기에 적합하지 않습니다. 이와 같은 상황에서는 jQuery와 같은 더 가볍고 간단한 기술을 사용하는 것이 더 나을 수 있습니다.

간단한 AngularJS 예제

다음은 양식이 포함된 일반적인 CRUD 애플리케이션입니다. 양식 값의 유효성을 먼저 확인한 후 총 값을 계산하는 데 사용되며 이는 로컬 스타일로 형식화됩니다. 먼저 이해해야 할 개발자 간의 몇 가지 일반적인 개념은 다음과 같습니다.

1. 데이터 모델(data-model)을 뷰(UI)에 연결합니다. 2. 사용자 입력을 쓰고 읽고 확인합니다.

3. 모델에 따라 새로운 값을 계산합니다.
4. 출력 형식을 현지화합니다.

index.html:

코드 복사 코드는 다음과 같습니다.

   
       
       
    머리>
   
       

            송장:
           

           

           
                수량 비용
               
                   
                   
               
            테이블>
           
            총계: {{수량 * 비용 | 통화}}
       

    본문>

script.js:

复代码 代码如下:

함수 InvoiceCntl($scope) {
    $scope.qty = 1;
    $scope.cost = 19.95;
}

엔드투엔드 테스트:

复代码 代码如下:

it('Angular 바인딩을 표시해야 합니다.', function() {
    기대(바인딩('qty * 비용')).toEqual('$19.95');
    input('qty').enter('2');
    input('비용').enter('5.00');
    기대(바인딩('qty * 비용')).toEqual('$10.00');
});
함수 InvoiceCntl($scope){$scope.qty = 1;$scope.cost = 19.95;}

运行效果：

复主代码 代码如下:

송장:
수량 비용
총계: {{qty * 비용 | 통화}}

试一下上 这个例子, 然后我们一起来看下这个例子의 작업 원리. ``标签里, 我们用一个`ng-app`标识符标明这是一个AngularJS应用.这个`ng-app`标识符会使AngularJS**자체动初始化**(자동 초기화)你적应용입니다. 我们用``标签来加载AngularJS脚本：

复主代码 代码如下:

수량:
비용:

이 입력 상자의 위젯은 매우 평범해 보이지만 다음 사항을 깨닫는다면 특별할 것입니다.

1. 페이지가 로드되면 AngularJS는 위젯에 선언된 모델 이름(수량, 비용)에 따라 동일한 이름의 변수를 생성합니다. MVC 디자인 패턴에서는 이러한 변수를 M(모델)으로 생각할 수 있습니다.

2. 위 위젯의 입력에는 특별한 능력이 있습니다. 데이터를 입력하지 않았거나 입력한 데이터가 유효하지 않은 경우 입력 상자가 자동으로 빨간색으로 변합니다. 입력 상자의 이 새로운 기능을 사용하면 개발자가 CRUD 애플리케이션에서 일반적인 필드 유효성 검사 기능을 더 쉽게 구현할 수 있습니다.

마지막으로 신비한 이중 중괄호 {{}}를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

총계: {{수량 * 비용}}

이 {{expression}} 태그는 AngularJS 데이터 바인딩입니다. 표현식은 표현식과 필터({{ 표현식 | 필터 }})의 조합일 수 있습니다. AngularJS는 입력 및 출력 데이터의 형식을 지정하는 필터를 제공합니다.

위 예에서 {{}}의 표현식은 AngularJS에게 입력 상자에서 얻은 데이터를 곱한 다음 곱셈 결과를 현지 통화 스타일로 형식화한 다음 페이지에 출력하도록 지시합니다.

우리는 AngularJS 메소드를 호출하지도 않았고 프레임워크 사용과 같은 특정 로직을 작성하지도 않았으며 위의 기능만 완료했다는 점을 언급할 가치가 있습니다. 이 구현의 이유는 브라우저가 동적 웹 애플리케이션의 요구 사항을 충족할 수 있도록 정적 페이지를 생성하기 위해 이전보다 더 많은 작업을 수행했기 때문입니다. AngularJS는 동적 웹 애플리케이션 개발을 위한 임계값을 클래스 라이브러리나 프레임워크가 필요하지 않은 지점까지 낮춥니다.

AngularJS의 “Zen Tao(개념)”

Angular는 뷰(UI)를 구축하고 동시에 소프트웨어 로직을 작성할 때 명령형 코드가 비즈니스 로직을 표현하는 데 매우 적합하지만 선언적 코드가 명령형 코드보다 훨씬 낫다고 믿습니다.

1. DOM 작업과 애플리케이션 논리를 분리하는 것은 코드의 조정 가능성을 크게 향상시킬 수 있는 매우 좋은 아이디어입니다. 2. 테스트와 개발을 동등하게 취급하는 것은 매우 좋은 생각입니다. 테스트의 어려움은 코드 구조에 따라 크게 달라집니다. 3. 클라이언트와 서버를 분리하는 것은 양쪽에서 병렬 개발을 가능하게 하고 양쪽에서 코드 재사용을 가능하게 하는 특히 좋은 방법입니다.

4. 프레임워크가 UI 설계부터 비즈니스 로직 작성, 테스트까지 전체 개발 과정에서 개발자를 안내할 수 있다면 개발자에게 큰 도움이 될 것입니다.
5. "복잡성을 단순함으로 줄이고 복잡성을 아무것도 아닌 것으로 줄이는 것"은 항상 좋습니다.

AngularJS를 사용하면 다음과 같은 악몽에서 벗어날 수 있습니다.

1. 콜백 사용: 콜백을 사용하면 코드의 가독성이 저하되고 코드가 조각화되어 원래 비즈니스 로직을 보기가 어려워집니다. 콜백과 같은 일부 일반적인 코드를 제거하는 것은 좋은 일입니다. JavaScript 언어의 설계로 인해 작성해야 하는 코드를 대폭 줄이면 애플리케이션의 논리를 더 명확하게 볼 수 있습니다.

2. DOM 요소를 조작하는 코드를 수동으로 작성: DOM 조작은 AJAX 애플리케이션의 매우 기본적인 부분이지만 항상 "투박"하고 오류가 발생하기 쉽습니다. 선언적 방식으로 설명된 UI 인터페이스는 애플리케이션 상태가 변경됨에 따라 변경될 수 있으므로 낮은 수준의 DOM 조작 코드를 작성할 필요가 없습니다. AngularJS로 작성된 대부분의 애플리케이션에서 개발자는 더 이상 DOM 자체를 조작하기 위해 코드를 작성할 필요가 없지만 원하는 경우 계속 작성할 수 있습니다.

3. UI 인터페이스에서 데이터 읽기 및 쓰기: AJAX 애플리케이션의 대부분은 CRUD 작업입니다. 일반적인 프로세스는 서버 측의 데이터를 내부 개체로 구성한 다음 개체를 HTML 양식으로 컴파일하는 것입니다. 양식을 수정한 후 오류가 있으면 오류가 표시됩니다. 데이터는 내부 개체로 재구성된 다음 서버로 반환됩니다. 이 과정에서 반복적으로 작성해야 하는 코드가 너무 많아 코드가 항상 특정 비즈니스 로직이나 비즈니스 세부 사항보다는 애플리케이션의 전체 실행 프로세스를 설명하는 것처럼 보입니다.

4. 시작하기 전에 많은 기본 코드를 작성해야 합니다. 일반적으로 "Hello World" 애플리케이션을 구현하려면 많은 기본 코드를 작성해야 합니다. AngularJS를 사용하면 공식적으로 애플리케이션 작성을 쉽게 시작할 수 있는 몇 가지 서비스가 제공되며 이러한 서비스는 Guice와 같은 종속성 주입 종속성 주입을 통해 애플리케이션에 자동으로 추가됩니다. 귀하의 신청서. 특히, 자동화된 테스트의 초기화 과정도 완벽하게 파악할 수 있습니다.