목차

반응형

for(var i=0;i<5;i++)

{

function asd(i) {

  console.log(i+3);

}

}

을 하면 분명 3 4 5 6 7 이 나와야 하지만

7 7 7 7 7이 나온다.


정말 골치아픈 문제였다.

분명 작동은 하는데 반복문 안의 함수가 맨 마지막 i값으로만 처리가 되버린다.

처음에는 어이가 없었음.


아마도 meanstack의 동기처리 때문에 그런듯 하다. (동기처리가 정말 밉더라)

http://apple77y.tistory.com/11


해결법으로는 3가지를 찾았음.


1. 반복문 안의 함수를 반복문 밖에서 선언한뒤에 parameter를 사용하여 정상적으로 수행.

근데 내가 만든 기능이 find안에 find를 또쓰는거라서 너무 복잡해버리게되어서 2번으로 해본뒤에 2번으로 쓰기로함.

function asd(num) {

  return (num+3);

}

이런식으로 만든뒤에

for(var i=0;i<5;i++)

{

asd(i);

}

대충 이런식?


2. With ({ n : i }) { ... }를 이용하여 정상적으로 수행.

function test() {

  for (var i = 0; i < 5; i++) {

       with ({ n: i }) {

      function asd() {

console.log(n+3);

}

    }

  }

}

.이런느낌? 개인적으로 2번보다 깔쌈한것같음.

3. Promise 기능을 사용하여 수행.

먼가 고급스러운 해결방법같지만 너무 어려워보여서 싫었음.


http://stackoverflow.com/questions/1451009/javascript-infamous-loop-issue

반응형

'JS > Angularjs' 카테고리의 다른 글

Meanstack - html의 버튼 누르면 db안의 데이터 변동한 후 가져오기  (0) 2016.06.25
meanstack - 잘 설치되어있는지 확인하기  (0) 2016.06.23
AngularJs - textarea ng-model 설정하고나면 공백일때  (0) 2016.06.23
AngularJs - angular is not defined  (0) 2016.06.23
AngularJS - Directives  (0) 2016.06.23
반응형

원리


1. html에서 post방식으로 서버에 신호를 보냄.


<script>
app.controller('myCtrl', function($scope, $http) {    
    $scope.liked = function() {
        $http.post('/').
        success(function(data) {
            $scope.test=data; // post에 대한 서버로부터의 응답을 html의 test라는 것에 넣어줌
        }).error(function() {
        })
    };
});
</script>

컨트롤러는 알아서 설정하고

아무곳에 ng-click="liked()" 집어넣음.

이렇게 해놓으면 liked함수가 실행되면서 위의 스크립트가 작동함.




2. 서버에서 올바른 신호를 받으면 db 관련 데이터 처리

db는 mongoose로했음.

일단 먼저 몽구스 모듈 불러오고 연결함.

가장 중요한것 은 모델, 스키마를 잘 설정하는것

스키마 설정 예시

var userSchema = new mongoose.Schema({

like: {type:Number},

info:{type:String}

});

이거 타입을 잘맞춰줘야함.


이것만 잘 설정해도 거의 모든 에러가 다 사라짐. (모델, 스키마를 잘못 설정해서 에러가 엄청많이 떴음)

에러는 안나지만 세이브가 안되는 에러 해결됨

업데이트할때 like 가 하나 더생겨버리고 NAN 생기는 에러 사라짐

[ { _id: '576cd52ed5ea2827f765a5a0', like: 0, info: 'like' },  like: NaN ]

TypeError: User.save is not a function 에러도 사라짐





3. 서버에서 처리한 데이터를 html로 다시 보냄

res.end(documents[0].like+""); 

이러면 like넘버가 알아서 data변수로 html로 넘어감



4. html에서는 post에 대한 응답으로 받은 데이터를 다시 html에 나타내줌

$scope.test=data;

반응형

'JS > Angularjs' 카테고리의 다른 글

MeanStack - 반복문 안에 함수가 들어가면 index가 맨마지막것으로만 작동할때  (2) 2016.07.19
meanstack - 잘 설치되어있는지 확인하기  (0) 2016.06.23
AngularJs - textarea ng-model 설정하고나면 공백일때  (0) 2016.06.23
AngularJs - angular is not defined  (0) 2016.06.23
AngularJS - Directives  (0) 2016.06.23
반응형

