Angularjs not working in nodejs express

Question

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>

What happens when you take out the mainController in the body tag? — TheLazyChap
– TheLazyChap, Commented Apr 9, 2016 at 13:23
your code show you've never declared ContactController on the app module. It looks like its just a normal function. — TheLazyChap
– TheLazyChap, Commented Apr 9, 2016 at 13:26

philipvr · Accepted Answer · 2017-04-05 22:26:54Z

3

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('}]');
})

edited Apr 5, 2017 at 22:26

philipvr

6,4584 gold badges34 silver badges45 bronze badges

answered Apr 10, 2016 at 6:04

Rizwan Patel

5382 gold badges9 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nirmal Kumar VeluPillai · Accepted Answer · 2016-04-09 19:27:14Z

1

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.

answered Apr 9, 2016 at 19:27

Nirmal Kumar VeluPillai

3173 silver badges5 bronze badges

1 Comment

Rizwan Patel Over a year ago

can we implement something on lines stackoverflow.com/questions/29614183/…

Shaikh Shahid · Accepted Answer · 2016-04-09 14:36:35Z

0

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)


  }]);

answered Apr 9, 2016 at 14:36

Shaikh Shahid

1,21512 silver badges13 bronze badges

1 Comment

Rizwan Patel Over a year ago

issue persist and there is correction is above post scope.contacts = []; should be $scope.contacts = []; right

Collectives™ on Stack Overflow

Angularjs not working in nodejs express

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related