블로그 이미지
플로거
Android/J2EE/Web/Spring/Database

calendar

        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

Notice

Statistics Graph

'spa'에 해당되는 글 1

  1. 2018.12.31 [앵귤러] The AngularJS
2018.12.31 01:54 Programming/Angular

AngularJS

AngularJS
AngularJS logo.svg
개발자구글
발표일2010년 10월 20일 (8년 전)[1]
최근 버전1.6.6 / 2017년 8월 18일 (15달 전)[2]
개발 상태개발 중
프로그래밍 언어자바스크립트
플랫폼크로스 플랫폼
크기144 KB (운영용)
1 MB (개발용)
종류자바스크립트싱글 페이지 애플리케이션 프레임워크
라이선스MIT 라이선스
웹사이트angularjs.org


AngularJS("Angular.js" 또는 "AngularJS 1.X")는 자바스크립트 기반의 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크의 하나로, 싱글 페이지 애플리케이션 개발 중에 마주치는 여러 문제들을 해결하기 위해 개발되었으며 주로 구글과 개별 커뮤니티, 여러 회사에 의해 유지보수되고 있다. 자바스크립트 구성 요소들은 크로스 플랫폼 모바일 앱을 개발하기 위해 사용되는 프레임워크인 아파치 코도바를 보완한다. 리치 인터넷 애플리케이션에 공통적으로 사용되는 구성 요소들과 더불어 클라이언트 사이드의 모델-뷰-컨트롤러(MVC)와 모델-뷰-뷰모델(MVVM) 구조를 위한 프레임워크를 제공함으로써 이러한 애플리케이션들의 개발 및 테스트를 단순화하는 것이 목적이다. 2014년에 오리지널 AngularJS 팀은 Angular 플랫폼에 대한 작업에 착수하였다.

 - 참고 위키백과


AngularJS extends HTML with new attributes.

AngularJS is perfect for Single Page Applications (SPAs).

AngularJS is easy to learn.

- 참고 w3school


The Basics


  1. <!doctype html>
  2. <html ng-app>
  3. <head>
  4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
  5. </head>
  6. <body>
  7. <div>
  8. <label>Name:</label>
  9. <input type="text" ng-model="yourName" placeholder="Enter a name here">
  10. <hr>
  11. <h1>Hello {{yourName}}!</h1>
  12. </div>
  13. </body>
  14. </html>

출처 - angularjs.com


아래 동영상은 JQuery 와 Angularjs 에 대해 기본적인 차이를 잘 보여준다.

  • JQuery vs Angularjs

https://youtu.be/uFTFsKmkQnQ



  • Add Some Control

Data Binding

Controller

Plain JavaScript


  1. <!doctype html>
  2. <html ng-app="todoApp">
  3. <head>
  4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
  5. <script src="todo.js"></script>
  6. <link rel="stylesheet" href="todo.css">
  7. </head>
  8. <body>
  9. <h2>Todo</h2>
  10. <div ng-controller="TodoListController as todoList">
  11. <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
  12. [ <a href="" ng-click="todoList.archive()">archive</a> ]
  13. <ul class="unstyled">
  14. <li ng-repeat="todo in todoList.todos">
  15. <label class="checkbox">
  16. <input type="checkbox" ng-model="todo.done">
  17. <span class="done-{{todo.done}}">{{todo.text}}</span>
  18. </label>
  19. </li>
  20. </ul>
  21. <form ng-submit="todoList.addTodo()">
  22. <input type="text" ng-model="todoList.todoText" size="30"
  23. placeholder="add new todo here">
  24. <input class="btn-primary" type="submit" value="add">
  25. </form>
  26. </div>
  27. </body>
  28. </html>


  1. angular.module('todoApp', [])
  2. .controller('TodoListController', function() {
  3. var todoList = this;
  4. todoList.todos = [
  5. {text:'learn AngularJS', done:true},
  6. {text:'build an AngularJS app', done:false}];
  7.  
  8. todoList.addTodo = function() {
  9. todoList.todos.push({text:todoList.todoText, done:false});
  10. todoList.todoText = '';
  11. };
  12.  
  13. todoList.remaining = function() {
  14. var count = 0;
  15. angular.forEach(todoList.todos, function(todo) {
  16. count += todo.done ? 0 : 1;
  17. });
  18. return count;
  19. };
  20.  
  21. todoList.archive = function() {
  22. var oldTodos = todoList.todos;
  23. todoList.todos = [];
  24. angular.forEach(oldTodos, function(todo) {
  25. if (!todo.done) todoList.todos.push(todo);
  26. });
  27. };
  28. });

출처 - angularjs.com

https://youtu.be/WuiHuZq_cg4





posted by 훈즈 플로거
prev 1 next