AngularJS의 기본구조
- 브라우저가 html을 로드 (DOM을 파싱한다.)
- Angular.js를 로드한다
- DOM Content Loaded Event를 기다린다.
- DOM이 모두 로드되면 ng-app 지시자를 찾는다.
- ng-app에서는 dependency injection 을 위해 사용되는 $injector를 생성한다.
- injector 지시어는 어플리케이션의 모델을 위한 컨텍스트가 되는 루트 스코프를 생성한다.
- 최종적으로 ng-app을 기준으로 하위DOM을 컴파일하고 rootScope와 링크시킨다.
(참고 : https://acaroom.net/ko/blog/youngdeok/angularjs%EC%9D%98-%EC%9D%B4%ED%95%B4)
scope 는 controller를 적용한 태그 내에서 사용할 변수나 함수를 저장해 놓을 수 있는 객체입니다.
rootScope 는 문서 전체에서 사용할 변수나 함수를 저장해 놓는 객체입니다.
$rootScope 를 지정한 app.run() 함수는 angularjs module 객체가 생성되면 실행되는 함수입니다.
출처: https://minimilab.tistory.com/49 [MINIMI LAB]
Module.config() - 모듈 설정 코드. config 메서드를 호출한 모듈이 로드된 후 호출할 함수를 인자로 받는다.
Module.run() - run 메서드의 인자로 넘겨준 함수는 모든 모듈이 로드될 때 호출된다.
출처: https://uxicode.tistory.com/entry/Moduleconfig-Moduleconstant-Modulerun [세줄코딩]
모듈개념은 아래 글과 링크를 참고해라.
- angular.module 함수를 사용해 모듈을 만들면 모듈 인스턴스가 반환되는데 해당 모듈 인스턴스는 컨트롤러, 서비스, 지사자, 필터들을 담는다.
출처: https://kshmc.tistory.com/entry/15-모듈Module [노력하는 개발자 & 꿈꾸는 개발자]
AngularJS와 Angular 간의 상호 호환성이 안된다고 하여...
AngualrJS 1.3.7 버전을 직접 다운로드 받아 사용하기로 함.
1. node.js 설치
가) node.js 설치
JavaScript 실행을 위해서 node.js 를 설치한다.
설치방법은 아래 링크 참조
https://goldencrab.tistory.com/entry/Nodejs-%EB%85%B8%EB%93%9C-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0
나) 웹 서버 설치(간단한 정적 자원용 웹서버)
npm install connect
버전 확인 : npm show connnect version ==> 현재 3.7.0 설치됨
connect 버전이 3. 대이면...다음 명령어도 실행해준다.
npm instsll serve-static
다) 테스트 프로그램 작성
server.js 파일을 아래와 같이 작성한다.
============================================================
var connect= require('connect');
var serverStatic = require('serve-static');
var port = 5000;
connect().use(
serverStatic("D:/OpenProjects/01_angular_dir") //docment root
).listen(port);
console.log("Static file server running at\n => http://localhost:" + port + "/\nCTRL + C to shutdown");
라) 실행
node server.js
2. AngularJS 설치
가) https://code.angularjs.org/1.3.7 에서 angular-1.3.7.zp 다운로드
나) 개발 디렉토리에 압축 해제...위에 server.js 와 동일 레벨에 압축해제된 폴더를 놓으면 됨.
3. Bootstrap 설치
가) https://getbootstrap.com/docs/5.1/getting-started/download/ 에서 bootstrap-5.1.3-dist.zip 다운로드
나) 압축을 풀어서 angular-1.3.7 디렉토리에 복사해 놓는다.
4. 최총테스트. test.html 파일 작성후, bootstrap과 angularJS 동작 확인
================================================================
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Test</title>
<script src="./angular-1.3.7/angular.js"></script>
<link href="./angular-1.3.7/bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet" />
<link href="./angular-1.3.7/bootstrap-5.1.3-dist/css/bootstrap-theme.css" rel="stylesheet" />
</head>
<body>
<div class="btn btn-dark">{{"AngularJS"}}</div>
<div class="btn btn-success">Bootstrap</div>
</body>
</html>
====================================================================
'IT > JavaScript와 Framework' 카테고리의 다른 글
| AngularJS ver.1.3.7 - 02-01 - 첫번째앱 (0) | 2022.02.16 |
|---|---|
| Node.js 노드 설치하기 (0) | 2022.02.16 |
| AngularJS 개념 잡기 (0) | 2022.02.16 |
| 윈도우10에 Angualr 설치하기(AngularJS아님. Node.js설치포함) (0) | 2022.02.16 |
| ECMAScript (Java Script) History (0) | 2022.02.08 |
댓글