Angular

공부 자료: https://www.w3schools.com/angula
온라인에서 실습하기
앵귤러 MVC 구조
앵귤러 공식 사이트

기억하기

뷰 (템플릿) 내에서는 $scope를 명시해주지 않아도 됨
- 컨트롤러에서 $scope.carname; 정의해두고 뷰에서 '<h1>{carname}}</h1>' 이렇게 사용가능
scope는 뷰와 컨트롤러 모두 접근 가능
앵귤러의 MVC 란
- View = HTML.
- Model (=scope) = data available for the current view
- Controller = JavaScript function that makes/changes/removes/controls the data.

바인딩

바인딩이란 -> synchronization between 모델 and 뷰

{{}}와 ng-bind 는 동일
ng-init은 사실 잘 안씀, 아래 예시용

<div ng-app="" ng-init="quantity=1;cost=5">
	<p>Total in dollar: {{ quantity * cost }}</p>
</div>

<div ng-app="" ng-init="quantity=1;cost=5">
	<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>

<div ng-app="" ng-init="points=[1,15,19,2,40]">
	<p>The third result is {{ points[2] }}</p>
</div>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "John";
  $scope.lastname = "Doe";
});

<p ng-bind="firstname"></p>
-----------------------------------
<p>First name: {{firstname}}</p>

모듈

모듈은 애플리케이션 컨트롤러의 컨테이너입니다. 컨트롤러는 항상 모듈에 속합니다.

<div ng-app="myApp" ng-controller="myCtrl">
	{{ firstName + " " + lastName }}
</div>

<script>
    var app = angular.module("myApp", []);

    app.controller("myCtrl", function($scope) {
      $scope.firstName = "John";
      $scope.lastName = "Doe";
    });
</script>

Directive

<div ng-app="myApp" w3-test-directive></div>

<script>
var app = angular.module("myApp", []);

app.directive("w3TestDirective", function() {
  return {
    template : "I was made in a directive constructor!"
  };
});
</script>

모듈과 컨트롤러 각각 파일에

앵귤러는 또는 시작 부분에서 로드하는 것이 좋다.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
	{{ firstName + " " + lastName }}
</div>

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html>

// myApp.js
var app = angular.module("myApp", []);

// myCtrl.js
app.controller("myCtrl", function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
});

Directives

ng-app
- 앵귤러 앱의 root element를 정의
- 애플리케이션을 초기화
ng-init
- 앱 데이터를 초기값 설정
ng-model
- HTML input, select, textarea 의 값들을 앱 데이터에 바인딩

<div ng-app="" ng-init="firstName='John'">
    <p>Name: <input type="text" ng-model="firstName"></p>
    <p>You wrote: {{ firstName }}</p>
</div>

네이밍

생성시 카멜 케이스 사용 (e,g. w3TestDirective)
HTML 에서 사용할때는 - 포함 (e,g. w3-test-directive)

<body ng-app="myApp">
    <w3-test-directive></w3-test-directive>

    <script>
    var app = angular.module("myApp", []);
    app.directive("w3TestDirective", function() {
      return {
        template : "<h1>Made by a directive!</h1>"
      };
    });
    </script>
</body>

호출

아래 4가지 방식 모두 동일 기능

E: Element name
A: Attribute
C: Class
M: Comment

<w3-test-directive></w3-test-directive>  Element name 방식
---------------------------------------
<div w3-test-directive></div> Attribute 방식
---------------------------------------
<div class="w3-test-directive"></div> Class 방식
---------------------------------------
<!-- directive: w3-test-directive --> Comment 방식

호출 제한

E for Element name
A for Attribute
C for Class
M for Comment

// attribute 방식에 의해서만 호출 가능
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    restrict : "A", // 어트리뷰트
    template : "<h1>Made by a directive!</h1>"
  };
});

컨트롤러

앵귤러는 Model 과 View 를 즉시 동기화 시켜주기에, 컨트롤러는 모델 데이터만 집중 (어차피 뷰에 영향주니)

<div ng-app="myApp" ng-controller="myCtrl">
  <h1 ng-click="changeName()">{{firstname}}</h1>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.firstname = "John";
      $scope.changeName = function() {
        $scope.firstname = "Nelly";
      }
    });
</script>

ng-model 모델로 바인딩 할경우 (firstName, lastName)

<div ng-app="myApp" ng-controller="myCtrl">
    First Name: <input type="text" ng-model="firstName"><br>
    Last Name: <input type="text" ng-model="lastName"><br>
    <br>
    Full Name: {{firstName + " " + lastName}}
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.firstName = "John";
      $scope.lastName = "Doe";
    });
</script>

다른 예제

angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}
  ];
});

<div ng-app="myApp" ng-controller="namesCtrl">
    <ul>
      <li ng-repeat="x in names">
        {{ x.name + ', ' + x.country }}
      </li>
    </ul>
