AngularJS 부트 스트랩 세부 설명 및 샘플 코드

저자：Eve Cole 업데이트 시간：2025-08-28 04:00:03

AngularJS Studive Notes 시리즈의 첫 번째 기사에서 계속 쓸 수 있기를 바랍니다. 이 기사의 내용은 주로 http://docs.angularjs.org/guide/ 문서의 내용에서 비롯되지만 자신의 이해와 시도 결과를 추가합니다.

1. 요약

이 기사에서는 각도 초기화 과정과 필요할 때 각도를 수동으로 초기화하는 방법에 대해 설명합니다.

2. Angular <cript> 태그

이 예제는 권장 경로를 통해 Angular를 통합하여 자동 초기화를 달성하는 방법을 보여주는 데 사용됩니다.

 <! docType html> <html xmlns : ng = "http://angularjs.org"ng-app> <body> ... <script src = "angular.js"> </body> </html>

ScIPRT 태그를 페이지 하단에 놓습니다. 이렇게하면 Angular.js를로드하여 HTML의 로딩을 방지하여 응용 프로그램의 로딩 시간이 줄어 듭니다. http://code.angularjs.org에서 최신 버전의 AngularJS를 얻을 수 있습니다. 보안상의 이유로, 스크립트를로드하기 위해 제품 의이 주소를 직접 참조하지 마십시오. 그러나 그것이 연구와 학습을위한 것이라면 직접 연결되어 있는지는 중요하지 않습니다.

SELECT : Angular- [버전] .js는 읽기 편리하고 일일 개발 및 디버깅에 적합한 버전입니다.

SELECT : Angular- [버전] .min.js는 최종 제품에 사용하기에 적합한 압축 및 난독 화 된 버전입니다.

"ng-app"을 응용 프로그램의 루트 노드에 배치하십시오. Angular가 자동으로 응용 프로그램을 시작하려면 응용 프로그램을 자동으로 시작하려면 일반적으로 <html> 태그에 배치 할 수 있습니다.

구식 학교 스타일의 지시문 구문 "NG :"을 사용해야한다면 XML-Namespace를 HTML 태그에 "Please"에 추가해야합니다. (이것은 역사적 이유이며, 우리는 ng를 사용하지 않는 것이 좋습니다 :)

3. 자동 초기화

Angular는 DomContentLoaded 이벤트에서 자동으로 초기화되며 Angular는 NG-APP 지시문을 통해 귀하가 지정한 응용 프로그램 루트 노드를 찾을 수 있습니다. 발견되면 Angular는 다음을 수행합니다.

모듈과 관련된 지침을로드합니다.

응용 프로그램 관련 인젝터 (종속 관리자)를 만듭니다.

NG-APP으로 루트 노드를 지정하고 DOM의 관련 "컴파일"작업을 시작하십시오. 다시 말해, 페이지의 일부 (<html> 아님)를 루트 노드로 사용하여 각도의 범위를 제한합니다.

 <! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> bootstrap-auto </title> <style type = "text/css"> .ng-cloak {display : none; } </style> </head> <body> 여기 Ng-App 외부 ~~ {{1+2}} <Div Ng-App> 여기에 ng-app ~ ~~~ {{1+3*2}} </div> <Script SRC = "../ Angular-1.0.1.js"의 내부가 있습니다. type = "text/javaScript"> </script> </body> </html>

참고 : Angular.js 컴파일이 완료되기 전에 사용됩니다. 클래스 = "ng-cloak"메소드가 완료되면이 클래스 또는 속성이 삭제됩니다.) 템플릿을 숨기십시오.

4. 수동 초기화

초기화 프로세스를 추가로 제어하려면 (예 : 스크립트 로더를 통해 Angular.js를로드하거나 Angular 컴파일 페이지 전에 일부 작업을 수행 해야하는 경우) 대신 수동으로 호출 된 시작 방법을 사용할 수 있습니다.

다음 예는 NG-APP 사용과 동일합니다.

 <! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> bootstrap-manual </title> <style type = "text/css"> .ng-cloak {display : none; . type = "text/javaScript"> angular.element (document) .ready (function () {Angular.lement (angular.element (document.getElementById ( "rootofApp")));}); </script> </body> </html>

즉, 코드는 다음 단계로 작성할 수 있습니다.

1. 페이지 및 기타 코드가로드되면 응용 프로그램 템플릿의 루트 노드를 찾으십시오.

2. angular.bootstrap을 콜을하고 Angular를 실행 가능한 양방향 바인딩 응용 프로그램으로 컴파일하십시오!

우리는 앞으로 관련 기사를 계속 추가 할 것입니다. 이 사이트를 지원 해주셔서 감사합니다!