AngularJS 표현식의 자세한 예

최근에는 가지고 놀 수 있는 크로스 플랫폼(pcapppad)을 만들고 싶고 많은 기술을 연구했습니다:

android, ios, H5, Bootrap, angle, angle2, ApiCloud, WeChat 애플릿

안드로이드의 족쇄는 제외 그리고 iOS 자체(시스템)와 다른 것들은 크로스 플랫폼이 될 수 있습니다. 특히 ApiCloud 및 WeChat 애플릿 개발 SDK 수준 솔루션은 매우 인기가 있지만 기술 주권 측면에서 그들은 다른 사람의 것에 너무 의존적입니다.

H5와 부트스트랩은 전후 반응성이 매우 좋습니다. 엔드 프레임은 기본적으로 축소될 수 있습니다.

물론 vue.js 등과 같은 많은 프런트엔드 프레임워크가 있습니다.

왜인지는 모르겠지만 현재 Angular에 관심이 있습니다. 관심은 가장 뻔뻔한 행동 매력입니다. 예를 들어 아름다운 소녀에게 강한 관심을 가지고 있습니다. . . . (~~농담입니다)

그럼 '그녀'에게 다가갈 수 있는 방법을 찾아야죠~~

앵글에 가까워지고 싶어요~~

정보 수집부터 시작하세요:

그녀는 어디에 있나요? 에서 왔어?

AngularJS[1]는 2009년에 탄생했으며 Misko Hevery와 다른 사람들이 만들었고 나중에 Google에 인수되었습니다. 많은 Google 제품에서 사용되어 온 뛰어난 프런트엔드 JS 프레임워크입니다. AngularJS에는 MVC, 모듈화, 자동화된 양방향 데이터 바인딩, 의미 태그, 종속성 주입 등 많은 기능이 있으며 그 중 가장 핵심은 다음과 같습니다.

그녀의 어떤 점이 그렇게 매력적인가요?

AngularJS는 애플리케이션 구축 시 HTML의 단점을 극복하도록 설계되었습니다. HTML은 의사 정적 텍스트 디스플레이 디자인을 위한 좋은 선언적 언어이지만 웹 애플리케이션을 구축하는 데에는 취약합니다.

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

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

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

------글쎄, 충분하지는 않습니다

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

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

------기대되시나요?

------------우리의 모든 인터넷 행동은 장바구니에 항목을 추가하거나 빼는 것과 같이 데이터 포인트를 하나씩 CRUD하는 것에 지나지 않습니다(+ -). , 항공권 확인, 티켓 확인, 연락하지 않는 WeChat 친구 삭제, 주문하기------------

추가 탐색:

< ;html> 태그에서는 ng-app을 사용합니다. 식별자는 이것이 AngularJS 애플리케이션임을 나타냅니다.

이 ng-app 식별자는 AngularJS가 자동으로 애플리케이션을 초기화하도록 합니다.

<script> 태그를 사용하여 AngularJS 스크립트를 로드합니다. </script>

태그의 ng-model 속성에 대해 AngularJS는 자동으로 데이터를 두 방향으로 바인딩합니다.

동시에 간단한 데이터 검증도 수행했습니다.

Quantity:Cost:

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

페이지가 로드되면 AngularJS는 다음 지침을 따릅니다. 선언된 모델 이름(수량, 비용)은 동일한 이름의 변수를 생성합니다.

MVC 디자인 패턴에서는 이러한 변수를 M(모델)로 생각할 수 있습니다.

위 위젯의 입력에는 특별한 기능이 있습니다.

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

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

총계:{{qty *cost |currency}} 이 {{expression}} 태그는 AngularJS의 데이터 바인딩입니다. 표현식은 표현식과 필터({{ 표현식 | 필터 }})의 조합일 수 있습니다.

AngularJS는 입력 및 출력 데이터 형식을 지정하는 필터를 제공합니다.

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

우리는 AngularJS 메소드를 호출하지도 않았고 프레임워크 사용과 같은 특정 로직을 작성하지도 않았으며 위의 기능만 완료했다는 점을 언급할 가치가 있습니다.

이 구현의 이유는 브라우저가 동적 웹 애플리케이션의 요구 사항을 충족할 수 있도록 정적 페이지를 생성하기 위해 이전보다 더 많은 작업을 수행했기 때문입니다.

AngularJS는 클래스 라이브러리나 프레임워크가 필요하지 않을 정도로 동적 웹 애플리케이션의 개발 임계값을 낮춥니다.

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

DOM 작업과 애플리케이션 로직을 분리하는 것은 매우 좋은 아이디어이며, 이는 코드의 조정 가능성을 크게 향상시킬 수 있습니다.

테스트와 개발을 동일하게 처리하는 것은 매우 좋은 아이디어이며 테스트는 매우 어렵습니다. 상당 부분은 코드 구조에 따라 다릅니다.

클라이언트와 서버 측을 분리하는 것은 양쪽에서 병렬 개발을 가능하게 하고 양쪽에서 코드를 재사용할 수 있도록 하는 특히 좋은 방법입니다. UI 설계부터 비즈니스 로직 작성, 테스트까지 개발자가 개발 과정에서 안내하는 데 큰 도움이 될 것입니다.

"복잡성을 단순함으로 줄이고 단순성을 0으로 줄이는 것이 좋습니다." " .

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

AngularJS 표현식

Edit

AngularJS 표현식은 이중 중괄호({{ 표현식 }}) 안에 작성됩니다. [2]

AngularJS 표현식은 데이터를 HTML에 바인딩하는데, 이는 ng-bind 지시어와 유사합니다.

AngularJS는 표현식이 작성된 데이터를 "출력"합니다.

AngularJS 표현식은 JavaScript 표현식과 매우 유사합니다. 리터럴, 연산자 및 변수를 포함할 수 있습니다.

예시 {{ 5 + 5 }} or {{ firstName + " " + lastName }}

Angular를 처음 알게 됐고 다음 약속을 기다리며~~~ 같이 갈래~ ~~ V-V

위 내용은 AngularJS 표현식의 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!