comment is not showing after entering some text

Question

When I try to run, it not show my comment after I enter some text in comment box. Why? Also my another problem is the log show

ReferenceError: angular is not defined".

But I already place <script src="js/angular.min.js"></script> link to my js folder. What is wrong with my coding? I create app using ionic cordova and try to make comment that have upvote and downvote. Here the coding:

Script

angular.module('starter', ['ionic'])

  .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      if (window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

        cordova.plugins.Keyboard.disableScroll(true);
      }
      if (window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })

Vue.component('post', {
  template: "#post-template",
  props: ['post'],
  data: function() {
    return {
      upvoted: false,
      downvoted: false
    };
  },
  methods: {
    upvote: function() {
      this.upvoted = !this.upvoted;
      this.downvoted = false;
    },
    downvote: function() {
      this.downvoted = !this.downvoted;
      this.upvoted = false;
    }
  },
  computed: {
    votes: function() {

      if (this.upvoted) {
        return this.post.votes + 1;
      } else if (this.downvoted) {
        return this.post.votes - 1;
      } else {
        return this.post.votes;
      }

    }
  }
});


var vm = new Vue({
  el: "#app",
  data: {
    comments: [{}],
    comment: ""
  },
  methods: {
    postComment: function() {
      this.comments.push({
        title: this.comment,
        votes: 0
      })
      this.comment = "";
    }
  }
});

CSS

a {
  padding-left: 5px;
}

.disabled {
  color: orange;
}


/* some simple transitions to make the upvote and downvote
buttons fade in as a visual cue for the user */

.glyphicon {
  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.glyphicon:hover {
  opacity: 0.75;
  cursor: pointer;
}

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>

  <link rel="manifest" href="manifest.json">

  <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!--https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css-->

  <!-- ionic/angularjs js -->
  <script src="lib/ionic/js/ionic.bundle.js"></script>

  <!-- cordova script (this will be a 404 during development) -->
  <script src="cordova.js"></script>

  <!-- your app's js -->
  <script src="js/app.js"></script>

  <!--https://code.jquery.com/jquery-2.2.0.js-->
  <script src="js/jquery-1.11.0.min.js"></script>

  <script src="js/bootstrap.min.js"></script>
  <!--https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js-->

  <!--https://cdn.jsdelivr.net/vue/1.0.16/vue.js-->
  <script src="js/vue.js"></script>

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

<body ng-app="starter">

  <ion-pane>
    <ion-header-bar class="bar-stable">
      <h1 class="title">Ionic Blank Starter</h1>
    </ion-header-bar>
    <ion-content>
      <div id="app">
        <div class="container-fluid">

          <ul class="list-group">
            <post v-for="comment in comments" :post="comment"></post>
          </ul>

          <div id="comment-box">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Enter a comment..." v-model="comment" @keyup.enter="postComment">
              <span class="input-group-btn">
                        <button class="btn btn-primary" type="button" @click="postComment">Submit</button>
                    </span>
            </div>
          </div>

        </div>

      </div>

      <template id="post-template">
  <li class="list-group-item">
    <i class="glyphicon glyphicon-chevron-up" @click="upvote" :class="{disabled: upvoted}"></i>
    <span class="label label-primary">{{ votes }}</span>
    <i class="glyphicon glyphicon-chevron-down" @click="downvote" :class="{disabled: downvoted}"></i>
    <a>{{ post.title }}</a>
  </li>
</template>

    </ion-content>
  </ion-pane>
</body>

</html>

Place your files in correct order, `jquery` > `angular.min.js` and finally your `app.js` in your html — node_modules, Aug 01 '17 at 06:58
Application related JavaScript references should be at last. — Pradeep, Aug 01 '17 at 07:04
you are loading app.js before angular.min.js..so it is not getting your angularjs code. — Deepa, Aug 01 '17 at 07:07
there are certain meaning for code block and snippet. don't abuse that @GauravSrivastava — Sagar V, Aug 01 '17 at 07:16
I change the references order but still cannot run it. But can I know why wrong order of references effect the coding? @C0dekid — wani, Aug 01 '17 at 07:21
@wani Read here: https://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page — node_modules, Aug 01 '17 at 08:52

comment is not showing after entering some text

0 Answers0