-
Angular.js[1] - 설정 , 모듈 , 컨트롤러카테고리 없음 2018. 2. 19. 01:11
- Anuglar.js
- JavaScript 기반의 오픈 소스 프론트엔드 웹 어플리케이션 프레임워크
Angular.js 의 강점으로는 양뱡향 데이터바이딩 구현, 자바스크립트 상에서 MVC 패턴을 구현 ,다이렉티브로 태그를
커스터마이징 가능하다는 장점 등으로 알려져있다.
뭐 아직까지는 정말 그러한 장점을 가지고 있는지는 잘 모르겠지만.. 하나의 프레임 워크라는 점에선 개발자들로서는 눈독들일수 밖에 없다.
코드의 재사용성, 유지보수성을 높이기 위한 프레임워크 , JavaScript 기반의 백 엔트 단에서의 웹 프레임워크는 Express 가 있다는 걸 알고 있었는데
이번엔 프론트 엔드 이다.(JavaScript 는 정말 놀라운 언어라고 생각이 듬..)
먼저 Angular.js 을 HTML 에 설정 하는 부분이다.
제일 먼저 Angular.js는 JavaScript 파일 이기에 script 태그로 추가를 해줘야 한다.
<html ng-app="">
// ng-app 을 가진 <html> 태그가 Angular.js 어플리케이션의 주인임을 알려주고 하위 모든 요소들도 Angular로 다루어진다.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> </script>
// head 부분에 Angular.js 를 로드하는 부분 그 후 ng-app 지시어를 찾는다.
</head>
<body>
</body>
</html>
Angular.js 를 로드 하는 방식으로 CDN 방식을 사용하였는데 여기서 CDN 은 html 파일에서 참조하는 css, javascript 파일이나 다른 리소스 파일을 웹사이트 서버가 아닌 다른 공유 공간에 두고 여러 웹사이트가 참조할 수 있게 하는 서비스를 의미한다.
파일을 다운로드 하는것보다 웹사이트 구축 시, 별도 다운로드가 필요없고 페이지 로딩 속도가 빠르다는 장점이 있다.- Modulehtml 옆에 붙여있는 ng-app 은 Angular.js 의 모듈과 매칭이 된다.여기서 모듈이란 대부분의 어플리케이션은 구동하기 위한 시발점인 메인 메소드를 가지는데 Angular.js 단에서의 메인메소드 역할을 하는 개념이 모듈이다.angular.module('myApp', []);
모듈 문법 자체는 angular.module('모듈이름',[]) 로 정의 되는데
첫번째 매개변수는 사용자가 사용할 모듈명을 명시하여 ng-app 지시어와 매칭되도록 ng-app 에서도 사용할 모듈명을 명시해준다.
위 예제 같은 경우에는 html 단에 ng-app="myApp" 이라고 적어줘야한다.
두번째 매개변수는 Dependency 라고 하며 외부 모듈을 참조하여 사용하는 부분이다.
[] 대갈호안에 사용할 외부모듈을 명시해주면 된다.