본문 바로가기

Angular

Angular/angularjs 2020. 5. 22. angular service(factory) controller에 있는 데이터를 관리하는 함수및 로직들을 service로 빼서 사용할수 있다 (Spring의 MVC 패턴과 굉장히 유사한듯싶다) 컨트롤러 로직을 간단하게 만들어서 가독성을 높여주는 장점이 있다. services.js // service // factory // provider //첫번째인자: 서비스의 이름, 두번째 실행내용 angular.module("todo").factory("todoStorage", function () { var storage = { todos: [ { title: "요가 수행", completed: false, createdAt: Date.now(), }, { title: "앵귤러 학습", completed: true, createdAt: Date.now(),..
Angular/angularjs 2020. 5. 20. angular directive (모듈화) app.directive를 활용하면 템플릿들의 내용들을 js단으로 빼서 활용하거나 다른 html파일을 링크하는등 컴포넌트화 시킬수 있다. js파일내 컴포넌트화 index.html 추가 3글자 이상 입력하세요. {{todoForm}} {{todo.createdAt | date}} {{todo.createdAt | date:'yyyy-MM-dd HH:mm:ss'}} Completed Active All //모듈: 컨테이너 //모듈안에: 컨트롤러, 디렉티브, 서비스가 담겨있다 (function () { // app이라는 변수에 todo라는 모듈이 담긴다 var app = angular.module("todo", []); //두번째 파라미터는 배열로준다 app.controller("TodoCtrl", [ "$s..
Angular/angularjs 2020. 5. 20. angular form (유효성 검증) Todo List 추가 {{todoForm}} 삭제 {{todo.createdAt | date}} {{todo.createdAt | date:'yyyy-MM-dd HH:mm:ss'}} Completed Active All form에서 name으로 지칭한 todoForm을 {{todoForm}}을 통해 나타내게 되면 해당 과같은 정보들이 출력이된다. $name form에 등록한 이름 $dirty 필드를 수정했을때 true로 변한다 $prinsitne 사용자와 필드가 상호작용을 했는지 $valid 필드안의 내용들이 유효한지 $invalid 필드안에 내용들이 유효하지않은지 $submitted 필드내용을 submit했는지 //모듈: 컨테이너 //모듈안에: 컨트롤러, 디렉티브, 서비스가 담겨있다 (function..
Angular/angularjs 2020. 5. 20. ng-repeat, ng-filter, ng-click ng-repeat은 배열데이터의 내용들을 for문과 유사하게 뿌려주는 내용이다 react에서는 map을 활용해서 뿌려주고 vue에서는 v-for을 활용해 뿌려주는데 vue의 v-for과 굉장히 유사하다 Todo {{todo.createdAt}} //모듈: 컨테이너 //모듈안에: 컨트롤러, 디렉티브, 서비스가 담겨있다 (function () { // app이라는 변수에 todo라는 모듈이 담긴다 var app = angular.module("todo", []); //두번째 파라미터는 배열로준다 app.controller("TodoCtrl", [ "$scope", function ($scope) { // $scope.name = "Chris"; // $scope.data = "aa"; $scope.todos..
Angular/angularjs 2020. 5. 20. ng-app, controller ng-app 앵귤러를 사용하겠다는 의미 hello world {{name}} 위 방식처럼 사용하기보단 view부분과 data부분을 분리해서 사용한다 index.html {{todo}} script.js의 app을 기반으로 module을 선언한다 (ng-app에 script의 모듈이 들어간다) ng-controller를 통해 $scope를 지정하고 기본적인 데이터및 함수들을 정의할수 있다 script.js //모듈: 컨테이너 //모듈안에: 컨트롤러, 디렉티브, 서비스가 담겨있다 (function () { // app이라는 변수에 todo라는 모듈이 담긴다 var app = angular.module("todo", []); //두번째 파라미터는 배열로준다 app.controller("TodoCtrl", [ ..

티스토리툴바