지금부터 AngularJS 를 사용 하 는 세 가지 중요 한 이유 가 있 습 니 다.

이유 1: Google 개발 의 프레임 워 크
개원 계 의 많은 구 조 는 개발 자 들 이 개인 적 인 관심 이나 열정 으로 개발 한 것 임 을 알 아야 한다. 예 를 들 어 Cappucino 와 Knockout 이다.anguar. js 는 인터넷 거인 구 글 이 개발 했다.이것 은 당신 이 더욱 강 한 지역 사회의 지 지 를 가지 고 있다 는 것 을 의미한다.아무 도 첫날 부터 하나의 프레임 을 사용 하 기 를 원 하지 않 는 다. 다음날 이 프레임 이 버 려 진 것 을 발견 하 자!
사실 구 글 이 자바 script 의 전단 프레임 워 크 를 개발 하려 고 시도 한 것 은 이번 이 처음 이 아 닙 니 다. 자바 코드 를 자바 script 코드 로 바 꾸 는 데 도움 을 주 는 웹 Toolkit 을 기억 하고 있 을 것 입 니 다.과거 구 글 의 웨 이브 프로 모 션 은 그것 으로 프로젝트 를 개발 했다.HTML 5, CSS 3, javascript 의 발전 에 따라 구 글 은 웹 애플 리 케 이 션 이 순수 자바 만 사용 하 는 것 을 의미 하 는 것 이 아니 라 는 것 을 발견 했다.
AngularJS 는 표준 화 된 웹 응용 구 조 를 개발 하 는 데 도움 을 주 고 클 라 이언 트 응용 에 대한 미래 개발 에 사용 할 템 플 릿 을 제공 합 니 다.
versin 1.0 은 6 개 월 전에 이미 많은 응용 실천 을 했 는데 상업 응용 과 제품 을 포함한다.Angularjs 는 선택 할 수 있 는 구조 로 서 반드시 전체 개발 지역 사회의 스타 가 될 것 이다.AngualrJS 는 구 글 이 개발 한 제품 이기 때문에 당신 에 게 튼튼한 기반 이 있 을 것 입 니 다. 그것 이 당신 의 최선 의 선택 이 될 것 이 라 고 믿 습 니 다!
이유 2: AngularJS 는 매우 전면적 이다.
Backbone 이나 JavaScriptMVC 와 같은 anguar 는 빠 른 전단 개발 솔 루 션 입 니 다.데이터 구동 을 개발 할 수 있 는 다른 플러그 인 이나 구조 가 없습니다.다음은 AnguarJS 의 일부 특성 을 보 여 줍 니 다.

편리 한 REST: RESTful 은 표준 서버 와 클 라 이언 트 가 소통 하 는 방식 이 되 었 다.자바 script 코드 를 사용 하면 서버 에서 데 이 터 를 빠르게 얻 을 수 있 습 니 다.AugularJS 는 이 를 JS 대상 으로 만 들 고 Model 로 MVVM (model view view - model) 디자인 모델 을 따른다.

MVVM 구세주: Model 은 ViewModel 과 상호작용 $scope 대상 을 통 해 Model 의 변 화 를 감청 할 것 이다.이것 은 View 를 통 해 보 내 고 렌 더 링 할 수 있 으 며 HTML 로 코드 를 보 여 줍 니 다.View 는 $routeProvider 대상 을 통 해 지배 할 수 있 기 때문에 View 와 Controller 를 깊이 있 게 연결 하고 조직 하여 내 비게 이 션 URL 로 만 들 수 있 습 니 다.AngualrJS 는 $scope 대상 을 초기 화하 고 제어 할 수 있 는 무상 태 컨트롤 러 를 동시에 제공 합 니 다.