meanstack의 구성원들의 버전을 확인해보면 된다.

M mongod --version

E express -V (대소문자 구분)

A 만든 페이지에서 f12누르고 콘솔가서 아무말도 없으면 angular.js가 로드되는데 문제가 없다는 뜻

N node -v 과 npm -v


참고

http://adrianmejia.com/blog/2014/10/01/creating-a-restful-api-tutorial-with-nodejs-and-mongodb/

반응형

'JS > Angularjs' 카테고리의 다른 글

MeanStack - 반복문 안에 함수가 들어가면 index가 맨마지막것으로만 작동할때  (2) 2016.07.19
Meanstack - html의 버튼 누르면 db안의 데이터 변동한 후 가져오기  (0) 2016.06.25
AngularJs - textarea ng-model 설정하고나면 공백일때  (0) 2016.06.23
AngularJs - angular is not defined  (0) 2016.06.23
AngularJS - Directives  (0) 2016.06.23
반응형

http://stackoverflow.com/questions/16284442/cannot-get-textarea-value-in-angularjs

textarea는 html의 textarea를 오버라이드해서 만들어진 directive이기 때문에

알아서 ng-model앞에 $parent가 붙어버린다는것같은데... 잘모르겠음

여하튼

<textarea ng-model="myText"></textarea>
<textarea ng-model="$parent.myText"></textarea>

아래것으로 하면됨


또한 이미 정해져있는 텍스트에어리어내용의 속성이 저장되기를 바라면

<textarea ng-model="todo.note"></textarea> 이런식으로 하면 됨


checkbox..completed 원리랑 비슷

반응형

'JS > Angularjs' 카테고리의 다른 글

Meanstack - html의 버튼 누르면 db안의 데이터 변동한 후 가져오기  (0) 2016.06.25
meanstack - 잘 설치되어있는지 확인하기  (0) 2016.06.23
AngularJs - angular is not defined  (0) 2016.06.23
AngularJS - Directives  (0) 2016.06.23
nodejs 이중 Array  (0) 2016.06.20
반응형

아 빡치네

angular is not defined 뜰때

<script type="text/javascript" src="../angular.min.js"></script>

  <script type="text/javascript" src="test.js"></script>

<script type="text/javascript" src="../angular-ng-route.min.js"></script>

이거 불러오는거 순서에 주의해야함
angular.js를 최초로 안불러오고 본인의 test.js 같은것부터 먼저불러오면
angular is not defined 에러발생함


반응형

'JS > Angularjs' 카테고리의 다른 글

meanstack - 잘 설치되어있는지 확인하기  (0) 2016.06.23
AngularJs - textarea ng-model 설정하고나면 공백일때  (0) 2016.06.23
AngularJS - Directives  (0) 2016.06.23
nodejs 이중 Array  (0) 2016.06.20
AngularJs - ui router 페이지 이동  (0) 2016.05.31
반응형

Directives

란 <ng-repeat> <ng-show>와 같이 js에서 사용하는 함수? 같은 것 같다.
개발하면서 나중에는 없는 directives를 사용해야 하기 때문에 직접 만드는 방법도 알아야 한다.

<html ng-app="myapp">
<head>
  <title>Hello World in AngularJS</title>
  <script src="../angular.min.js"></script>
<script src="test.js"></script>
</head>
  <body ng-controller="MainCtrl">
    <hello-world/>
  </body>
</html>


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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});
app.directive('helloWorld',function(){
  return {
      replace:true,
      restrict: 'AE',
      template: '<h3>Hello World!!</h3>'
  }
});

helloworld라는 directive를 만들었다. 도중에 -를 붙이는 이유는 -는 가독성을 위한 것 같다.
또한 생략처리되기때문에 붙여도 알아서 인식해준다.
-말고도 x- data- 이런것도 있다.

참고
https://www.sitepoint.com/practical-guide-angularjs-directives/


반응형

'JS > Angularjs' 카테고리의 다른 글

