AngularJS(v1)에 대한 이야기.
첫 직장에서 하이브리드 앱을 만들면서, 그리고 학교 프로젝트에서 사용했다.
2017년에 한창 사용했고, typescript 기반인 Angular 2+가 나왔다.\n 그래서 꽤 오래전에 종료한 줄 알았는데, 2022년 1월에 종료되었다고 한다. 생각보다 오래 유지했다.
AngularJS support has officially ended as of January 2022. See what ending support means and read the end of life announcement.
매력적인 점은 Dependency Injection이다.\n Spring bean 처럼 directive, service, controller 등을 등록해 놓으면 이름을 기반으로 주입 받을 수 있다.
https://github.com/johnpapa/angular-styleguide
프론트엔드 자바스크립트 프레임워크의 과도기?에서 만들어진 프레임워크라 생각한다. 그래서 bad practice를 만들기 쉬웠는데, 그래서 이 스타일 가이드의 인기가 많았다.
contollerAs와 vm 사용하기https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y032
controllerAS + vm 사용하고 this 변수에 담고 직접 사용하지 않는다.
/* avoid */
function CustomerController() {
this.name = {};
this.sendMessage = function() { };
}/* recommended */
function CustomerController() {
var vm = this;
vm.name = {};
vm.sendMessage = function() { };
}https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y052
멤버 변수 및 함수는 상단에 위치하여 바로 구분할 수 있도록한다: Revealing Module Pattern
/* avoid */
function dataService() {
var someValue = '';
function save() {
/* */
};
function validate() {
/* */
};
return {
save: save,
someValue: someValue,
validate: validate
};
}/* recommended */
function dataService() {
var someValue = '';
var service = {
save: save,
someValue: someValue,
validate: validate
};
return service;
////////////
function save() {
/* */
};
function validate() {
/* */
};
}https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#data-services
XHR calls, local storage, stashing in memory 등으로 부터 데이터를 얻는 로직은 factory로 분리한다.
$http와 같은 다른 서비스나 데이터와 커뮤니케이션 하는 코드Karma + Mocha + Chai, Angular Mocks
NPM modules:
karma의 경우 글로벌로 karma-cli를 설치하라는 글들이 많이 보였지만
로컬에 karma만 설치하여 ./node_modules/karma/bin/karma로 명령어를 실행할 수 있었다.
karma init을 통해 생성되는 카르마 설정파일을 수정한다.
module.exports = function(config) {
config.set({
// ...
// 사용 할 테스트 모듈 목록
frameworks: ['mocha', 'chai', 'sinon'],
// list of files / patterns to load in the browser
files: [
// AnguarJS 등 프레임워크와 라이브러리 파일의 경로를 여기에 작성한다.
// 왠만하면 index.html 내에 <script> 태그로 임포트하는 파일 순서 그대로 작성한다.
// karma가 브라우저에 웹 페이지를 띄울 때 여기에 작성한 파일들을 순서대로 가져오는 거 같다. (순서 중요)
// 테스트 대상이 되는 소스 코드를 포함한다.
'www/**/*.js',
// angular-mocks
'node_modules/angular-mocks/angular-mocks.js',
// 테스트 스크립트를 포함한다.
// test 폴더 아래에 abc.spec.js 와 같은 방식으로 작성했다.
'test/**/*.spec.js'
],
// 콘솔에 출력되는 테스트 진행 상황에 관한 모듈.
// karma-mocha-repoter를 사용했다.
reporters: ['mocha'],
// ...
})
}
karma start 또는 ./node_modules/karma/bin/karma start
컨트롤러 내에서 vm(ViewModel)으로 뷰 모델을 관리 할 때 타입 힌팅을 제대로 얻을 수 없다.
function controller() {
var vm = this;
/**
* @typedef CustomType
* @property {number} foo
* @property {string} var
*/
/**
* @type {Array.<CustomType>}
*/
vm.list = []; // any
}따라서 뷰 모델에 @typedef로 하위 모델들을 명시하면서 해결했다.
function controller() {
/**
* @typedef CustomType
* @property {number} foo
* @property {string} var
*/
/**
* @typedef {ViewModel}
* @property {Array.<CustomType>} list
*/
/**
* @type {ViewModel}
*/
var vm = this;
vm.list = []; // Array.<{}>
}Lifecycle이 생겼다.
컴포넌트의 컨트롤러 내에서 this.$onInit을 구현하면(함수) 컴포넌트가 초기화 될 때 호출된다. 이 방법으로 tabs를 구현한 공식 예제:
https://docs.angularjs.org/guide/component
Intercomponent Communication 단락 참조
이제 success, error가 아니라 then, catch를 사용한다. 더 이상 $q.defer()로 wrapping 할 필요가 없다.