lab.naminsik
  • Javascript, jQuery
  • Reactjs
  • Angularjs
  • AWS
  • Php
  • Html, CSS
  • asp .net
  • Android
  • SQL
  • Word Press
search
keywords
  • Angularjs 2016‧09‧08

    스코프 데이터 html로 바인딩하기

    예를 들어 $scope.text1 = '<h3>제목</h3>';라고 있고 dom에서 {{text1}} 하면 바로 <h3>제목</h3>가 노출된다.이를 html로 적용시키려면 아래와 같이 만들어야한다. 방법 1. 헤더에서 angular-sanitize 를 불러와준다.  <script src="/angular-1.5.8/angular-sanitize.min.js"></script>  모듈에 ngSaitize를 넣어준다. var app = angular.module('모듈이름',['ngRoute','ngAnimate','ngSanitize'], function($httpProvider){ });  이제 준비가 되었다. dom에는 아래와 같이 넣어준다. <p ng-bind-html="text1"></p> 그럼 제대로 데이터가 html로 바인딩 된 것을 확인할 수 있다. 방법 2. […]

  • Angularjs 2016‧09‧08

    앵귤러js 공부하기 좋은 사이트 모음(계속 업뎃)

    공식 레퍼런스https://docs.angularjs.org/api w3 school의 앵귤러jshttp://www.w3schools.com/angular/angular_ref_directives.asp (영문 사이트)http://www.w3ii.com/ko/angular/default.html (한글화) 국내 실무에 쓰일 법한 내용으로 정리해 놓은 블로그http://palpit.tistory.com/810 (국내) 추가 레퍼런스 , 예제 사이트 http://learnkode.com/Tutorial/Angular/angular-introduction (해외, 또 다른 예제와 레퍼런스 사이트)http://sixrevisions.com/javascript/learn-angular/  (해외, 앵귤러 시작하기 포스팅)http://plnkr.co/edit/Z9b2NJCCSpMK2VBTCM7l?p=preview  (해외, 예제, ui 라우터와 라우터 정보 활용)

  • Angularjs 2016‧09‧08

    페이지 새로 불러오기

    현재 보고 있는 페이지를 리로드가 필요할 때가 있다. 라우터를 주로 쓰게 되는데 $location.path('경로') 이렇게 하면 ng-router와 ng-view 로 해당 페이지가 바인딩 되긴 하지만 캐시가 남아있다.캐시를 지우는  $templateCache.removeAll(); 를 쓰기도 하지만 php를 이용해서 로그인 전/후에 따른 php 분류 코드가 제대로 안먹힐 때가 있다. 그래서 결론은 $window.location.reload(); 이걸 쓴다.

  • Angularjs 2016‧01‧19

    동적으로 외부파일 불러와서 dom에 바인딩($http, ng-view, ng-include 3가지 활용)

    html 중에 메뉴를 아래와 같이 만들었다 가정합니다. index.html <div class="btnClick" ng-controller='gnbNav' > <nav id="lnb"> <ul> <li ng-repeat='gnbMenu in gnbMenus' > <button ng-click="callProject()"> <div class="listNumber">{{gnbMenu.Num}}</div> <h2>{{gnbMenu.title}}</h2> <span>{{gnbMenu.date}}</span> </button> </li> </ul> </nav> </div> 그리고 메뉴 구조를 아래처럼 변수에 담아두겠습니다. app.js var gnbLoad = [ {Num : "2", title : "테스트2", date : "2015.8.1", url : "test2.html"}, {Num […]

  • Angularjs 2015‧02‧24

    Angularjs – 컨트롤러 밖에서 컨트롤러 안의 함수 실행

    대부분은 아래와 같이 함수를 호출하게 된다. <div id="testDiv" ng-app='MyModule' ng-controller="MyController"> <a href="#" ng-click="callAlert('click-A')">클릭 A</a> </div>  클릭 A 라는 글자를 클릭하게 되면 스크립트 파일에서 controller 안의 함수를 호출한다. angular.module('MyModule', []) .controller('MyController', function ($scope) { $scope.callAlert = function (data) { alert(data); }; }); 값을 받은 callAlert 함수는 알럿창으로 click-A라고 출력하게 된다. 여기까지는 가장 일반적인 스코프안의 함수 실행이다. 그러나 […]

  • Angularjs 2015‧02‧24

    Angularjs – 지정 엘리먼트 안에 자기만의 함수 호출을 가진 새로운 엘리먼트 생성하기

    새로운 엘리먼트를 생성하는 방법은 아래 코드와 같다. function(s, e, a) { var newElement = angular.element(' <div></div> '); e.append(newElement); $compile(newElement)(s); } 여기에 새로 생성되는 엘리먼트에 컨트롤러더 달아주고, ng-click과 같은 기능도 추가해서 만들어 보려고 한다. 일단 html을 아래와 같이 만든다.  <div ng-app="AngApp"> <div ng-controller="MainCtrl"> Hello {{name}}! <my-directive></my-directive> </div> </div>  이제 my-directive 엘리먼트 안에 새로운 엘리먼트를 만들고 함수 호출도 […]

  • Angularjs 2015‧02‧12

    Angularjs - 외부 json 파일 불러와서 dom에 바인딩 시키기

    코드 출처 : http://codepen.io/tutorialab/pen/EJAet?editors=101 <div id="wrapper" ng-app> <div ng-controller="DataCtrl"> <pre ng-model="data"> {{data}} </pre> <input ng-model='name' /> {{name}} <input ng-model='salutation' /> {{salutation}} <input ng-model='greeting' /> {{greeting}} </div> </div>  위 처럼 html 을 만든다. angular.module('', []); function DataCtrl($scope, $http) { $http.jsonp("http://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Super%20Hero"). success(function(data) { $scope.data = data; $scope.name = data.name; $scope.salutation = data.salutation; $scope.greeting = data.greeting; }). error(function (data) […]

  • Angularjs 2015‧02‧12

    Angularjs - jsonp 불러오기

    외부에 있는 json 파일을 불러오는 코드이다. 출처 : http://jsfiddle.net/zkfruxu3/ <div ng-app ng-controller="jsonp_example"> <button ng-click="doRequest()">Make JSONP request</button> </div>  위 처럼 html 안에 버튼을 클릭하면 doRequest 함수가 실행되게 만든다. function jsonp_example($scope, $http) { $scope.doRequest = function() { var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK"; $http.jsonp(url) .success(function(data){ console.log(data.found); }); }; var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK"; $http.jsonp(url) .success(function(data){ console.log(data.found); }); }  외부 파일을 $http.jsonp을 통해 […]

popular

  • JS - 배열안의 객체들 중 속성과 값 매칭된 것 가져오기
  • 파일 혹은 디렉토리 이동 mv 명령어
  • javascript - 주소의 파라미터값 변수로 받기
  • react, vue - Uncaught SyntaxError: Unexpected token < (흰 화면 이슈)
  • JS - 브라우저 체크(ie 11 포함)
  • 이미지와 텍스트 정렬 (위 이미지, 아래 텍스트)
  • MSSQL - 두 테이블간 컬럼의 값들에 일치하는 항목 추출
  • JS - textarea의 글자들에 엔터값을 br태그로 변환
  • 동영상 스트리밍 서비스 구축 1장 (AWS s3/cloudFront, HLS, video.js)
  • 그림문자인 이모지(emoji) 웹에 사용하기

comment

  • 도움이 되셨다니 뿌듯하네요! 보람있는 프로젝트 되시길 ...
  • 마침 채널톡 연동 관련해서 프로젝트를 진행하게 되었는데...
  • 웹이 어떤 언어로 되어 있느냐에 따라 다를 것 같습니다...
  • >_
  • 네넹! ㅎ