AngularJS_$scope

directives - 확장된 HTML

scope - controller에 의해 model이 저장된 context

data binding - model과 view의 동기화

expression - 변수 접근, scope로부터의 함수?

service - view와 독립된 재사용 가능한 비즈니스 로직

dependency Injection - 오브젝트나 함수를 생성한다?

비즈니스로직?

$scope의 사용법
<div ng-controller="simpleCtrl">
  <input ng-model="message">
  <span>{{message}}</span>
</div>

<div ng-controller="goodCtrl">
  <input ng-model="message">
  <span>{{message}}</span>
</div>

app.controller('simpleCtrl', function ($scope) {
    $scope.message = "Hello Angular!~";
});

app.controller('goodCtrl', function ($scope) {
    $scope.message = 'goood Angular!-'
});

$rootScope에 대한 예제
<p>The rootScope's fav color: </p>
<h1>{{color}}</h1>

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

<p>The rootScope's fav color is still:</p>
<h1>{{color}}</h1>

var app = angular.module('myApp',[]);//왜 배열을 해주지?
app.run(function ($rootScope) {
    $rootScope.color = 'blue';
});

app.controller('myCtrl',function ($scope) {
    $scope.color = 'red';
});

ng-if에 대하여
<div ng-controller="EditController">
  <span>{{message}}</span>
  <div ng-if="userIsAdmin">
    <span>Edit Message</span>
    <input ng-model="message"/>
  </div>
</div>

app.controller('EditController', function ($scope) {
   $scope.userIsAdmin = false;
   $scope.message = 'Redact me';
});

간단한 데이터바인딩
<div ng-app="invoice1" ng-controller="InvoiceController as invoice">
    <b>Invoice:</b>
    <div>
        Quantity: <input type="number" min="0" ng-model="invoice.qty" required >
    </div>
    <div>
        Costs: <input type="number" min="0" ng-model="invoice.cost" required >
        <select ng-model="invoice.inCurr">
            <option ng-repeat="c in invoice.currencies">{{c}}</option>
        </select>
    </div>
    <div>
        <b>Total:</b>
        <span ng-repeat="c in invoice.currencies">
      {{invoice.total(c) | currency:c}}
    </span><br>
        <button class="btn" ng-click="invoice.pay()">Pay</button>
    </div>
</div>

angular.module('invoice1',[])
    .controller('InvoiceController', function InvoiceController(){
        this.qty = 1;
        this.cost = 2;
        this.inCurr = 'EUR';
        this.currencies = ['USD','EUR','CNY'];
        this.usdToForeignRates={
            USD:1,
            EUR:0.74,
            CNY:6.09
        };

        this.total = function total(outCurr){
            return this.convertCurrency(this.qty*this.cost,this.inCurr, outCurr);
        };
        this.convertCurrency = function convertCurrency(amount, inCurr, outCurr) {
            return amount * this.usdToForeignRates[outCurr]/this.usdToForeignRates[inCurr];
        };

        this.pay = function pay(){
            window.alert('Thanks!');
        };
});

//비즈니스 모델 재활용

// invoice2.js
angular.module('invoice1',['finance2'])
    .controller('InvoiceController', ['currencyConverter'],function InvoiceController(currencyConverter){
        this.qty = 1;
        this.cost = 2;
        this.inCurr = 'EUR';
        this.currencies = currencyConverter.currencies;

        this.total = function total(outCurr){
            return currencyConverter.convert(this.qty*this.cost,this.inCurr, outCurr);
        };

        this.pay = function pay(){
            window.alert('Thanks!');
        };
    });


//finance2.js
angular.module('finance2',[])
    .factory('currencyConverter',function () {
    var currencies = ['USD','EUR','CNY'];
    var usdToForeignRates = {
        USD:1,
        EUR:0.74,
        CNY: 6.09
    };
    var convert = function (amount, inCurr, outCurr) {
        return amount * usdToForeignRates[outCurr]/ usdToForeignRates[inCurr];

    };

    return{
        currencies:currencies,
        convert:convert
    };
});

참조 https://docs.angularjs.org/guide/concepts