</div>

<script src="namesController.js"></script>

Scope

뷰와 컨트롤러의 바인딩된 부분
- 그리고, 뷰와 컨트롤러 양쪽에서 사용 가능
스코프는 properties 와 methods 를 이용한 수 있는 객체이다.

Root Scope

<body ng-app="myApp">

<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1> ---> 블루

<div ng-controller="myCtrl">
  <p>The scope of the controller's favorite color:</p>
  <h1>{{color}}</h1> ---> 레드
</div>

<p>The rootScope's favorite color is still:</p>
<h1>{{color}}</h1> ---> 블루

<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
  $rootScope.color = '블루';
});
app.controller('myCtrl', function($scope) {
  $scope.color = "레드";
});
</script>
</body>

Filter

| ----> 파이프 기호로 사용
uppercase 예시

<div ng-app="myApp" ng-controller="personCtrl">
	<p>The name is {{ lastName | uppercase }}</p>
</div>

currency Format a number to a currency format.
date Format a date to a specified format.
filter Select a subset of items from an array.
json Format an object to a JSON string.
limitTo Limits an array/string, into a specified number of elements/characters.
lowercase Format a string to lower case.
number Format a number to a string.
orderBy Orders an array by an expression.
uppercase Format a string to upper case.

orderBy 예시

// 나라이름으로 정렬
<li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
</li>
 
// 글자에 i 레터가 들어간것만 보여주기 
<li ng-repeat="x in names | filter : 'i'"> 
    {{ x }}
</li>

<div ng-app="myApp" ng-controller="namesCtrl">

<table border="1" width="100%">
  <tr>
    <th ng-click="orderByMe('name')">Name</th>
    <th ng-click="orderByMe('country')">Country</th>
  </tr>
  <tr ng-repeat="x in names | orderBy:myOrderBy">
    <td>{{x.name}}</td>
    <td>{{x.country}}</td>
  </tr>
</table>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Carl',country:'Sweden'},
    {name:'Margareth',country:'England'},
    {name:'Hege',country:'Norway'},
    {name:'Joe',country:'Denmark'},
    {name:'Gustav',country:'Sweden'},
    {name:'Birgit',country:'Denmark'},
    {name:'Mary',country:'England'},
    {name:'Kai',country:'Norway'}
  ];
  $scope.orderByMe = function(x) { // 유저의 클릭에 따라 정렬 (이름, 나라 택 1)
    $scope.myOrderBy = x;
  }
});
</script>

커스텀 필터

<ul ng-app="myApp" ng-controller="namesCtrl">
  <li ng-repeat="x in names">
    {{x | myFormat}}
  </li>
</ul>

<script>
var app = angular.module('myApp', []);
app.filter('myFormat', function() {
  return function(x) {
    var i, c, txt = "";
    for (i = 0; i < x.length; i++) {
      c = x[i];
      if (i % 2 == 0) {
        c = c.toUpperCase();
      }
      txt += c;
    }
    return txt;
  };
});
app.controller('namesCtrl', function($scope) {
  $scope.names = ['Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
</script>

서비스

$location

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

$http

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm").then(function (response) {
    $scope.myWelcome = response.data;
  });
});

$timeout (= window.setTimeout)

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.myHeader = "Hello World!";
  $timeout(function () {
    $scope.myHeader = "How are you today?";
  }, 2000);
});

$interval (= window.setInterval)

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
  $scope.theTime = new Date().toLocaleTimeString();
  $interval(function () {
    $scope.theTime = new Date().toLocaleTimeString();
  }, 1000);
});

커스텀 서비스

app.service('hexafy', function() {
  this.myFunc = function (x) {
    return x.toString(16);
  }
});

커스 사용하려면, 컨트롤러 정의할때 넘겨주기

app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});

커스텀 필터에서 커스텀 서비스 사용시

app.filter('myFormat',['hexafy', function(hexafy) {
  return function(x) {
    return hexafy.myFunc(x);
  };
}]);

DOM

ng-disabled

<button ng-disabled="mySwitch">Click Me!</button>
// 컨트롤러의 mySwitch 값이 true가 되면 아래 처럼 변함
<button disabled>Click Me!</button>

ng-show

<p ng-show="true">I am visible.</p>
<p ng-show="false">I am not visible.</p>

ng-hide

<p ng-hide="true">I am not visible.</p>
<p ng-hide="false">I am visible.</p>

Events

ng-blur
ng-change
ng-click
ng-copy
ng-cut
ng-dblclick
ng-focus
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-paste

<button ng-click="count = count + 1">Click me!</button>

Validation

아래 모두 true/false 중 하나 값이 지정됨

$untouched The field has not been touched yet
$touched The field has been touched
$pristine The field has not been modified yet
$dirty The field has been modified
$invalid The field content is not valid
$valid The field content is valid

$valid 예제

