AngularJS 튜토리얼
AngularJS 시작하기

Angular 2 Cordova CSS HTML ionic-framework JavaScript jQuery Node.js PHP twitter-bootstrap
수색…


비고

AngularJS는 풍부한 클라이언트 측 응용 프로그램 개발을 단순화하도록 설계된 웹 응용 프로그램 프레임 워크입니다. 이 설명서는보다 최신의 Angular 2 의 전신 인 Angular 1.x 또는 Angular 2 의 Stack Overflow 설명서를 참조하십시오.

버전

번역 출시일
1.6.5 2017-07-03
1.6.4 2017-03-31
1.6.3 2017-03-08
1.6.2 2017-02-07
1.5.11 2017-01-13
1.6.1 2016-12-23
1.5.10 2016-12-15
1.6.0 2016-12-08
1.6.0-rc.2 2016-11-24
1.5.9 2016-11-24
1.6.0-rc.1 2016-11-21
1.6.0-rc.0 2016-10-26
1.2.32 2016-10-11
1.4.13 2016-10-10
1.2.31 2016-10-10
1.5.8 2016-07-22
1.2.30 2016-07-21
1.5.7 2016-06-15
1.4.12 2016-06-15
1.5.6 2016-05-27
1.4.11 2016-05-27
1.5.5 2016-04-18
1.5.4 2016-04-14
1.5.3 2016-03-25
1.5.2 2016-03-19
1.4.10 2016-03-16
1.5.1 2016-03-16
1.5.0 2016-02-05
1.5.0-rc.2 2016-01-28
1.4.9 2016-01-21
1.5.0-rc.1 2016-01-16
1.5.0-rc.0 2015-12-09
1.4.8 2015-11-20
1.5.0-beta.2 2015-11-18
1.4.7 2015-09-30
1.3.20 2015-09-30
1.2.29 2015-09-30
1.5.0-beta.1 2015-09-30
1.5.0-beta.0 2015-09-17
1.4.6 2015-09-17
1.3.19 2015-09-17
1.4.5 2015-08-28
1.3.18 2015-08-19
1.4.4 2015-08-13
1.4.3 2015-07-15
1.3.17 2015-07-07
1.4.2 2015-07-07
1.4.1 2015-06-16
1.3.16 2015-06-06
1.4.0 2015-05-27
1.4.0-rc.2 2015-05-12
1.4.0-rc.1 2015-04-24
1.4.0-rc.0 2015-04-10
1.3.15 2015-03-17
1.4.0-beta.6 2015-03-17
1.4.0-beta.5 2015-02-24
1.3.14 2015-02-24
1.4.0-beta.4 2015-02-09
1.3.13 2015-02-09
1.3.12 2015-02-03
1.4.0-beta.3 2015-02-03
1.3.11 2015-01-27
1.4.0-beta.2 2015-01-27
1.4.0-beta.1 2015-01-20
1.3.10 2015-01-20
1.3.9 2015-01-15
1.4.0-beta.0 2015-01-14
1.3.8 2014-12-19
1.2.28 2014-12-16
1.3.7 2014-12-15
1.3.6 2014-12-09
1.3.5 2014-12-02
1.3.4 2014-11-25
1.2.27 2014-11-21
1.3.3 2014-11-18
1.3.2 2014-11-07
1.3.1 2014-10-31
1.3.0 2014-10-14
1.3.0-rc.5 2014-10-09
1.2.26 2014-10-03
1.3.0-rc.4 2014-10-02
1.3.0-rc.3 2014-09-24
1.2.25 2014-09-17
1.3.0-rc.2 2014-09-17
1.2.24 2014-09-10
1.3.0-rc.1 2014-09-10
1.3.0-rc.0 2014-08-30
1.2.23 2014-08-23
1.3.0-beta.19 2014-08-23
1.2.22 2014-08-12
1.3.0-beta.18 2014-08-12
1.2.21 2014-07-25
1.3.0-beta.17 2014-07-25
1.3.0-beta.16 2014-07-18
1.2.20 2014-07-11
1.3.0-beta.15 2014-07-11
1.2.19 2014-07-01
1.3.0-beta.14 2014-07-01
1.3.0-β.13 2014-06-16
1.3.0-β.12 2014-06-14
1.2.18 2014-06-14
1.3.0-beta.11 2014-06-06
1.2.17 2014-06-06
1.3.0-beta.10 2014-05-24
1.3.0-beta.9 2014-05-17
1.3.0-beta.8 2014-05-09
1.3.0-beta.7 2014-04-26
1.3.0-beta.6 2014-04-22
1.2.16 2014-04-04
1.3.0-beta.5 2014-04-04
1.3.0-beta.4 2014-03-28
1.2.15 2014-03-22
1.3.0-beta.3 2014-03-21
1.3.0-beta.2 2014-03-15
1.3.0-beta.1 2014-03-08
1.2.14 2014-03-01
1.2.13 2014-02-15
1.2.12 2014-02-08
1.2.11 2014-02-03
1.2.10 2014-01-25
1.2.9 2014-01-15
1.2.8 2014-01-10
1.2.7 2014-01-03
1.2.6 2013-12-20
1.2.5 2013-12-13
1.2.4 2013-12-06
1.2.3 2013-11-27
1.2.2 2013-11-22
1.2.1 2013-11-15
1.2.0 2013-11-08
1.2.0-rc.3 2013-10-14
1.2.0-rc.2 2013-09-04
1.0.8 2013 년 8 월 22 일
1.2.0rc1 2013 년 8 월 13 일
1.0.7 2013-05-22
1.1.5 2013-05-22
1.0.6 2013-04-04
1.1.4 2013-04-04
1.0.5 2013-02-20
1.1.3 2013-02-20
1.0.4 2013-01-23
1.1.2 2013-01-23
1.1.1 2012-11-27
1.0.3 2012-11-27
1.1.0 2012-09-04
1.0.2 2012-09-04
1.0.1 2012-06-25
1.0.0 2012-06-14
v1.0.0rc12 2012-06-12
v1.0.0rc11 2012-06-11
v1.0.0rc10 2012-05-24
v1.0.0rc9 2012-05-15
v1.0.0rc8 2012-05-07
v1.0.0rc7 2012-05-01
v1.0.0rc6 2012-04-21
v1.0.0rc5 2012-04-12
v1.0.0rc4 2012-04-05
v1.0.0rc3 2012-03-30
v1.0.0rc2 2012-03-21
g3-v1.0.0rc1 2012-03-14
g3-v1.0.0-rc2 2012-03-16
1.0.0rc1 2012-03-14
0.10.6 2012 년 1 월 17 일
0.10.5 2011-11-08
0.10.4 2011-10-23
0.10.3 2011-10-14
0.10.2 2011-10-08
0.10.1 2011-09-09
0.10.0 2011-09-02
0.9.19 2011 년 8 월 21 일
0.9.18 2011 년 7 월 30 일
0.9.17 2011-06-30
0.9.16 2011-06-08
0.9.15 2011-04-12
0.9.14 2011-04-01
0.9.13 2011-03-14
0.9.12 2011-03-04
0.9.11 2011-02-09
0.9.10 2011 년 1 월 27 일
0.9.9 2011-01-14
0.9.7 2010-12-11
0.9.6 2010-12-07
0.9.5 2010-11-25
0.9.4 2010-11-19
0.9.3 2010-11-11
0.9.2 2010-11-03
0.9.1 2010-10-27
0.9.0 2010-10-21

