Angular(앵귤러) 관련

2017년 2월 기준.

 

<input type="text" ng-model="severity" value="2">

// ng-model은 value 지정 안됨.

 

<div ng-switch="d.severity">

<div ng-switch-when="1">

<div style="background-color:#d9534f">

</div>

</div>

// ng-switch-when안에 닫히지 않은 div는 사용할 수 없음

 

angular.module('app', [])

.controller('MainCtrl', ['$scope', function ($scope) {...}])

.controller('UserCtrl', ['$scope', function ($scope) {...}]);

 

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

app.controller('MainCtrl', ['$scope', function ($scope) {...}]);

app.controller('UserCtrl', ['$scope', function ($scope) {...}]);

// 네임스페이스 사용과 세미콜론 구분이 더 효율적.

 

<a custom-button>Click me</a>

app.directive('customButton', function () {

return {

link: function (scope, element, attrs) {

// DOM 조작과 이벤트 설정은 여기서!

}

};

});

// 디렉티브 이름에 대문자를 사용하면 DOM에서는 하이픈으로 이를 구분해서 사용.

 

AngularJS Batarang

// angular 디버깅. 크롬 확장도구.

 

$scope.serverId = [];

$scope.serverId.length;

// scope 배열, 길이.

 

$(function() {

$("#faultClear").click(function() {

if($(this).val() != null)

{

$("#FaultsClearCtrl").scope().setId($(this).val());

$("#FaultsClearCtrl").scope().faultsClear();

}

})

})

// jquery 로드 시점에 click 이벤트 scope 함수는 가능. click 이벤트 없이 실행하면 undefined.

$(window).bind("load", function() {

}

// window bind 시점에서 로드하면 가능함.

$.ajax({

success: function(response) {

$("#FaultsClearCtrl").scope().setId($(this).val());

}

});

// ajax success 시점에서 사용할 수 없음.

 

$("#LoginCtrl").scope().getPermissionCount();

var loc = $("#LoginCtrl").scope().data;

alert(loc);

// $http 처리와 데이터 처리를 한번에 하면 값이 scope에 바인딩 되지 않음

$("#LoginCtrl").scope().getPermissionCount();

$("#LoginCtrl").scope().setPermisionCount();

var loc = $("#LoginCtrl").scope().data;

alert(loc);

// $http처리부분이 완료된 후에, 데이터 처리. data에 제대로 바인딩

 

<a ng-href="#/profile?id={{ id }}">

// href는 ng-href 사용

 

Input value not visible

$scope.email = success.data[0].email;

<input id="email" type="text" value="{{ email }}">

// scope를 설정해서 input에 할당해야 한다.

 

var expireDate = new Date();

expireDate.setMinutes(expireDate.getMinutes() + 10);

$cookies.put("id", id, {'expires': expireDate});

// expire 관련. $cookieStore는 deprecated. $cookies 사용.

 

if(!$scope.toggle)

// $scope 붙여서 변수 사용

 

<li class="sidebar-list" ng-if="data[0] == 1">

// ng-if는 ul이 아닌 li에 사용해야 한다.

 

<li id="faults" class="sidebar-list" ng-if="data[2] == 1" ng-mouseenter="options=true" ng-mouseleave="options=false">

// mouseenter, mouseleave로 options값 조정

<ul class="faults-sub" ng-if="options==true && toggle==true">

// options값과 toggle값이 있을때 보여짐

 

$http.get(...).success is not a function

$http.get('api/url-api').then(successCallback, errorCallback);

function successCallback(response){

}

function errorCallback(error){

}

 

.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',

function($stateProvider, $urlRouterProvider, $locationProvider) {

$urlRouterProvider.otherwise('/');

$locationProvider.hashPrefix('');

$stateProvider

.state('index', {

url: '/',

templateUrl: 'views/dashboard.html'

})

.state('tables', {

url: '/tables',

templateUrl: 'views/tables.html'

});

}

// #! 형식의 state가 HTML5 표준. 하지만 기존 호환성을 위해 #로 설정.