본문 바로가기

AngularJS

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로 설정할 수 있다. 이때 라우터 설정 객체를 전달하는데 태그에 삽입을 원하는 탬플릿에 해.. 더보기
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. AngularJS 기본 개발 환경 AngularJS 공식 사이트 https://docs.angularjs.org/guide/concepts Directives : 확장된 html 커스텀 속성과 엘리먼트로 구성된 것.테그에 있는 속성을 직접 정의해서 사용하는 것. Expressions : 자바스크립트에서는 변수와 함수를 만들 수 있는데, html파일에서 자바스크립트에 있는 데이터를 출력할 때 사용하는 기법. hello {{ name}}! {{ name }} 이라는 변수안에 world라는 변수가 저장되어있다면 hello world!라는 문자열이 출력되게 하는 것. Module : 디렉티브, 컨트롤러, 서비스라는 개념들이 있는데 이런것드를 하나로 모아놓은 것을 모듈이라고 한다.의존관계가 있을 때 서로 주입해서 사용할 수 있다. Controll.. 더보기

티스토리툴바