2017.07.28 12:05

controller에 늘어나는 변수와 함수들을 유사한 성격을 가진 것들을 묶어 service로 분리하여 코드를 관리


index.html

<!DOCTYPE html>

<html ng-app="web">

<head>

  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>

  <link rel="stylesheet" href="style.css" />


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

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

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

</head>


<body ng-controller="ctrl">

  <h1>{{Data}}</h1>

</body>

</html>


app.js

var app = angular.module('web', []);


controller.js

// myService의 명시적으로 선언하여 사용

app.controller("ctrl", ["$scope", "myService", function($scope, myService) {

  $scope.Data = myService.get();

}]);

// 또는

app.controller("ctrl", function($scope, myService) {

  $scope.Data = myService.get();

});


service.js

app.factory("myService", function() {

  var service = {

    Data:  "Datasafasfsad",

    

    get: function() {

      return service.Data;

    }

  }

  // controller에서 사용할 object를 리턴

  return service;

});


샘플

Posted by CoolDragon

댓글을 달아 주세요

2017.07.28 10:29

간단 사용자 지시자(custom directive) 만들기


<!DOCTYPE html>

<html ng-app="web">

<head>

  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>

  <link rel="stylesheet" href="style.css" />

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

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

</head>


<body ng-controller="WebController">

   <!--angular에서 카멜케이스로 지정하지만 여기서는 '-'으로 구분 -->

  <div>

    <my-title />

  </div>


  <ul ng-repeat="Fruit in Fruits">

    <my-item />

  </ul>

</body>

</html>


script.js

(function() {

  var app = angular.module('web', []);


  app.controller("WebController", ["$scope", function($scope) {

    $scope.Fruits = ['Apple', 'Orange', 'Cherry'];

    $scope.Title = "TEST";

  }])

})();


directives.js

// 지시자 이름을 카멜케이스로 한다.

angular.module('web').directive('myTitle', function() {

  return {

    template: '<h1>테스트</h1>'

  }

});


angular.module('web').directive('myItem', function() {

  return {

    templateUrl: 'item.tmpl.html'

  }

});


item.template.html

<li>{{Fruit}}</li>



샘플

Posted by CoolDragon

댓글을 달아 주세요

2017.07.27 17:03

클릭에 대한 핸들러 연결


<tag ng-click="controller명.함수()"/>


예제

<button ng-click="controller.delete()">삭제</button>




Posted by CoolDragon

댓글을 달아 주세요

2017.07.27 16:15

바인딩될 데이터를 필터 지시어에 맞게 데이터 포맷을 변경

용법

<tag>{{ expression | filter:argument1:argument2:... | filter | ...}}</tag>


index.html

<!DOCTYPE html>

<html ng-app="web">


<head>

  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>

  <link rel="stylesheet" href="style.css" />

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

</head>


<body ng-controller="WebController">

  <h1>student info</h1>

  

  <ul ng-repeat="Student in Students">

    <li><input type="text" ng-model="Student.Name"/></li>

    <li>Grade: {{Student.Grade}}</li>

    <li>Gender: {{Student.Gender}}</li>

    <li>Create: {{Student.Create | date:"yyyy-MM-dd HH:mm:ss"}}</li>

  </ul>

</body>


</html>


// controller.js

// Code goes here


(function() {

  var app = angular.module('web', []);

  

  app.controller("WebController", ["$scope", function($scope) {

    $scope.Students = [

      {Name: "Tom", Grade: 8, Gender: "Male", Create: Date.now()}, 

      {Name: "Alice", Grade: 10, Gender: "Female", Create: Date.now()}, 

      {Name: "Ann", Grade: 7, Gender: "Female", Create: Date.now()}, 

      {Name: "Brown", Grade: 8, Gender: "Male", Create: Date.now()}, 

    ]

  }])

})();


샘플

참고: https://docs.angularjs.org/guide/filter

Posted by CoolDragon

댓글을 달아 주세요

2017.07.27 12:14

반복된 데이터(배열)를 UI에 표시해 줄 때 사용


// index.html

<!DOCTYPE html>

<html ng-app="web">


<head>

  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>

  <link rel="stylesheet" href="style.css" />

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

</head>


<body ng-controller="WebController">

  <h1>student info</h1>

  

  <!-- ng-repeat="변수 in 변수배열" 처럼 사용 -->

  <ul ng-repeat="Student in Students">

    <li><input type="text" ng-model="Student.Name"/></li>

    <li>Grade: {{Student.Grade}}</li>

    <li>Gender: {{Student.Gender}}</li>

  </ul>

</body>


</html>


// controller.js

// Code goes here


(function() {

  var app = angular.module('web', []);

  

  app.controller("WebController", ["$scope", function($scope) {

    //배열로 선언

    $scope.Students = [

      {Name: "Tom", Grade: 8, Gender: "Male"}, 

      {Name: "Alice", Grade: 10, Gender: "Female"}, 

      {Name: "Ann", Grade: 7, Gender: "Female"}, 

      {Name: "Brown", Grade: 8, Gender: "Male"}, 

    ]

  }])

})();


샘플

Posted by CoolDragon

댓글을 달아 주세요

2017.07.27 11:49

기본 컨트롤러 선언 및 구현방법


index.html

<!DOCTYPE html>

<html ng-app="web">


<head>

  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>

  <link rel="stylesheet" href="style.css" />

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

</head>


<!--ng-controller: controller.js에 선언된 컨트롤러를 사용-->

<body ng-controller="WebController">

  <h1>student info</h1>

  <ul>

    <!--ng-model: 양방향 데이터바인딩에 사용, 성능에 영향을 줌-->

    <li><input type="text" ng-model="Student.Name"/></li>

    <li>Grade: {{Student.Grade}}</li>

    <li>Gender: {{Student.Gender}}</li>

  </ul>

