AngularJS 는 오픈소스 자바 프레임워크 이다. 프레임워크이기 때문에 기본 뼈대만 있고, 사이트구축에 대한 응용은 알아서 해야한다.
하지만 AngularJS 에서 추가로 제공하는 라이브러리를 통해서 애니메이션,쿠기,로드,단위테스트,리소스관리,라우트,터치이벤트 등이 쉽게 구현가능하다.
angular-js , animate, cookies, loader, mocks, resource, toure, ssanitize, scenario, touch...
Tip: Bower.io 에서 클라이언트종속성을 편하게 가져올수 있도록 할수있다. 관련된 라이브러리를 편하게 선택해서 불러올수있다.
http://bower/angulra/angular.js
Tip: angular-batarang 프로젝트는 크롬브라우져의 웹인스펙터 확장팩형태로 제공되는 전용 디버깅 기능이다.
- Karma 와 Jasmine
karma 는 테스트러너이다. 실제 테스트를 위해선 jasmine (테스트 프레임워크)을 이용해서 작성해야 카르마가 테스트 할수 있다.
node 로 구현되는 것이기때문에 관련모듈을 설치할필요가 있다.
npm install karma , karma-jasmine, karma-chrome-launcher
sudo npm install -g karma-cli : g 옵션으로 아무데서나 카르가 실행되도록 한다.
설치되었으면,
karma.conf.js 를 열어서 설정을 한다. 이때 autoWatch 를 true 로 하면 파일이 변경되면 바로 카르마가 실행되도록 한다.
자세한것은 PACKT 사의 MVC 패턴과 트위터부트스트랩을 이용한 AngulraJS 반응형 웹앱 개발과 성능 최적화 참고.
Angulra-seed 의 git 을 클론하면 기본 스캐폴더(폴더구성 및 관련파일구성)을 쉽게 할수있다.
이를 통해 가져온 스캐폴더에는 css,img,js,lib,partials 폴더가 있다.
AngularJS 주요기능
-양방향 데이터 바인딩
-MVC 구조
-지시자(Directive)를 이용한 확장
-의존관계 주입
-Singlepage WebApplication 을 위한 Router 구현
-$q 를 이용한 비동기 프로그래밍 지원
-테스팅 환경 지원
AngularJS 를 이용하기 위해서는 http://angular.js 만 지정하면 된다.
물론 이건 angularjs 프레임워크만 로드할것 뿐이다. html 페이지에서 적용하려면
<html ng-app> 이라고 태그 속성을 지정하면 그때부터 angularjs 가 html 소스를 먼저 해석하게된다.
이렇게 ng- 로 시작되는 많은 angularJS 만의 지시자들과 속성이 있는데 이를 디렉티브라고 한다.
디렉티브는 기본적으로 제공하는 이외에도 사용자가 직접 만들어서 추가하여 나만의 디렉티브를 구현할수 있다.
특정 태그블록에 기능을 추가하거나 변수값을 대입(대응)대도록 할수 있는데, 이를 위해서는 ng-controller 지시어를 사용한다.
먼저 코드블록에서 콘트롤러로 사용할 함수를 지정한다.
//$scope 는 AngularJS 의 전역변수이며 매직변수이다.
var myval = [{mval:"1",mcheck:false},{mval:"2",mcheck:true}];
function myTest($scope){
$scope.name = "My Angular Test";
$scope.myGval = myval; // angularJS 의 $scope 에 myval 변수를 추가한다.
}
이제 특정태그블록에서 콘트롤러를 지정하면된다.
{{appName}}
//appName 은 angularJS 의 변수- {{my.mval}}
div 태그블록을 ng-controller 로 하겠다고 지시자를 지정하고, myTest 함수를 콘트롤러 구현부로 하겠다고 선언한다.
ng-repeat 을 통해서 li 태그를 $scope.myGval 객체의 개수만큼 반복하면서 li 를 생성한다.
ng-model 은 "값"에 해당하는 것으로 input 박스의 값에 angularjs 의 사용자 지정 model 변수들을 연동할때 쓰인다.
-angularjs 부트스트랩
ng-app 을 통해서 angularjs 를 기동시키고 html 태그블록에서 angularjs 가 렌더링되도록 했다.
하지만 html 전체가 아닌 작게 나뉜 태그블록에서 ng-app 을 지정하고자 싶지만 ng-app 은 한번밖에 해석되지 않는데,
이때는 javascript 에서 angular.bootstrap(document.getElementById('id태그')) 를 통해서 여러번 실행가능한다.
-ng-init : 태크블록 내에서 초기화할 필요가 있는 변수나 기능 지정
-ng-repeat : 태그블록을 반복
-ng-switch="모델이름" : 하위테그에서 ng-switch-when="모델값의 밸류" 가 트루일때 화면에 보임
-ng-if : 참일때보임
-ng-show,hide
-input 태그블록에서는 ng-model, ng-required,ng-minlength,ng-maxlength,ng-pattern,ng-change 등이 있다.
-FormController 의 속성 메쏘드 알아보기
-NgModelController 속성과 메써드 알아보기
이벤트 지시자
ng-click, ng-dblclick, ng-ketdown, ng-ketpress, ng-keytup,ng-mousedown,ng-mouseenter,ngmouseleave, ng-mousemove,over,up,change,blur
스타일시트 클래스 지시가
ng-class, ng-style="$scope.스타일값"
Controller 로 정의한 중첩된 태그블록에서 하위 콘트롤러에서 상위 콘트롤러의 $scope 는 접근이 가능한다.
-모듈
ngmodules.org 에서 참고.
모듈을 나만의 directive (지시자)생성
angular.module('mytestApp',[]).directive('helloworld',funciton(){ return function(scope, iElement,iAttrs,controller){ iElement.html(" hello "+iAttrs.myname+"");
라고 선언되었을때
라고 가능.
-지시자 설정객체
지시자 설정함수에서 반환되는 객체를 말함.
지시자를 생성할때에 객체형으로 여러가지 속성을 지정하여 리턴할수 있다.
name,priority,terminal,scope,template,replace,transclude,restrict,controller:function(), compile 등..
이중 template_Url 을 통해서 외부파일에 해당 코드블록만 따로 템플릿화 시켜서 이용이 가능하다.
<h1>hello <span>{{worldname}}</span></h1>
단 해당 디렉티브를 여러번 호출할경우 지시자 속성중 scope 를 true 로 해서 각각의 scope 를 생성해야한다.
-scope 속성
scope 속성에 { myname : "@who" } 라고 되어 있으면, 해도 scope 가 엉키지 않는다.
---------------------------------------
</div>
</div>
angular.module('sampleApp',[]).controller('demoCtrl',['$scope',function($scope){
}]).directive('hello',function(){
return {
template:'<span>{{myname}}</span>',
restrict:"AE",
scope:{ myname:"@to"}
}
});
---------------------------------------
scope 속성에 { myname : "=who" } 라고 되어 있으면, 하면 who 속성이 양방향 바인딩 된다.
-지시자 Directive
크게 네가지 형태로 지정가능한다.
1.요소의 속성
<span my-directive="exp"></span>
2.요소의 클래스
<span class="my-directive:exp"></span>
3.요소이름
<my-directive></my-directive>
4.코멘트호출
<!-- directiv: mydirective expression -->
Tip : 웹표준을 위해서 x-ng-click 등으로 한다.
Tip : IE 8 등에서는 Dom 이 먼저 생성되야 하므로 <!-- [if lte IE8]> document.createElement('my-directive');<![endif]--> 해준다.
-외존관계 주입
$provide 를 이용한 주입방법
-value
: angular.module('myapp',[]).value('AppName','myValue').controller('myctrl',function($scope,AppName){ $scope.printAppName = AppName);
-factory
: 188page 샘플 예제 2.38
-service
: 190page 샘플 예제 2.39
-provider
: value,factory,service 는 모두 provider 의 래퍼다.
,contrant
메서드별 차이점은 다른 서비스를 주입가능한지 등 화깅ㄴ필요.
$injector 에 의한 주입. 특정 서비스가 해당 모듈에 저의 되었는지 확인 가능.
예제 2.44
-$route 서비스
angular-route.js 라는 별도의 라우트 라이브러리를 연동해야 한다. 244 페이지
예제 3.1
angular.modle('myapp',['ngRoute']).config(functiuon($routeProvider){$routeProvider.
when('/home','tempalteUrl:'template/home.tmpl.html'})
when('/about','tempalteUrl:'template/about.tmpl.html'},controller:'aboutCtl')..
선언하고
<ng-view></ng-view> 에서 보여줌.
controller,controllerAs,template,templateUrl,resole,redirectTo,reloadOnSearch,caseInsentitiveMath 등의 속성이 있다.
-$http 서비스
-RESTful 웹서비스를 위한 $resource
0 comments:
댓글 쓰기