JavaScript 썸네일형 리스트형 angularJS & filter 간단하게 검색기능 구현하기filter를 사용하면 아주 쉽게 실시간 검색기능을 구현 할 수 있다. index.html Name And Age Of Programmers In the Local Area : {{ person.Name + ' : ' + person.Age }} database.json{ "records" : [ { "Name":"Mehul", "Age":"18" }, { "Name":"Jai", "Age":"18" }, { "Name":"Alex", "Age":"20" }, { "Name":"Anonymous", "Age":"?" }, { "Name":"홍길동", "Age":"34" }, { "Name":"홍길순", "Age":"43" }, { "Name":"김길동", "Age":"12" },.. 더보기 angularJS $http json파일을 불러와서 내용을 출력해주기 index.html Name And Age Of Programmers In the Local Area : {{ person.Name + ' : ' + person.Age }} database.json{ "records" : [ { "Name":"Mehul", "Age":"18" }, { "Name":"Jai", "Age":"18" }, { "Name":"Alex", "Age":"20" }, { "Name":"Anonymous", "Age":"?" } ] } controller.jsvar app = angular.module('mainApp', []); app.controller('people', function($scope, $http){ $http.get('ht.. 더보기 angularJS Login 인증 로그인을 할 때 로그인을 한 후 화면의 주소를 강제로 입력을 할 경우 로그인 성공 페이지로 자동으로 이동이 된다.resolve를 이용하면 로그인을 하지 않고, 로그인 완료 페이지로 강제로 이동할 수 없게 한다. resolve : 라우팅을 시도할 때 캐쉬에 인증 정보가 있는지 검사를 하고 인증 정보가 있을 경우 실행을 하게 된다.$scope, $rootScope$scope는 지역변수, $rootScope 는 전역변수쯤으로 생각하면 될 듯?? 계층 구조가 $rootScope < $scope로 되어있음 controller.jsvar app = angular.module('mainApp', ['ngRoute']); app.config(function($routeProvider){ $routeProvider.wh.. 더보기 AngularJS Login App 로그인 화면 만들기관리자 아이디와 비번으로 로그인을 할 때 로그인 성공하면 로그인 성공 페이지로 이동하고, 로그인이 실패하면 경고창을 띄우고, 로그인 창으로 이동한다. login.html login.html Username : UserPassword : 로그인 controller.jsvar app = angular.module('mainApp', ['ngRoute']); app.config(function($routeProvider){ $routeProvider.when('/', { templateUrl : 'login.html' }).when('/dashboard', { templateUrl : 'dashboard.html' }).otherwise({ redirectTo : '/' }); }); app.. 더보기 Routeing $Route는 기본 ng모델로 제공되지 않고, ngRoute 모듈로 제공된다.그래서 route관련 기능들은 모두 route모듈로 접근해야 사용이 가능하다. route.min.js파일 다운 아래 소스에서 app이름을 넣어주고, route모듈과 controller스크립트 파일을 추가한다. controller.jsvar app = angular.module('mainApp', ['ngRoute']); /* module의 config api를 사용해서 provider 서비스 제공자에 접근이 가능하다. 여기에서는 $route 서비스 제공자를 인자로 받아온다. $routeProvider의 when 메소드를 이용해서 특정 URL로 설정할 수 있다. 이때 라우터 설정 객체를 전달하는데 태그에 삽입을 원하는 탬플릿에 해.. 더보기 AngularJS01. Hello World AngularJS 기초1. ng-app을 추가한다. AngularJS 모듈을 사용한다는 뜻. 2. ng-model에 변수값을 입력한다 3. 출력화면에 {{}} 안에 변수값을 넣는다. 이렇게 하면 실시간으로 input 박스에 입력한 값이 출력이 된다. 더보기 아이디 중복체크&비밀번호체크 1. 이미 사용중인 아이디를 입력했을 경우 실시간으로 메시지 출력2. 비밀번호와 비밀번호 확인 값이 같지 않을 경우 실시간으로 메시지 출력 index.jsp 검색 이름 나이 성별 이메일 홍길동 32 남 kildong@naver.com 회원등록양식 이름 나이 비밀번호 비밀번호확인 성별 남자 여자 이메일 등록 BoardIdCheckServlet.java package board; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServle.. 더보기 Ajax로 새로고침 없이 글쓰기, 검색하기 결과파일 index.jsp 검색 이름 나이 성별 이메일 홍길동 32 남 kildong@naver.com 회원등록양식 이름 나이 성별 남자 여자 이메일 등록 RegisterServlet.java package ajax; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/RegisterServlet") p.. 더보기 3. todo 여러개 출력하기(반복문 사용하기) - ng-repeat ng-repeat 배열과 같이 사용할 때 좋다.https://docs.angularjs.org/api/ng/directive/ngRepeat 배열로 선언을 한다. var app = angular.module('todo',[]); app.controller('TodoCtrl',['$scope', function($scope){ $scope.todos = [ { title : '제목1', contents : '내용출력1', completed : false, name : '홍길동1', regdate : Date.now() }, { title : '제목2', contents : '내용출력2', completed : false, name : '홍길동2', regdate : Date.now() }, { title .. 더보기 2. ng-app, ng-init 사용하기, AngularJS개념, 간단한 todo객체 만들어보기 ng-app : 여기서부터는(이미지에서는 body부분) angularJS를 사용하겠다는 의미.ng-init : 자바스크립트 변수나 함수를 초기화 하는 것. 출력방법 : expression(표현식)을 사용한다 : {{ name }} Hello {{name}}! AngularJS 기본 틀. (function(){ })(); 모듈 만들기 : AngularJS에 app이라는 변수를 만들어 angular모듈을 만든다. angular라이브러리를 추가했기 때문에 그 안에있는 함수에 angular.module()이란 모듈을 정의할 수 있는 함수를 사용할 수 있다. (function(){ var app = angular.module(); })(); 첫번째 함수에 모듈 이름(todo)을 적는다, 두번째 변수에는 배열([].. 더보기 이전 1 2 다음 목록 더보기
