메뉴

첫 번째 AngularJS 예제를 사용한 AngularJS 지시문

  • 메인
  • 다른
  • 첫 번째 AngularJS 예제를 사용한 AngularJS 지시문

angularjs directive with our first angularjs example

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

첫 번째 AngularJS 예제가있는 AngularJS 지시문 :

우린 가지고있다 AngularJS에 대한 간략한 소개 이전 튜토리얼에서. 이 튜토리얼은 AngularJS에 대해 알아야 할 중요한 사실을 설명합니다.

AngularJS 자바 스크립트를 기반으로 한 오픈 소스 웹 애플리케이션 프레임 워크입니다.

Google Corporation과 대규모 커뮤니티에서 관리합니다. AngularJS는 단일 페이지 애플리케이션을 공식화하는 데 발생하는 다양한 단점에 대한 답변입니다.

우리를 통해 읽으십시오 AngularJS 시리즈 전체 AngularJS 개념에 대한 심층적 인 지식을 얻으십시오.

안드로이드 폰에서 APK 파일을 찾는 방법

AngularJS 지시어 및 예제

AngularJS 애플리케이션 프레임 워크는 템플릿 역할을하며 웹 앱 개발 중에 직면하는 문제를 줄일 수 있습니다.

학습 내용 :

AngularJS 개요

AngularJS는 20에 Google에서 출시되었습니다.일2010 년 10 월, 현재는 다양한 단일 페이지 인터페이스 애플리케이션을위한 중요한 프레임 워크가되었습니다.

이것이 AngularJS가 빠른 속도로 기술 개발에도 불구하고 자리를 잡은 이유입니다. 크로스 플랫폼 인터페이스 기반 시스템은 더 효율적입니다.

AngularJS는 크로스 플랫폼 모바일 앱에 사용되는 프레임 워크 인 Apache Cordova를 보완하고 이점을 제공합니다. 경험을 향상시키고 웹 앱의 테스트 및 개발을 단순화하는 비전을 가지고 있으며 AngularJS 애플리케이션 개발을위한 강력한 프레임 워크를 제공합니다.

AngularJS를 사용하는 이유

다음은 AngularJS를 웹 애플리케이션 개발에 사용해야하는 다양한 기능과 이유입니다.

  1. 데이터 바인딩: 이 플랫폼은 모델과보기 콘텐츠 간의 데이터 자동 동기화를 제공하여 결과적으로 시간과 노력을 크게 절약합니다.
  2. 제어 장치: 이들은 특정 범위에 바인딩 된 JavaScript입니다.
  3. 서비스: AngularJS에는 많은 기본 제공 서비스가 있습니다. 예 : $ https
  4. 필터 : 이렇게하면 배열에서 항목의 하위 집합을 선택하는 데 도움이되고 새 배열로 반환됩니다.
  5. 지시어 : 속성, CSS 요소 등과 같은 DOM 요소의 마커입니다. 이들은 HTML의 사용자 정의 태그로 사용할 수 있습니다.
  6. 라우팅 : 단일 페이지 응용 프로그램을 만드는 데 도움이됩니다. # 기호 뒤의 URL에 지정되며 애플리케이션의 다른 콘텐츠에 대해 다른 URL을 만들 수 있습니다.
  7. MVC : Model, View 및 Controller를 나타냅니다. 디자인 패턴으로 앱을 모델, 뷰, 컨트롤러 등 여러 부분으로 나누는 데 사용됩니다.
  8. 딥 링킹 : 앱 프레임 워크의이 기능은 북마크를 위해 URL에 애플리케이션의 상태를 인코딩하는 데 도움이됩니다. 나중에 동일한 상태의 URL에서 앱을 복원 할 수도 있습니다.
  9. 의존성 주입 : AngularJS에는 개발자가 개발 및 테스트 프로세스를 더 쉽고, 일관되고, 간단하게 만드는 데 도움이 될 수있는 내장 된 종속성 주입 하위 시스템도 있습니다.
  10. 범위: 컨트롤러와 뷰 사이의 접착제 역할을하는 객체입니다.

AngularJS를 사용하는 방법?

개인적으로 저는 AngularJS보다 오늘날 시장에서 사용할 수있는 더 나은 프론트 엔드 웹 앱 개발 프레임 워크는 거의 없다고 생각합니다.

AngularJS를 사용하는 방법에 대한 자습서는 실망스럽지 않을 정도로 복잡하지 않으며 실제로 따라하기가 매우 쉽습니다. 양방향 바인딩 시스템, 템플릿 기능, 모듈화, 종속성 주입 시스템, AJAX 핸들링 기능 및이 프레임 워크의 다른 기능도 활용할 수 있습니다.

코딩을 시작하기 전에 MVC 개념 (모델,보기 및 컨트롤러), 'Hello World'스크립트 및 AngularJS의 다양한 기능에 대해 알아야합니다.

AngularJS 지시어

AngularJS는 많은 수의 지시어 다양한 HTML 요소를 애플리케이션 데이터와 연결할 수 있습니다. 키워드로 시작하는 기본 속성입니다. ng- .

