Angularjs 无法在 nodejs express 中工作

Question

下面是我的 angular js html 文件我正在使用 http://localhost:3000/modulename/create 访问问题是 angularjs 无法正常工作，例如 ng repeat 为空在模板中，而当我们在 javascript 中控制对象时，它 return 值请参考下面屏幕截图中突出显示的部分以供参考

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':'hello@gmail.com', 'phone': '123-2343-44'}
    ];
    console.log($scope.contacts)


    }]);

angularhtml代码

<!-- 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>

Answer 1

试试这个

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':'hello@gmail.com', 'phone': '123-2343-44'};
      $scope.contacts.push(data);
  console.log($scope.contacts)


  }]);

Answer 2

由于您在 nodejs/express 中使用的视图引擎而导致的问题 https://www.npmjs.com/package/consolidate
基本上大多数服务器 side/client 侧视图引擎使用 {{ data }} 模式进行模板化，在您的代码中，您的绑定被您的视图引擎截断。
Html 您的 /api 调用的响应给出了 HTML 片段，没有您在代码中进行的实际绑定。

(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.

Answer 3

问题出在合并模板上。感谢@nirmal 的问题推导。解决方案是更改 angularjs 模板。

app.js:

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

Angularjs 无法在 nodejs express 中工作

Angularjs not working in nodejs express

javascript

node.js

angularjs

angularjs-ng-repeat

mean-stack