AngularJs - textarea ng-model 설정하고나면 공백일때  (0) 2016.06.23
AngularJs - angular is not defined  (0) 2016.06.23
nodejs 이중 Array  (0) 2016.06.20
AngularJs - ui router 페이지 이동  (0) 2016.05.31
Cloud 9 - AngularJS가 작동안할때  (0) 2016.05.30
반응형

posts라는 배열이 있고 그 배열안에

$scope.posts.push({

  title: 'hi',

  upvotes: 0,

  comments: [

    {author: 'Joe', body: 'Cool post!', upvotes: 0},

    {author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}

  ]

});

로 문자열 및 배열들을 집어넣었음

만약 html로 코멘트 배열만을 다시 나타내고싶으면


<div ng-repeat="test in posts[0].comments">{{test.author}}</div> 


결과

Joe
Bob


반응형

'JS > Angularjs' 카테고리의 다른 글

AngularJs - textarea ng-model 설정하고나면 공백일때  (0) 2016.06.23
AngularJs - angular is not defined  (0) 2016.06.23
AngularJS - Directives  (0) 2016.06.23
AngularJs - ui router 페이지 이동  (0) 2016.05.31
Cloud 9 - AngularJS가 작동안할때  (0) 2016.05.30
반응형


<html>

<head>

  <title>Flapper News</title>

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

  <script src="/angular-ui-router.js"></script>

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

<body ng-app="flapperNews">

  <div class="row">

    <div class="col-md-6 col-md-offset-3">

      <ui-view>default</ui-view>

    </div>

  </div>

   <script type="text/ng-template" id="/home.html">

  <div class="page-header">

    <h1>Flapper News1</h1>

    <a href="#/home2">Go P2</a>

  </div>

</script>

<script type="text/ng-template" id="/home2.html">

  <div class="page-header">

    <h1>Flapper News2</h1>

    <a href="#/home">Go P1</a>

  </div>

</script>

</body>

</html>

EX1.html

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

var app = angular.module('flapperNews', ['ui.router'])


app.config([

'$stateProvider',

'$urlRouterProvider',

function($stateProvider, $urlRouterProvider) {


  $stateProvider

    .state('home', {

      url: '/home',

      templateUrl: '/home.html'

      ,controller: 'MainCtrl'

    });

    

    $stateProvider

    .state('home2', {

      url: '/home2',

      templateUrl: '/home2.html'

      ,controller: 'MainCtrl'

    });



  $urlRouterProvider.otherwise('home');

}]);

EX1.js


이러면 EX1.html을 불러오면 js파일에 인자가 없기때문에 $urlRouterProvider.otherwise('home'); 를 실행하게 되고 home이라는 기본 스테이트로 넘어가게 되어

asd.html안에있는 /home.html 를 불러오게 된다.


https://thinkster.io/mean-stack-tutorial 참고하였음

템플릿 넘기기는 <a>태그로 가능하기도 한데 코드로 약간 복잡하게도 가능함

http://stackoverflow.com/questions/14201753/angular-js-how-when-to-use-ng-click-to-call-a-route 참고하였음

반응형

'JS > Angularjs' 카테고리의 다른 글

AngularJs - textarea ng-model 설정하고나면 공백일때  (0) 2016.06.23
AngularJs - angular is not defined  (0) 2016.06.23
AngularJS - Directives  (0) 2016.06.23
nodejs 이중 Array  (0) 2016.06.20
Cloud 9 - AngularJS가 작동안할때  (0) 2016.05.30
반응형

Cloud 9 에서는 AngularJS를 불러올때 사이트에서 참조받아서 하는 형식으로 하면 에러가 뜸

따라서 AngularJS.js파일을 받은뒤에 파일로 참조해야함.

안그럼 로드가 안됨


 angular.min.js



반응형

'JS > Angularjs' 카테고리의 다른 글

AngularJs - textarea ng-model 설정하고나면 공백일때  (0) 2016.06.23
AngularJs - angular is not defined  (0) 2016.06.23
AngularJS - Directives  (0) 2016.06.23
nodejs 이중 Array  (0) 2016.06.20
AngularJs - ui router 페이지 이동  (0) 2016.05.31

티스토리툴바