</body>


</html>


controller.js

(function() {

  var app = angular.module('web', []);


  // WebController: 컨트롤러 명

  app.controller("WebController", ["$scope", function($scope) {

    $scope.Student = {

      Name: "Tom",

      Grade: 8,

      Gender: "Male"

    }

  }])

})();



샘플

Posted by CoolDragon

댓글을 달아 주세요

2017.07.27 11:18

Directive(지시자)

ng-app: angular를 시작하기 위한 지시자

ng-init: 웹페이지가 시작되면서 웹 사이트의 기본 설정값을 초기화 하기 위한 지시자


<!DOCTYPE html>

<html ng-app>


<head>

  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>

  <link rel="stylesheet" href="style.css" />

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

</head>


<body ng-init="name='Angular'"> <!-- name 변수를 선언 -->

  <h1>Hello {{name}}</h1> <!-- name 변수를 사용 -->

</body>


</html>


https://embed.plnkr.co/YvAQLTZ08J4n9JKbFfXz/
Posted by CoolDragon

댓글을 달아 주세요

2017.07.21 13:44

# 계정 생성

>net user Test Test /ADD

The command completed successfully.


# 생성계정 그룹 등록

>net localgroup Administrators Test /add

The command completed successfully.

Posted by CoolDragon

댓글을 달아 주세요

2017.07.21 13:34


### 관리자 모드로 실행해야 함 ###

> Dism /online /Get-Features


### FTP 활성화 ###

> DISM /Online /Enable-Feature /FeatureName:IIS-WebServer /FeatureName:IIS-WebServerRole /FeatureName:IIS-FTPServer /FeatureName:IIS-FTPSvc /FeatureName:IIS-FTPExtensibility

> echo %errorlevel%


참조

https://docs.microsoft.com/en-us/windows-hardware/manufacture/desktop/enable-or-disable-windows-features-using-dism

Posted by CoolDragon

댓글을 달아 주세요

2017.07.14 16:02

- 지정된 폴더의 파일 변화 모니터링 (생성,삭제, 리네임, 변경)

- 파일이 현재 복사가 되는지 File Lock 여부


using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Runtime.InteropServices;

using System.Text;

using System.Threading.Tasks;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;


namespace FileWatcher

{

    /// <summary>

    /// MainWindow.xaml에 대한 상호 작용 논리

    /// </summary>

    public partial class MainWindow : Window

    {

        public MainWindow()

        {

            InitializeComponent();


            Start();

        }


        System.Windows.Threading.DispatcherTimer timer = new System.Windows.Threading.DispatcherTimer();

        string filePath = null;


        private void Start()

        {

            System.IO.FileSystemWatcher watcher = new System.IO.FileSystemWatcher();

            watcher.Path = @"d:\watch";

            watcher.NotifyFilter = System.IO.NotifyFilters.FileName | System.IO.NotifyFilters.DirectoryName | System.IO.NotifyFilters.Size;


            watcher.Changed += Watcher_Changed;

            watcher.Created += Watcher_Created;

            watcher.Deleted += Watcher_Deleted;

            watcher.Renamed += Watcher_Renamed;

            watcher.EnableRaisingEvents = true;


            timer.Interval = new TimeSpan(0, 0, 1);

            timer.Tick += (s, args) =>

            {

                if (!string.IsNullOrEmpty(filePath))

                {

                    if (IsFileLocked(filePath))

                        Log($"File Locked");

                    else

                    {

                        Log($"File unlocked");

                        timer.Stop();

                    }

                }

            };

        }


        private void Watcher_Renamed(object sender, System.IO.RenamedEventArgs e)

        {

            Log($"{e.ChangeType}, File: {e.FullPath}, Old File: {e.OldFullPath}");

        }


        private void Watcher_Deleted(object sender, System.IO.FileSystemEventArgs e)

        {

            Log($"{e.ChangeType}, File: {e.FullPath}");

        }


        private void Watcher_Created(object sender, System.IO.FileSystemEventArgs e)

        {

            Log($"{e.ChangeType}, File: {e.FullPath}");

            timer.Start();

        }


        private void Watcher_Changed(object sender, System.IO.FileSystemEventArgs e)

        {

            filePath = e.FullPath;

            Log($"{e.ChangeType}, File: {filePath}, Length: {new System.IO.FileInfo(filePath).Length}");

        }


        private void Timer_Tick(object sender, EventArgs e)

        {

            throw new NotImplementedException();

        }


        private void Log(string str)

        {

            this.Dispatcher.Invoke(() =>

            {

                txt.Text += str + "\r\n";

            });

        }


        const int ERROR_SHARING_VIOLATION = 32;

        const int ERROR_LOCK_VIOLATION = 33;

        private bool IsFileLocked(string file)

        {

            //check that problem is not in destination file

            if (File.Exists(file) == true)

            {

                FileStream stream = null;

                try

                {

                    stream = File.Open(file, FileMode.Open, FileAccess.ReadWrite, FileShare.None);

                }

                catch (Exception ex2)

                {

                    //_log.WriteLog(ex2, "Error in checking whether file is locked " + file);

                    int errorCode = Marshal.GetHRForException(ex2) & ((1 << 16) - 1);

                    if ((ex2 is IOException) && (errorCode == ERROR_SHARING_VIOLATION || errorCode == ERROR_LOCK_VIOLATION))

                    {

                        return true;

                    }

                }

                finally

                {

                    if (stream != null)

                        stream.Close();

                }

            }

            return false;

        }

    }

}



Posted by CoolDragon

댓글을 달아 주세요