시작하기

새 HTML 파일을 만들고 다음 내용을 붙여 넣습니다. 

<!DOCTYPE html>
<html ng-app>
<head>
  <title>Hello, Angular</title>
  <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
</head>
<body ng-init="name='World'">
  <label>Name</label>
  <input ng-model="name" />
  <span>Hello, {{ name }}!</span>
  <p ng-bind="name"></p>
</body>
</html>

라이브 데모

브라우저로 파일을 열면 입력 필드와 Hello, World! 텍스트가 표시됩니다 Hello, World! . 입력 값을 편집하면 전체 페이지를 새로 고칠 필요없이 실시간으로 텍스트가 업데이트됩니다.

설명:

  1. 콘텐츠 전달 네트워크에서 각도 프레임 워크를로드하십시오. 

    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>

  2. ng-app 지시문을 사용하여 HTML 문서를 Angular 응용 프로그램으로 정의합니다. 

    <html ng-app>

  3. ng-init 사용하여 name 변수를 초기화하십시오. 

    <body ng-init=" name = 'World' ">

    ng-init은 시범 및 테스트 목적으로 만 사용해야합니다. 실제 응용 프로그램을 빌드 할 때 컨트롤러는 데이터를 초기화해야합니다.

  4. 모델의 데이터를 HTML 컨트롤의 뷰에 바인딩합니다. ng-model 을 사용하여 name 속성에 <input> 을 바인딩합니다. 

    <input ng-model="name" />

  5. 이중 중괄호 {{ }} 사용하여 모델의 콘텐츠 표시 

    <span>Hello, {{ name }}</span>

  6. name 속성을 바인딩하는 또 다른 방법은 handlebars "{{ }}" 대신 ng-bind 사용 ng-bind 것입니다. 

     <span ng-bind="name"></span>