데이터 바 인 딩 과 의존 주입: MVVM 디자인 모델 에서 모든 것 이 발생 하 더 라 도 자동 으로 UI 와 통신 합 니 다.이것 은 wrapper, getter / setter 방법 이나 class 정 의 를 제거 하 는 데 도움 을 줍 니 다.AngularJS 는 이 모든 내용 을 처리 하 는 데 도움 을 줄 것 입 니 다. 따라서 기본 javascript 데이터 형식 을 처리 하 는 것 처럼 데 이 터 를 처리 할 수 있 습 니 다. 예 를 들 어 배열 처럼 간단 합 니 다.물론 복잡 한 데 이 터 를 사용자 정의 로 처리 할 수도 있다.모든 일이 자동 으로 발생 하기 때문에 main () 을 호출 하여 코드 를 실행 하지 않 고 의존 관 계 를 통 해 구동 할 필요 가 없습니다.

확장 가능 한 HTML: 대부분의 사 이 트 는 비 의미 적 <div> 라벨 로 구축 되 어 있 습 니 다.CSS class 에서 관련 DOM 계층 구 조 를 정의 해 야 합 니 다.AngularJS 를 사용 하면 XML 처럼 HTML 을 조작 하여 탭 과 속성 정 의 를 완성 할 수 있 습 니 다.AngularJS 는 자신의 컴 파일 러 와 directives 를 통 해 관련 설정 을 완성 합 니 다.

HTML 템 플 릿 사용: Mustache, Hogan. js 또는 handlerbars 를 사용 한 적 이 있다 면 AngularJS 의 템 플 릿 엔진 문법 을 빠르게 이해 할 수 있 습 니 다. 순수한 HTML 이 어야 합 니 다.AngularJS 는 DOM 탐색 을 통 해 이러한 기능 을 완성 하고 위 에서 언급 한 directives 를 사용 합 니 다.템 플 릿 은 DOM 요소 로 Angular 컴 파일 러 에 전달 되 며 확장, 실행 또는 재 활용 이 가능 합 니 다.문자열 이 아 닌 DOM 구성 요 소 를 가지 고 있 습 니 다. DOM 트 리 를 직접 조작 할 수 있 도록 해 줍 니 다.

기업 등급 의 테스트: AnguarJS 는 제3자 의 플러그 인 이나 프레임 워 크 에 의존 하지 않 습 니 다. 테스트 를 포함 합 니 다.QUnit, Mocha 또는 Jasmine 에 익숙 하 다 면 Angular 의 유닛 테스트 와 Scenario Runner 를 이해 하 는 데 매우 간단 하 다.

이상 의 기본 적 인 원칙 들 은 Angular 를 사용 하여 효율 적 인 성능 을 유지 할 수 있 는 코드 를 만 드 는 데 도움 을 줄 수 있 습 니 다.코드 저장 데이터 만 있 으 면 AnguarJS 는 모든 중량급 콘 텐 츠 를 처리 하 는 데 도움 을 주 고 부 클 라 이언 트 의 멋 진 체험 을 제공 합 니 다!
원인 3: 몇 분 이면 개발 을 시작 할 수 있 습 니까?
Angular 를 배 우 는 것 은 매우 간단 하 다.HTML 에 몇 개의 속성 을 추가 하면 5 분 동안 응용 프로그램 을 만 들 수 있 습 니 다!ng - app directive 를 <html> 탭 에 추가 하면 Angular 가 실행 해 야 한 다 는 것 을 알 수 있 습 니 다.

<html lang="en" ng-app>

Angular <script> 탭 을 <head> 탭 에 추가 합 니 다.

<head>
...meta and stylesheet tags...
 <script src="lib/angular/angular.js"></script>

정상 적 인 HTML 탭 을 추가 합 니 다.AngularJS directive 는 HTML 속성 에 접근 할 수 있 으 며, 폼 은 두 개의 큰 괄호 로 표 시 됩 니 다.

<body ng-controller="ActivitiesListCtrl"> <h1>Today's activities</h1> <ul> <li ng-repeat="activity in activities"> {{activity.name}} </li> </ul> </body> </html>