<form name="myForm">
  <input name="myInput" ng-model="myInput" type="email">
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>

$touched $invalid 예제

<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>

input 에 e 가 들어가있는지 확인 예제

<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>

<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      function myValidation(value) {
        if (value.indexOf("e") > -1) {
          mCtrl.$setValidity('charE', true);
        } else {
          mCtrl.$setValidity('charE', false);
        }
        return value;
      }
      mCtrl.$parsers.push(myValidation);
    }
  };
});
</script>

유저 이름과 이메일이 둘중 하나라도 올바르지 않으면 disabled 시키기

<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>

나중에 보기

여기부터 공부하기

https://www.w3schools.com/angular/angular_http.asp

잡것

Repeat 반복문

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

<div ng-app="" ng-init="names=[
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}]">

    <ul>
      <li ng-repeat="x in names">
        {{ x.name + ', ' + x.country }}
      </li>
    </ul>
</div>

ng-model

아래 과 $scope.name 바인딩
HTML input, select, textarea 의 값들을 앱 데이터에 바인딩

<div ng-app="myApp" ng-controller="myCtrl">
  Name: <input ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "John Doe"; // 바인딩 완료
});
</script>

양방향 바인딩

<div ng-app="myApp" ng-controller="myCtrl">
  Name: <input ng-model="name">
  <h1>You entered: {{name}}</h1>
</div>

ng-model은 아래들을 자동 생성

ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine

<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
  Email:
  <input type="email" name="myAddress" ng-model="myText" required>
  <h1>Status</h1>
  {{myForm.myAddress.$valid}}
  {{myForm.myAddress.$dirty}} // 값이 바뀌면 true
  {{myForm.myAddress.$touched}} // 유저가 터치하면 true
</form>

ng-show

앵귤러는 ng-model에 정의한 변수가 존재하지 않으면 새로 생성해줌.
유저 input 검사기

<form ng-app="" name="myForm">
  Email:
  <input type="email" name="myAddress" ng-model="text">
  <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>

$routeProvider

<body ng-app="myApp">

    <p><a href="#/!">Main</a></p>

    <a href="#!red">Red</a>
    <a href="#!green">Green</a>
    <a href="#!blue">Blue</a>
    <div ng-view></div>

    <script>
    var app = angular.module("myApp", ["ngRoute"]);
    app.config(function($routeProvider) {
      $routeProvider
      .when("/", {
        templateUrl : "main.htm"
      })
      .when("/red", {
        templateUrl : "red.htm"
      })
      .when("/green", {
        templateUrl : "green.htm"
      })
      .when("/blue", {
        templateUrl : "blue.htm"
      });
    });
    </script>
</body>

뷰 마다 컨트롤러 지정하기

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/london", {
    templateUrl : "london.htm",
    controller : "londonCtrl"
  })
  .when("/paris", {
    templateUrl : "paris.htm",
    controller : "parisCtrl"
  });
});
app.controller("londonCtrl", function ($scope) {
  $scope.msg = "I love London";
});
app.controller("parisCtrl", function ($scope) {
  $scope.msg = "I love Paris";
});

HTML 직접 쓰려면, templateUrl 말고 template 사용

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    template : "<h1>Main</h1><p>Click on the links to change this content</p>"
  })
  .when("/banana", {
    template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
  })
  .otherwise({
    template : "<h1>None</h1><p>Nothing has been selected</p>"
  });
});

완전체 실습

https://www.w3schools.com/angular/angular_application.asp

PreviousTips, Tricks and Best Practices NextGraphQL

Last updated 3 years ago

hashtag기억하기

hashtag바인딩

hashtag모듈

hashtagDirective

hashtag모듈과 컨트롤러 각각 파일에

hashtagDirectives

hashtag네이밍

hashtag호출

hashtag호출 제한

hashtag컨트롤러

hashtagScope

hashtagRoot Scope

hashtagFilter

hashtag커스텀 필터

hashtag서비스

hashtag$location

hashtag$http

hashtag$timeout (= window.setTimeout)

hashtag$interval (= window.setInterval)

hashtag커스텀 서비스

hashtagDOM

hashtagng-disabled

hashtagng-show

hashtagng-hide

hashtagEvents

hashtagValidation

hashtag나중에 보기

hashtag잡것

hashtagRepeat 반복문

hashtagng-model

hashtagng-show

hashtag$routeProvider

hashtag완전체 실습

기억하기

바인딩

모듈

Directive

모듈과 컨트롤러 각각 파일에

Directives

네이밍

호출

호출 제한

컨트롤러

Scope

Root Scope

Filter

커스텀 필터

서비스

$location

$http

$timeout (= window.setTimeout)

$interval (= window.setInterval)

커스텀 서비스

DOM

ng-disabled

ng-show

ng-hide

Events

Validation

나중에 보기

잡것

Repeat 반복문

ng-model

ng-show

$routeProvider

완전체 실습