메뉴

AngularJS를 사용하여 단일 페이지 애플리케이션 빌드 (예제 포함 자습서)

  • 메인
  • 다른
  • AngularJS를 사용하여 단일 페이지 애플리케이션 빌드 (예제 포함 자습서)

build single page application using angularjs

문제를 제거하기 위해 도구를 사용해보십시오

AngularJS를 사용하여 단일 페이지 애플리케이션 SPA 구축 :

AngularJS에 대해 알아야 할 모든 것 이전 튜토리얼에서 설명했습니다. 이 튜토리얼에서는 AngularJS를 사용하여 단일 페이지 애플리케이션을 개발하는 방법에 대해 더 많이 알게 될 것입니다.

Netflix에 대해 알고 있습니까? 웹 사이트를 방문한 적이 있습니까?

답이 '예'라면 단일 페이지 애플리케이션이 어떻게 생겼는지 알 것입니다! 탐색 AngularJS에 대한 완전한 가이드 AngularJS에 대한 명확한 지식을 얻으려면.

AngularJS를 사용하는 단일 페이지 애플리케이션

자세히 설명하겠습니다!

Netflix는 클라이언트 측 프레임 워크에서 AngularJS를 사용하여 웹 애플리케이션의 사용자 기능을 풍부하게합니다.

UI를 매우 간단하게 만들었습니다. 온천 (단일 페이지 응용 프로그램). 즉, 전체 페이지를 새로 고치지 않고 Netflix 내 탐색이 수행됩니다.

학습 내용 :

단일 페이지 응용 프로그램의 장점

다음은 단일 페이지 응용 프로그램의 몇 가지 장점입니다.

  • 향상된 사용자 경험.
  • 적은 대역폭이 사용되므로 웹 페이지가 더 빨리 새로 고쳐집니다.
  • 애플리케이션 (index.html, CSS 번들 및 javascript 번들)을 프로덕션 환경에 배포하는 것이 더 쉬워졌습니다.
  • 코드 분할을 수행하여 번들을 여러 부분으로 분할 할 수 있습니다.

AngularJS를 사용하여 SPA를 개발하는 이유는 무엇입니까?

요즘에는 ember.js, backbone.js 등과 같은 시장에서 사용할 수있는 많은 자바 스크립트 애플리케이션이 있습니다.하지만 여전히 많은 웹 애플리케이션이 AngularJS를 개발에 통합하여 SPA를 생성합니다.

AngularJS가 확실한 승자 인 이유는 다음과 같습니다.

# 1) 의존성 금지

AngularJS와 달리 backbone.js는 underscore.js 및 jQuery에 대한 종속성이 있습니다. 반면 엠버 JS는 핸들 바와 jQuery에 의존합니다.

# 2) 라우팅

AngularJS를 사용하여 빌드 된 웹 페이지 간 탐색은 다른 자바 스크립트 프레임 워크를 사용하여 빌드 된 웹 페이지와 비교할 때 매우 간단합니다. AngularJS에서 사용되는 지시문은 가볍기 때문에 AngularJS의 성능 메트릭을 알아볼 수 있습니다.

# 3) 테스트

AngularJS를 사용하여 애플리케이션을 구축하면 셀레늄을 사용하여 품질 보증을 위해 자동화 된 테스트를 수행 할 수 있습니다. 이것은 AngularJS 개발을 사용하여 구축 된 애플리케이션의 멋진 기능 중 하나입니다.

char를 int C ++로 변환하는 방법

angularJS 기능

(이미지 출처 edureka.co)

# 4) 데이터 바인딩

AngularJS는 양방향 데이터 바인딩을 지원합니다. 즉, 모델이 업데이트 될 때마다 AngularJS가 MVC 아키텍처를 따르기 때문에 뷰도 업데이트됩니다.

따라서 사용자는 선호도에 따라 데이터를 볼 수 있습니다.

# 5) 브라우저 지원

AngularJS는 IE 버전 9 이상을 포함한 대부분의 브라우저에서 지원됩니다. 모바일, 태블릿 및 노트북에서도 작동하도록 조정할 수 있습니다.

# 6) 민첩성

AngularJS는 민첩성을 지원하므로 비즈니스가 경쟁적인 작업 환경에 진입 할 때 새로운 요청을 처리 할 수 ​​있습니다. 컨트롤러는 이러한 요청을 처리하기 위해 MVC 아키텍처에서 구현 될 수 있습니다.

AngularJS에는 약 30000 개의 모듈이 있으며 신속한 애플리케이션 개발을 위해 쉽게 사용할 수 있습니다. 개발자가 기존 응용 프로그램을 사용자 지정하려는 경우에는 처음부터 전체 응용 프로그램을 빌드하는 대신 이미 사용 가능한 모듈을 사용하고 코드를 조정할 수 있습니다.

크로스 브라우저 테스트를 수동으로 수행하는 방법

또한 AngularJS의 기여자와 전문가가 많기 때문에 토론 포럼에 게시하는 모든 질문에 신속하게 응답 할 수 있습니다.

AngularJS를 사용하여 단일 페이지 애플리케이션을 개발하는 방법은 무엇입니까?

다음은 AngularJS를 사용하여 SPA를 개발하는 데 관련된 다양한 단계입니다.

1 단계: 모듈 생성

AngularJS는 MVC 아키텍처를 따릅니다. 따라서 모든 AngularJS 애플리케이션에는 컨트롤러, 서비스 등으로 구성된 모듈이 포함됩니다.

var app = angular.module('myApp', ());

2 단계 : 간단한 컨트롤러 정의

app.controller('FirstController', function($scope) { $scope.message = 'Hello from FirstController'; });

3 단계 : HTML 코드에 AngularJS 스크립트 포함

다음에서 모듈 (1 단계에서 생성됨)을 지정합니다. ng-app 속성 및 컨트롤러 (2 단계에서 정의 됨) ng 컨트롤러 속성.

{{message}}

First Second Third

(Angular가 ng-template 지시문에 의해 정의 된 템플릿을 감지하면 해당 콘텐츠를 템플릿 캐시에로드하고 콘텐츠를 가져 오기 위해 Ajax 요청을 수행하지 않습니다.)

HTML이 localhost에서 실행되면 다음 페이지가 표시됩니다.

첫 번째 웹 페이지

하이퍼 링크가 첫번째 두번째 세번째 페이지에는 라우터가 있으며이를 클릭하면 새로 고침없이 해당 웹 페이지로 이동합니다.

두 번째 웹 페이지

세 번째 웹 페이지

그게 다야! 이 블로그에 설명 된대로 간단한 SPA를 만들 수 있기를 바랍니다. 성공적으로 출력을 얻으면 같은 줄에서 복잡한 SPA를 사용해 볼 수 있습니다.

결론

단일 페이지 애플리케이션은 Netflix와 같은 브랜드가 선택하는 요즘 매우 인기가 있습니다.

SPA를 개발하는 경우 AngularJS가 확실한 선택입니다. 그러나 AngularJS의 새 버전, 즉 Angular는 더 많은 기능을 제공합니다. 그렇지 않으면 Node JS 애플리케이션 개발 등과 같은 다양한 기술이 있습니다.

Angular 버전 업그레이드에 대해 알아 보려면 다가오는 튜토리얼을 계속 지켜봐주십시오!

이전 튜토리얼 | NEXT 튜토리얼

추천 도서

^