AngularJS를 사용하는 동안 모든 페이지에 포함해야하는 가장 중요한 지시문은 다음과 같습니다.

ng-app -

AngularJS 애플리케이션의 시작점이며 본문 부분 요소와 같이 페이지의 나머지 부분을 둘러싸는 모든 요소에 추가되어야합니다. AngularJS는 페이지가로드 될 때마다이 측면을 찾고 코드의 모든 다양한 지시문을 자동으로 평가하는 경향이 있습니다.

AngularJS의 지시문은 다음과 같습니다.

# 1) ng-app :AngularJS 애플리케이션을 시작하는 데 사용됩니다. AngularJS 애플리케이션이 포함 된 웹 페이지가로드되면 루트 요소를 정의하여 애플리케이션을 자동으로 부트 스트랩합니다. HTML 코드에는 하나의 ng-app 지시문 만 사용해야합니다.

그러나 HTML 코드에서 둘 이상의 ng-app 지시문이 발견되면 첫 번째 모양이 사용됩니다.

통사론:

{body of the HTML code}

# 2) 열 :이것은 응용 프로그램을 초기화하는 데 사용됩니다.

초기화 목적으로 변수와 연관되어야하는 값 세트를 제공합니다. 이 지시문은 일반적으로 프로젝트 내의 특정 기능을 통해 발생하는 변수 초기화로 자주 사용되지 않습니다.

통사론:

# 3) ng 컨트롤러 : 함수를 기반으로 변수를 초기화해야 할 때 사용됩니다. 즉, 각 변수는 함수 로직에 따라 초기화되어야합니다. AngularJS는 객체와 함께 ng-controller 지시문에 지정된 함수를 호출합니다.

통사론:

app.controller(‘name of your function’,function($object){ Body of the controller/function});

# 4) ng- 모델 :AngularJS의 값을 응용 프로그램에서 제공하는 컨트롤에 바인딩하는 데 사용됩니다. 구체적으로 컨트롤러와 모델을 통해 입력으로 가져온 데이터는 사용자에게 표시 될 뷰 (w.r.t. MVC 모델)에 바인딩됩니다.

통사론:

Your Variable to be binded : var app = angular.module('myApp', ('ngAnimate'));

ng-show 및 ng-hide : 이러한 명령은 CSS 표시 스타일을 설정하여 얻을 수있는 요소를 숨기고 표시합니다.

AngularJS를 사용하면 사용자 지정 지시문을 정의 할 수도 있습니다. HTML의 기능을 확장하는 데 사용되며 '지시적'기능을 사용하여 정의됩니다. 단순히 활성화 된 요소를 대체합니다.

AngularJS 치트 시트는 저에게 생명의 은인이었습니다. 치트 시트에서 확인할 수있는 다른 지침이 많이 있습니다. AngularJS를 사용하여 사용자 지정 지시문을 작성하는 방법을 배울 수도 있습니다. 많은 문제를 단순화하기 위해 치트 시트에서 AngularJS 플랫폼의 모든 지침과 지침을 찾았습니다.

AngularJS 예제

간단한 AngularJS 예제는 다음과 같이 작성할 수 있습니다.

HTML 파일을 만들어야합니다. 예를 들어 , angularjsexample.html 아래 그림과 같이.

Welcome {{helloTo.title}} to the world of Tutorialspoint!

angular.module('myapp', ()) .controller('HelloController', function($scope) { $scope.helloTo = {}; $scope.helloTo.title = 'AngularJS'; });

위의 예에서 스크립트는 AngularJS 자바 스크립트.

AngularJS 플랫폼에서 매일 사용하는 앱이 얼마나 많은지 알면 놀랄 것입니다.

다음은 몇 가지 이름입니다.

참조에 의해 메소드에 Java 전달 배열
  • 수호자
  • PayPal
  • 제트 블루
  • 레고
  • 업 워크
  • 넷플릭스
  • 프리랜서
  • iStock

위의 이름에서이 프레임 워크를 활용하는 방법을 배우면 도달 할 수있는 높이가 분명합니다. 이 사이트는 게임의 최상위에 있으며 AngularJS에서 개발 되었기 때문에 성공의 큰 부분은 사이트의 효율성에 있습니다.

결론

예전처럼 모바일 또는 웹 사이트 용 단일 페이지 앱을 구축하고 개발하려는 경우 더 이상 보지 마십시오.

AngularJS는이 사이트가 응용 프로그램 개발을 훨씬 더 편안하고 응집력있게 돕고 만들기 때문에 원 스톱 상점입니다. 초보자에게만 좋은 것이 아니라 더 깊이 파고 들수록 경험을 통해 배우고 훌륭한 앱을 개발하는 경향이 있습니다.

한편, 최신 버전으로 업그레이드하는 경우 많은 노력을 기울일 필요가 없습니다. 몇 가지 새로운 명령을 배우고 새로운 조정 사항을 이해하는 것만으로도 새 버전에서 응용 프로그램 개발을 시작할 수 있습니다.

AngularJS를 사용하여 단일 페이지 웹 응용 프로그램을 개발하는 방법에 대해 자세히 알아 보려면 다음 자습서를 참조하십시오.

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

추천 도서

^