ng - controller directive 는 이름 공간 을 설정 하 였 습 니 다. 여기 에는 angular 와 관련 된 자바 script 을 추가 하여 데이터 와 표현 식 을 처리 할 수 있 습 니 다.ng - repeat 는 angular 의 중복 대상 으로 일련의 대상 요 소 를 만 들 수 있 습 니 다.

function ActivitiesListCtrl($scope) {
  $scope.activities = [
    { "name": "Wake up" },
    { "name": "Brush teeth" },
    { "name": "Shower" },
    { "name": "Have breakfast" },
    { "name": "Go to work" },
    { "name": "Write a Nettuts article" },
    { "name": "Go to the gym" },
    { "name": "Meet friends" },
    { "name": "Go to bed" }
  ];
 }

여기 서 우 리 는 이름 이 앞의 ng - controller directive 와 마찬가지 로 페이지 에서 해당 하 는 Angular 방법 을 찾 아 실행 할 수 있 는 방법 을 만 들 었 습 니 다.템 플 릿 의 activities 목록 에 접근 하기 위해 $(scope) 대상 을 전 달 했 습 니 다.activities 에 대응 하 는 name 을 제공 합 니 다. 페이지 에서 '{expression}' 표현 식 을 사용 합 니 다.또는 서버 에 데 이 터 를 저장 하면 AJAX 로 데 이 터 를 가 져 올 수 있 습 니 다.

function ActivitiesListCtrl($scope) {
  $http.get('activities/list.json').success(function (data) {
    $scope.activities = data;
  }
}

지정 한 HTTP GET 방법 으로 로 컬 javascript 데 이 터 를 간단하게 바 꿉 니 다.파일 이름 을 전달 하여 관련 데 이 터 를 가 져 왔 습 니 다.이것 은 jQuery 의 방식 과 매우 유사 하 다.
이상 저 희 는 success 방법 으로 데 이 터 를 되 돌려 주 고 $scope 에 데 이 터 를 연결 합 니 다.
정적 목록 이 잘 보이 지만 사용자 선택 에 따라 자동 으로 정렬 되 기 를 바 랍 니 다.간단 한 드 롭 다운 메뉴 를 추가 합 니 다.

<h3>Sort:</h3>
<select>
   <option value="name">Alphabetically</option>
 </select>

지시 어 추가:

<select ng-model="sortModel">

마지막 으로, 우 리 는 sortModel 을 식별 하기 위해 <li> 라벨 을 수정 했다.

<li ng-repeat="activity in activities | orderBy: sortModel">

해결!관건 은 ng - repeat 에 추 가 된 필터 입 니 다.orderby 필 터 는 선택 한 내용 을 통 해 내용 을 걸 러 내 는 데 도움 을 줍 니 다.
저희 코드 에 사용자 의 상호작용 사건 을 감청 하지 않 았 음 을 주의 하 십시오.콜백 이나 이벤트 처 리 를 사용 하지 않 았 습 니 다.이 모든 것 이 Angular 내부 에서 처리 되 었 습 니 다.
물론 AngularJS 는 우리 에 게 완전한 튜 토리 얼 을 제공 하여 웹 애플 리 케 이 션 을 만 드 는 데 도움 을 주 었 습 니 다. 관심 이 있다 면 보 세 요!
총결산
AngularJS 는 자바 script 의 주류 프레임 워 크 가 되 었 습 니 다. 웹 개발 에 전문 적 으로 종사 할 수 있 도록 도와 주 었 습 니 다. 성숙 한 js 전단 프레임 워 크 를 찾 거나 평가 하면 AngularJS 응용 은 평가 대상 중 하나 가 됩 니 다.무엇 보다 무료 다운로드 - AngularJS. org.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

기초 정리 - 1

문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

지금부터 AngularJS 를 사용 하 는 세 가지 중요 한 이유 가 있 습 니 다.

좋은 웹페이지 즐겨찾기