AngularJS 프레임 워크는 기본적으로 프론트 엔드 프로젝트에서 사용됩니다. 나는 전에이 프레임 워크에 대해 몰랐고, 최근에 인수했기 때문에 잘 배울 계획이었습니다. 예전에는 PC 쪽 이었지만 이제는 모바일 프로젝트를 인수했습니다. 모바일 UI 프레임 워크는 Ionic + Vordova를 사용하지만 부트 스트랩을 사용하지 않습니다. 주로 iOS + Android 앱 인터페이스를 사용합니다. 나는 이온 성 프레임 워크에 대해 잘 모르고 익숙해지기 위해 시간을 보내야합니다. Angularjs Learning Novices는 저를 수정하도록 환영합니다.
Angularjs는 무엇입니까?
간단히 말해서, 스크립트 태그를 통해 웹 페이지에 추가되는 JavaScript의 프레임 워크입니다. 즉, AngularJS를 사용할 때 다음 코드를 소개해야합니다.
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
일반적으로 <body> 요소의 하단에 스크립트를 배치하는 것이 좋습니다. 이는 웹 페이지의 로딩 속도를 향상시키는 것입니다. HTML 로딩은 스크립트로드의 대상이되지 않기 때문입니다.
Angularjs는 무엇입니까?
AngularJS를 사용하면 최신 단일 페이지 응용 프로그램 (SPA : 단일 페이지 응용 프로그램)을보다 쉽게 개발할 수 있습니다.
• AngularJS는 응용 프로그램 데이터를 HTML 요소에 바인딩합니다.
• AngularJS는 HTML 요소를 복제하고 반복 할 수 있습니다.
• AngularJS는 HTML 요소를 숨기고 표시 할 수 있습니다.
• AngularJS는 HTML 요소 "뒤에"코드를 추가 할 수 있습니다.
• AngularJS는 입력 확인을 지원합니다.
예를 들어, 모바일 터미널은 기본적으로 단일 페이지 비교를 사용하며 각도 라우팅 변환을 사용하여 수행됩니다. 현재 프로젝트와 마찬가지로 단일 페이지도 사용합니다. 즉, 메인 페이지에서 점프 된 페이지는 모두 메인 페이지에서 수행됩니다. 스크린 샷은 다음과 같습니다.
Angularjs 표현
Angularjs 표현식은 이중 브레이스로 작성됩니다. {{expression}}.
AngularJS 표현식은 NG- 결합 지시문과 유사한 HTML에 데이터를 바인딩합니다.
AngularJS는 표현식이 작성된 위치에서 데이터를 "출력"합니다.
AngularJS 표현식은 JavaScript 표현식과 매우 유사합니다. 리터럴, 연산자 및 변수를 포함 할 수 있습니다.
<! doctype html> <!-태그 앵글 르지 (Tag AngularJs)는 전체 html 페이지를 처리하고 응용 프로그램을 부팅하고 응용 프로그램을 부팅합니다-> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> </head> <body> <p> 이름 : {{ "Ting"+"Feng"}} </p> <p> 번호 : {{5+5}} </p> <div ng-init = "person = {name : 'tingfeng', age : '13 '}"> <p> 이름 : {{person.name}} age : {{person.age}} </p> </div> </body> </html>HTML에서 AngularJS의 적용
주로 NG 지정을 통해 HTML을 확장합니다. AngularJS 지시문은 NG로 접두사로 표시된 HTML 속성으로, MVC, 모듈 식, 명령 시스템 (지침) 및 데이터베이닝 기능이 포함되어 있습니다.
NG-INIT :이 지침은 AngularJS 응용 프로그램 변수를 초기화합니다. 예를 들어 다음 열이 있습니다.
<! docType html> <!-태그 앵글 르지 (Tag AngularJS) 전체 HTML 페이지를 처리하고 응용 프로그램을 안내하고 응용 프로그램을 안내합니다-> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.orgularjs.orgular-1.0.1.min.js"> </head> </head> </head>. ng-init = "name = 'tingfeng'"> <p> 이름은 다음과 같습니다
NG-APP :이 지침은 AngularJS 응용 프로그램이 정의되었음을 나타냅니다. 일반적으로 HTML 뒤에 배치되면 NG-App 지시문을 로컬로 사용할 수도 있습니다. 예를 들어, <div ng-app>, angularjs 스크립트는 div에서만 실행되므로 여기에서 모든 컨텐츠가 관리를위한 AngularJS임을 의미합니다.
ng-model :이 지시문은 응용 프로그램에 대한 바인딩 요소 값 (예 : 입력 상자의 값)을 말합니다.
NG-BIND :이 지침은 응용 프로그램 데이터를 HTML보기에 바인딩합니다. 해당 지침을 사용하여 AngularJS를 사용하여 HTML 페이지를 작동하십시오. 사용 방법에 대한 코드를 살펴 보겠습니다.
현재 NG 모델을 사용하여 SetName 모델 변수에 바인딩하십시오. 입력 상자에 값을 입력하면 해당 SetName도 변경됩니다. 직접 테스트 할 수 있습니다.
$ SCOPE에 대한 설명
$ SCOPE 란 무엇입니까? 그 기능은 무엇입니까? 그것을 사용하는 방법?
간단히 말해서, 스코프는 특성 및 메소드가있는 객체와 유사한 pojo (plainoldjavaScriptObject)입니다. 속성 및 메소드는 특성과 메소드와 유사한 pojo (plainoldjavaScriptObject)입니다. AngularJS의 MVC는 모두 $ 범위의 도움으로 이루어집니다.
특징 : 1. 표현식의 실행 환경 (또는 범위)입니다.
2. 스코프는 DOM 태그와 평행 한 트리 구조로, 스코프를 포함하는 트리 구조이며, 이는 트리 구조 인 DOM 태그와 평행 한 루트 스코프를 포함하는 트리 구조입니다.
3. 스코프는 부모의 범위가 상속부의 속성과 방법을 상속받을 것입니다.
4. $ 스코프는 DOM과 유사한 이벤트를 전파 할 수 있으며, 이는 위 또는 아래로 전파 할 수 있습니다.
5. $ 스코프는 MVC의 기초 일뿐 만 아니라 나중에 양방향 바인딩을 구현하기위한 기초이기도합니다.
Angularjs의 구성 요소
템플릿 : 즉, HTML 및 CSS 파일을 작성하여 응용 프로그램의보기를 보여줍니다. AngularJS는 HTML에서 자체 HTML 태그를 만들 수 있습니다!
컨트롤러 : Ajax와 달리 이미 AngularJS에 내장되어 있으므로 리스너 또는 DOM 컨트롤러를 작성할 필요가 없습니다. 혜택 : 쓰기, 테스트, 유지 및 이해하기 쉽습니다.
모델 데이터 : 모델은 도메인 객체의 속성으로 AngularJS에서 확장됩니다. 모델의 데이터는 JS 객체, 배열 또는 원시 유형 일 수 있지만 모두 AngularJS 스코프 객체에 속합니다.
AngularJS의 범위를 이해하는 방법?
즉, 범위는 템플릿, 모델 및 컨트롤러와 함께 작동하는 본드로 간주 될 수 있습니다. AngularJS는 범위를 사용하며 템플릿에 정보, 데이터 모델 및 컨트롤러도 있습니다. 모델과보기를 분리하는 데 도움이 될 수 있지만 동기화됩니다! 모델의 변경 사항은 즉시보기에 반영되며보기에 대한 변경 사항은 모델에 즉시 반영됩니다.
보기 : AngularJS에서는 뷰가 HTML 템플릿을 통해 모델을 렌더링 한 후 맵핑입니다. 즉, 모델이 언제 변경 되든 AngularJS는 정션 지점을 실시간으로 업데이트하고보기를 업데이트합니다.
우체국에 더 직관적입니다!
<! docType html> <html ng-app = "helloAngular"> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> <cript> // modular var (angular. control 템플릿 HelloAngularMymodule.controller ( "helloAngular", [ '$ scope', function helloAngular ($ scope) {$ scope.value = {name : 'jiangting'};}]); </script> </head> <body> <!-mvc-view angular-> <div ng-controller = "helloangular"> － 컨트롤러는 helloangular <p> {{value.name}}, hello! </p> </p> </p> </p> </html>입니다.컨트롤러, 즉 컨트롤러, 즉 컨트롤러가 데이터를 작동하고 바인딩하고 HTML 페이지에 표시하는 것을 살펴 보겠습니다.
AngularJS 모듈 (모듈)은 AngularJS 응용 프로그램을 정의합니다.
AngularJS 컨트롤러 (컨트롤러)는 AngularJS 응용 프로그램을 제어하는 데 사용됩니다.
NG-APP 지시문은 응용 프로그램을 정의하고 NG-Controller는 컨트롤러를 정의합니다. 위의 열을 사용하여 다음을 봅시다.
AngularJS 모듈은 응용 프로그램을 정의합니다.
var myModule = Angular.Module ( "HelloAngular", []); control 제어 템플릿 HelloAngular
AngularJS 컨트롤러 제어 응용 프로그램 :
myModule.controller ( "helloAngular", [ '$ scope', function helloAngular ($ scope) {$ scope.value = {이름 : 'jiangting'};}]);프론트 엔드 MVC를 이해하십시오
컨트롤러 기능 정보 :
1. 컨트롤러를 가져 가려고하지 마십시오. 컨트롤러는 일반적으로 작은보기에만 책임이 있습니다.
2. 컨트롤러에서 DOM을 직접 작동하지 않으면 책임이 아닙니다.
3. 컨트롤러에서 데이터 필터링 작업을 수행하지 않으면 필터 서비스가 있습니다.
4. 컨트롤러에서 데이터를 포맷하지 않으면 NG는 매우 유용한 양식 컨트롤을 가지고 있습니다.
5. 컨트롤러는 서로 호출하지 않습니다. 컨트롤러 간의 상호 작용은 이벤트를 통해 수행됩니다. 필터 서비스를 통해 이루어집니다. 4. 컨트롤러의 데이터를 형식화하지 마십시오. 매우 유용한 양식 컨트롤이 있습니다. 5. 컨트롤러는 서로 호출하지 않습니다. 컨트롤러 간의 상호 작용은 이벤트를 통해 수행됩니다. 범위를 통해 수행됩니다.
명령 시스템을 사용자 정의하는 방법을 살펴 보겠습니다. 코드는 다음과 같습니다.
<! docType html> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> <cript> // instruction system = Angular.module (mymodule ", []); myModule.directive ( "hello", function () {return {reter {extrict : 'e', template : '<div> hi 모두! </div>', -html 태그 대체 : true}});지침에는 이후에 3 개의 매개 변수가 반환되는데, 여기서 템플릿 중간은 삽입 된 HTML 태그를 나타냅니다. 이제 HTML 코드를 직접 작성하고 AngularJS에 작성하는 방법을 볼 것입니다.
원래 정적 HTML 코드는 다음과 같습니다.
<ul> <li> <span> new1 </span> <p> 단지 테스트 page1 </p> </li> <li> <li> <span> new2 </span> <p> 단지 테스트 page2 </p> </li> </ul>
AngularJS로 수정하는 방법은 다음과 같습니다.
<! doctype html> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.js"> </script> <cript> // $ scope는 컨트롤러의 스코프입니다. // AngularJS 범위 : 템플릿으로 간주 될 수 있습니다. 애플리케이션이 시작되면 루트 범위가 생성되고 컨트롤러의 범위는 루트 범위의 일반적인 후속 자입니다. 함수 NewsCtrl ($ scope) {$ scope.news = [{ "content": "new1", "access" commas};}}} </script> </head> <body ng-controller = "newsctrl"> <ul> <li ng-repeat = "new in News"> {{new.content}} <p> {{new.introad위는 편집자 (i)가 소개 한 AngularJS의 기본 기능에 대한 분석입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!