마지막 세 단계는 양방향 데이터 바인딩을 설정 합니다. 입력에 대한 변경 사항은 모델 에 반영되며 뷰에 반영됩니다.

핸들바와 ng-bind 사용하는 것에는 차이가 있습니다. 핸들 막대를 사용하면 데이터가로드되기 전에 표현식이 해결되기 전에 페이지가로드 될 때 실제 Hello, {{name}} 가 표시 될 수 있습니다 ( Hello, {{name}} 반면 ng-bind 를 사용하면 이름이 표시 될 때만 데이터가 표시됩니다. 해결되었습니다. 대안으로 ng-cloak 명령을 사용하여 핸들 바가 컴파일되기 전에 표시되지 않도록 할 수 있습니다.

모든 일반적인 앵귤러 구조를 보여줍니다.

다음 예제는 하나의 파일에서 일반적인 AngularJS 구문을 보여줍니다. 

<!DOCTYPE html>
<html ng-app="myDemoApp">
  <head>
    <style>.started { background: gold; }</style>
    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    <script>
      function MyDataService() {
        return {
          getWorlds: function getWorlds() {
            return ["this world", "another world"];
          }
        };
      }

      function DemoController(worldsService) {
        var vm = this;
        vm.messages = worldsService.getWorlds().map(function(w) {
          return "Hello, " + w + "!";
        });
      }

      function startup($rootScope, $window) {
        $window.alert("Hello, user! Loading worlds...");
        $rootScope.hasStarted = true;
      }
      
      angular.module("myDemoApp", [/* module dependencies go here */])
        .service("worldsService", [MyDataService])
        .controller("demoController", ["worldsService", DemoController])
        .config(function() {
          console.log('configuring application');
        })
        .run(["$rootScope", "$window", startup]);
    </script>
  </head>
  <body ng-class="{ 'started': hasStarted }" ng-cloak>
    <div ng-controller="demoController as vm">
      <ul>
        <li ng-repeat="msg in vm.messages">{{ msg }}</li>
      </ul>
    </div>
  </body>
</html>

파일의 모든 행은 아래에 설명되어 있습니다.

라이브 데모

  1. ng-app="myDemoApp" , 응용 프로그램을 부트 스트랩하고 DOM 요소가 "myDemoApp" 라는 특정 angular.module 제어된다는 것을 알리는 ngApp 지시문 입니다.
  2. <script src="angular.min.js"> 는 AngularJS 라이브러리 를 부트 스트랩하는 첫 번째 단계입니다.

아래에 사용 및 설명되는 세 가지 함수 ( MyDataService , DemoController 및 startup )가 선언됩니다.

  1. 배열과 함께 두 번째 인수로 사용 된 angular.module(...) 은 새 모듈을 만듭니다. 이 배열은 모듈 종속성 목록을 제공하는 데 사용됩니다. 이 예제에서 우리는 module(...) 함수의 결과를 호출합니다.

  2. .service(...) 는 각도 서비스를 만들고 연결을위한 모듈을 반환합니다.

  3. .controller(...) 는 각도 조절기를 만들고 연결을위한 모듈을 반환합니다.

  4. .config(...) 이 메소드를 사용하여 모듈로드시 수행해야하는 작업을 등록하십시오.

  5. .run(...) 은 시작시 코드가 실행되고 항목 배열을 매개 변수로 취합니다. 인젝터가 모든 모듈을로드 할 때 수행해야하는 작업을 등록하려면이 방법을 사용하십시오.

    • 첫 번째 항목은 Angular가 startup 기능이 내장 된 $rootScope 서비스 가 인수로 주입되어야 함을 $rootScope 있습니다.
    • 두 번째 항목은 Angular가 startup 함수가 내장 된 $window 서비스 를 인수로 주입해야한다는 것을 알려주고 있습니다.
    • 배열의 마지막 항목 인 startup 은 시작시 실행할 실제 함수입니다.

  6. ng-class 는 동적 class 를 설정하는 ngClass 지정 문 hasStarted 예제에서는 $rootScope 동적으로 hasStarted 를 사용합니다

  7. ng-cloak 는 Angular가 응용 프로그램을 완전히로드하기 전에 렌더링되지 않은 Angular html 템플릿 (예 : " {{ msg }} ")이 잠깐 표시된 것을 방지하기 위한 지침 입니다.

  8. ng-controller 는 Angular에게 특정 이름의 새 컨트롤러를 인스턴스화하여 DOM의 해당 부분을 조율하는 지시문 입니다.

  9. ng-repeat 는 컬렉션에서 Angular를 반복하고 각 항목에 대해 DOM 템플리트를 복제하는 지시어 입니다.

  10. {{ msg }} 보간법 : 스코프 또는 컨트롤러의 일부를 현장에서 렌더링;

범위의 중요성

Angular는 HTML을 사용하여 웹 페이지와 일반 Javascript를 확장하여 논리를 추가하므로 ng-app , ng-controller 및 ng-if , ng-repeat 등과 같은 기본 제공 지시문을 사용하여 웹 페이지를 쉽게 만들 수 있습니다. new controllerAs 구문을 사용하여 Angular 사용자를 처음 접하는 사용자는 $scope 를 사용하는 대신 함수와 데이터를 컨트롤러에 연결할 수 있습니다.

그러나 조만간이 $scope 무엇인지 정확히 이해하는 것이 중요합니다. 몇 가지 이해가 중요하므로 예제에 계속 나타납니다.

좋은 소식은 간단하면서도 강력한 개념이라는 것입니다.

다음을 만들 때 : 

<div ng-app="myApp">
 <h1>Hello {{ name }}</h1>
</div>

이름 은 어디에서 살고 있습니까?

대답은 Angular가 $rootScope 객체를 생성 $rootScope 것입니다. 이것은 단순히 일반 자바 스크립트 객체이므로 name 은 $rootScope 객체의 속성입니다. 

angular.module("myApp", [])
  .run(function($rootScope) {
    $rootScope.name = "World!";
  });

Javascript의 전역 범위와 마찬가지로 전역 범위 또는 $rootScope 항목을 추가하는 것이 일반적으로 좋지 않습니다.

물론 대부분의 경우 컨트롤러를 만들고 필요한 기능을 해당 컨트롤러에 넣습니다. 그러나 컨트롤러를 만들면 Angular가 마술을 일으키고 컨트롤러에 $scope 객체를 만듭니다. 이를 종종 " 로컬 범위 "라고합니다.

그래서, 다음 컨트롤러를 생성합니다 : 

<div ng-app="myApp">
  <div ng-controller="MyController">
    <h1>Hello {{ name }}</h1>
  </div>
</div>

$scope 매개 변수를 통해 로컬 범위에 액세스 할 수 있습니다. 

angular.module("myApp", [])
  .controller("MyController", function($scope) {
    $scope.name = "Mr Local!";
  });

$scope 매개 변수가없는 컨트롤러는 어떤 이유로 든 필요하지 않을 수 있습니다. 그러나 controllerAs 구문 을 사용하더라도 로컬 범위가 있음을 인식하는 것이 중요합니다.

$scope 는 JavaScript 객체이므로 Angular는 $rootScope 에서 프로토 타입 적으로 상속받을 수 있도록 마술처럼 설정합니다. 그리고 여러분이 상상할 수있는 것처럼, 일련의 범위가있을 수 있습니다. 예를 들어 상위 컨트롤러에서 모델을 만들고 상위 컨트롤러의 범위에 $scope.model 있습니다.

그런 다음 프로토 타입 체인을 통해 하위 컨트롤러는 $scope.model 하여 동일한 모델에 로컬로 액세스 할 수 있습니다.

처음에는 Angular가 백그라운드에서 마술을 수행하기 때문에 처음에는이 중 어느 것도 분명하지 않습니다. 그러나 $scope 이해하는 것은 Angular가 작동하는 방법을 알기위한 중요한 단계입니다.

가장 단순한 가능한 각도의 Hello World.

Angular 1은 DOM 컴파일러에 있습니다. 템플릿이나 일반 웹 페이지처럼 HTML을 전달한 다음 앱을 컴파일 할 수 있습니다.

{{ }} 핸들 바 스타일 구문을 사용하여 페이지의 영역을 표현식 으로 처리하도록 Angular에 알릴 수 있습니다. 중괄호 사이에는 다음과 같이 컴파일됩니다. 

{{ 'Hello' + 'World' }}

그러면 다음과 같이 출력됩니다. 

HelloWorld

응 용 - 앱

우리는 DOM의 어느 부분을 ng-app 지시어를 사용하여 마스터 템플릿으로 취급할지 Angular에게 알려줍니다. 지시어는 Angular 템플릿 컴파일러가 처리 방법을 알고있는 사용자 지정 특성 또는 요소입니다. 이제 ng-app 지시문을 추가해 보겠습니다. 

<html>
  <head>
    <script src="/angular.js"></script>
  </head>
  <body ng-app>
    {{ 'Hello' + 'World' }}
  </body>
</html>

이제 본문 요소에 루트 템플릿이라고 말했습니다. 그 안에있는 것은 컴파일 될 것입니다.

지시문

지시문은 컴파일러 지시문입니다. Angular DOM 컴파일러의 기능을 확장합니다. 이것이 Angular의 작성자 인 Misko 가 Angular를 다음과 같이 설명하는 이유입니다.

"웹 응용 프로그램 용으로 만들어진 웹 브라우저 였을 것입니다.

문자 그대로 새로운 HTML 속성과 요소를 만들고 Angular에서이를 앱으로 컴파일합니다. ng-app 는 컴파일러를 켜는 지시어입니다. 기타 지시문은 다음과 같습니다.

  • ng-click : 클릭 핸들러를 추가하고,
  • 조건부로 요소를 ng-hide
  • <form> : 표준 HTML 양식 요소에 추가 동작을 추가합니다.

Angular에는 가장 일반적인 작업을 수행 할 수있는 내장 명령 약 100 개가 있습니다. 우리는 자체적으로 작성할 수도 있으며, 내장 된 지시문과 동일한 방식으로 처리됩니다.

HTML과 함께 연결된 일련의 지시문에서 Angular 앱을 만듭니다.

각도로 축소

Minification이란 무엇입니까?

이 기능은 기능을 변경하지 않고 소스 코드에서 불필요한 문자를 모두 제거하는 과정입니다.

일반 구문

컨트롤러를 작성하기 위해 일반적인 각도 구문을 사용하면 파일을 최소화 한 후 기능이 중단됩니다.

컨트롤러 (축소 전) : 

var app = angular.module('mainApp', []);    
app.controller('FirstController', function($scope) {
    $scope.name= 'Hello World !';  
});

minification tool을 사용한 후 다음과 같이 축소됩니다. 

var app=angular.module("mainApp",[]);app.controller("FirstController",function(e){e.name= 'Hello World !'})

여기서 minification은 불필요한 공백과 $ scope 변수를 코드에서 제거했습니다. 그래서 우리는이 축소 된 코드를 사용할 때 아무 것도 보이지 않을 것입니다. $ scope는 컨트롤러와 뷰 사이에서 중요한 부분이므로 작은 'e'변수로 대체됩니다. 따라서 응용 프로그램을 실행할 때 알 수없는 공급자 'e'종속성 오류가 발생합니다.

분실 안전 인 서비스 이름 정보로 코드에 주석을 추가하는 두 가지 방법이 있습니다.

인라인 주석 구문 

var app = angular.module('mainApp', []);    
app.controller('FirstController', ['$scope', function($scope) {
    $scope.message = 'Hello World !'; 
}]);

$ inject 속성 주석 구문 

FirstController.$inject = ['$scope'];
var FirstController = function($scope) {
    $scope.message = 'Hello World !'; 
}

var app = angular.module('mainApp', []);
app.controller('FirstController', FirstController);

축소 후이 코드는 

var app=angular.module("mainApp",[]);app.controller("FirstController",["$scope",function(a){a.message="Hello World !"}]);

여기서 angle은 변수 'a'를 $ scope로 간주하고 'Hello World!'로 출력을 표시합니다.

AngularJS 시작 비디오 자습서

egghead.io 의 AngularJS 프레임 워크에 대한 유용한 비디오 자습서가 많이 있습니다.

여기에 이미지 설명을 입력하십시오.



Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow