본문 바로가기
Frontend/angularjs

[Hoon] AngularJS - The AngularJS

by 플로거 2018. 12. 31.

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

 

bit.ly/3fXOzon

 

인프런 인강 55%할인 쿠폰 - 커피한잔으로 Vue.js 핵심 강의!

인프런 인터넷 강의 55% 할인 쿠폰 - 커피한잔(5000원)으로 배우는 Vue.js 핵심 강의! 모바일 환경에서도 강의를 수강할 수 있도록 강의가 많이 개선되었습니다. 인프런 인터넷 강의 선착순 100명 55% �

plogger.tistory.com

bit.ly/2TtRHis

 

[Vue.js 입문] 초보 실전 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 - 인프런

이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼 수 있습니다. 이 강의는 1부 기본기 이며, 2부와 3부를 통해서 실제 Real 웹앱을 구현해 보도록 하겠습니다. 초급 ��

www.inflearn.com

 

반응형
저작자표시 비영리 변경금지

'Frontend > angularjs' 카테고리의 다른 글

[Hoon] AngularJS Seed - the seed for AngularJS apps  (0) 2019.01.04
[Hoon] AngularJS - Angularjs Tutorial  (0) 2019.01.04
[Hoon] AngularJS - PhoneCat Tutorial App  (0) 2019.01.03
[Hoon] AngularJS - Componets, Directives, Localization Example  (0) 2018.12.31
[Hoon] AngularJS - Create Components  (0) 2018.12.31

관련글

댓글

티스토리툴바