Tutorial Main

다른 페이지들은 링크가 원래 사이트로 되있네요 일단 그래도 번역해봅니다

docs.angularjs.org/tutorial/

AngularJS 를 소개하는 좋은 방법중 하나가 이 튜토리얼을 쭉 따라하는것이다, 이 튜토리얼은 AngularJS 웹앱을 만드는 과정을 쭉 진행해준다. 당신이 만들 앱은 안드로이드 디바이스를 쭉 나열해주는 카탈로그다, 이 카탈로그는 당신이 원하는 기기를 검색해준고 상세내용을 보여준다.

A great way to get introduced to AngularJS is to work through this tutorial, which walks you through the construction of an AngularJS web app. The app you will build is a catalog that displays a list of Android devices, lets you filter the list to see only devices that interest you, and then view details for any device. 

튜토리얼을 쭉 따라해보고 Angular이 얼마나 브라우저를 스마트하게 만드는지 보자 - 다른 잡다한 플러그인이나 따로 파일을 추가할 필요가 없다. 튜토리얼을 따라하면서 당신은:

• 클라이언드쪽 데이터 바인딩과 dependency injection 을 이용해 다이나믹한 데이터들의 뷰가 사용자의 액션에 따라 그때 즉시 바뀌는 예제를 볼것이다
• DOM이 따로 필요없이 Angular가 데이터에 리스너를 연결시키는 것을 볼것이다
• 웹앱을 만드는 더 쉽고 나은 방법을 배울것이다
• Angular을 이용해 보편적인 웹 타스크(데이터를 앱에다 받아오는 등)를 쉽게 만드는 방법을 배울것이다 그리고 모든것은 따로 신경쓸 필요 없이 어떻한 브라우저에서도 돌아간다

Work through the tutorial to see how Angular makes browsers smarter — without the use of extensions or plug-ins. As you work through the tutorial, you will:

• See examples of how to use client-side data binding and dependency injection to build dynamic views of data that change immediately in response to user actions.
• See how Angular creates listeners on your data without the need for DOM manipulation.
• Learn a better, easier way to test your web apps.
• Learn how to use Angular services to make common web tasks, such as getting data into your app, easier.

And all of this works in any browser without modification to the browser!

튜토리얼을 다하면 다음과 같은것이 가능할 것이다:

• 어느 브라우저에서나 돌아가는 동적인 어플리케이션을 만들 수 있다
• Angular과 일반 JavaScript 프레임워크 간의 차이점을 정의할 수 있다
• AngularJS의 데이터 바인딩이 어떻게 돌아가는지 이해할 수 있다
• angular-seed 프로젝트를 이용해 빠르게 자신의 프로젝트를 boot-strap 할 수 있다
• 만들고 테스트를 실행할 수 있다
• AngularJS 를 더 알기위한 리소스를 구분할 수 있다 튜토리얼은 코드를 짜고 유닛테스트 및 end-to-end 테스트를 포함한 간단한 어플리케이션을 만들기위한 전체 과정을 보여준다. 각각의 단계끝에 실험이 AngularJS를 배우고 프로젝트를 짜기위한 좋은 방법을 제공한다.

When you finish the tutorial you will be able to:

• Create a dynamic application that works in any browser.
• Define the differences between Angular and common JavaScript frameworks.
• Understand how data binding works in AngularJS.
• Use the angular-seed project to quickly boot-strap your own projects.
• Create and run tests.
• Identify resources for learning more about AngularJS.

The tutorial guides you through the entire process of building a simple application, including writing and running unit and end-to-end tests. Experiments at the end of each step provide suggestions for you to learn more about AngularJS and the application you are building.

전체 과정은 몇시간에서 천천히 깊게 보면서 몇일간 할 수 있다. 더 짧은 AngularJS 소개를 원하면 Getting Started 도큐먼트를 보면된다.

You can go through the whole tutorial in a couple of hours or you may want to spend a pleasant day really digging into it. If you're looking for a shorter introduction to AngularJS, check out the Getting Started document.

코드 짜보기

Working with the code

튜토리얼을 Mac/Linux/Window 모든 환경에서 따라해보고 공부해볼 수 있다. 튜토리얼은 코드 관리를 위해 Git 버져닝을 추천한다. 단 따라하기 위해 Git을 궂이 알 필요는 없다. 아래의 탭중에 자신의 컴퓨터에 해당하는 것을 클릭해서 셋업하는 방법을 알아보자.

You can follow this tutorial and hack on the code in either the Mac/Linux or the Windows environment. The tutorial relies on the use of Git versioning system for source code management. You don't need to know anything about Git to follow the tutorial. Select one of the tabs below and follow the instructions for setting up your computer.