Angularjs not working in nodejs express

below is my angular js html file and i am accessing using http://localhost:3000/modulename/create the problem is angularjs is not working like for instance the ng repeat is empty in template-ing whereas when we console the object in javascript it return values please refer highlighted section in below screenshot for reference purposes

angular app.js

    angular.module('scotchTodo', ['todoController']);


 angular.module('todoController', [])

    // inject the Todo service factory into our controller


    .controller('ContactController', ['$scope','$http', function($scope, $http, Todos) {


        $scope.contacts = [
        {id:0, 'name': 'PremAseem', 'email':'[email protected]', 'phone': '123-2343-44'}
    ];
    console.log($scope.contacts)


    }]);

angular html code

<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="scotchTodo">
<head>
  <!-- META -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->

  <title>Node/Angular Todo App</title>

  <!-- SCROLLS -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
  <style>
    html          { overflow-y:scroll; }
    body          { padding-top:50px; }
    #todo-list        { margin-bottom:30px; }
    #todo-form        { margin-bottom:50px; }
  </style>

  <!-- SPELLS -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script><!-- load angular -->


  <script src="../../admin/js/app.js"></script>  <!--load up our controller -->

</head>
<!-- SET THE CONTROLLER -->
<body >
<div  ng-controller="ContactController">
    <form class="well">
    <label>Name</label> 
        <input type="text" name="name" ng-model="newcontact.name"/>
    <label>Email</label> 
        <input type="text" name="email" ng-model="newcontact.email"/>
    <label>Phone</label> 
        <input type="text" name="phone" ng-model="newcontact.phone"/>
        <br/>
        <input type="hidden" ng-model="newcontact.id" />
     <input type="button" value="Save" ng-click="saveContact()" class="btn btn-primary"/>
    </form>
<table class="table table-striped table-bordered">
<thead> 
<tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
    <th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts">
    <td>{{ contact.name }}</td>
    <td>{{ contact.email }}</td>
    <td>{{ contact.phone }}</td>
    <td>
        <a  href="#" ng-click="edit(contact.id)">edit</a> | 
        <a href="#" ng-click="delete(contact.id)">delete</a>
    </td>
 </tr>
</tbody>
</table>    
</div>






</body>
</html>

Upvotes: 0

Answers (3)

Rizwan Patel

Reputation: 538

The problem was with consolidate templating. Thanks @nirmal for issue deduction. The solution was to change angularjs templating.

app.js:

var app = angular.module('scotch', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('[{');
    $interpolateProvider.endSymbol('}]');
})

Upvotes: 3

Nirmal Kumar VeluPillai

Reputation: 317

Issue because of your view engine used in nodejs/express https://www.npmjs.com/package/consolidate
Basically most of the server side/client side view engines used the {{ data }} pattern for templating, in your code your bindings are truncated by your view engine.
Html Response of your /api call giving the HTML snippets with out your actual binding you made in your code.

(1)
    If you move you modulename.html, app.js inside public folder and if you access the same through node server. It works as expected.
    You can try this.
    Compare the response HTML snippets for below two cases from Browser Network Tab,
        1. /api
        2. /modulename.html  // after placing modulename.html in public folder
(2)
    For any problem in Javascript frameworks, browser console is our best friend. You can navigate to console and access scope object of element you can get the "contacts" object.
    Or you can bind you contacts object model to any text box using ng-model, or ng-bind directives.
    you can get your contacts value in html.

(3)
    If you want to still use view engine in server side, even though you have master piece angular in browser. You can choose ng-bind directive for you angularjs template.
    It's always better approach to use ng-bind directive in our templates, instead of {{}} pattern.

Hope this helps you on the issue. Please feel free to ping me, if not resolved.

Upvotes: 1

Shaikh Shahid

Reputation: 1215

Try this

angular.module('scotchTodo', ['todoController']);


angular.module('todoController', [])

  // inject the Todo service factory into our controller


  .controller('ContactController', ['$scope','$http', function($scope, $http, Todos) {
      scope.contacts = [];
      var data = {id:0, 'name': 'PremAseem', 'email':'[email protected]', 'phone': '123-2343-44'};
      $scope.contacts.push(data);
  console.log($scope.contacts)


  }]);

Upvotes: 0

Angularjs not working in nodejs express

Answers (3)

Related Questions