AngularJS在NodeJS Express中不起作用
[英]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 
下面是我的角度js html文件，我正在使用http：// localhost：3000 / modulename / create访问 ，问题是angularjs无法正常工作，例如ng重复在模板中为空，而当我们在javascript中控制台对象时它返回值，请参考以下屏幕快照中突出显示的部分，以供参考
angular app.js 角度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)
}]);
angular html code 角度html代码
<!-- 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>
3 个解决方案
解决方案1
3 已采纳 2016-04-10 06:04:20
The problem was with consolidate templating. 问题在于合并模板。 Thanks @nirmal for issue deduction. 感谢@nirmal进行问题推断。 The solution was to change angularjs templating. 解决方案是更改angularjs模板。
app.js: app.js：
var app = angular.module('scotch', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[{');
$interpolateProvider.endSymbol('}]');
})
解决方案2
1 2016-04-09 19:27:14
Issue because of your view engine used in nodejs/express https://www.npmjs.com/package/consolidate 由于在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. 基本上，大多数服务器端/客户端视图引擎都使用{{data}}模式进行模板化，在您的代码中，绑定被视图引擎截断了。
Html Response of your /api call giving the HTML snippets with out your actual binding you made in your code. / api调用的HTML响应，给出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.
解决方案3
0 2016-04-09 14:36:35
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':'hello@gmail.com', 'phone': '123-2343-44'};
$scope.contacts.push(data);
console.log($scope.contacts)
}]);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.