Really stuck here so will appreciate the help.
Let me explain my set up/stack first:
Backend - Node with Express
Frontend - Angular
Snippet from the Node part of the code:
var router = express.Router();
router.get('/main', function(req, res){
res.render('wall', {siteTitle:'Home'});
});
Snippet from the HTML page:
<p>{{ siteTitle }}</p>
<div ng-controller="wallPosts">
<div ng-repeat="post in posts">
<p>{{ post.title }}</p>
</div>
<div>
Snippet from the Angular controller:
var angularApp = angular.module('angularApp', []);
angularApp.controller('wallPosts', ['$scope', '$http', function($scope, $http){
$http.get('/api/posts')
.success(function(result){
$scope.posts = result;
console.log(result);
})
.error(function(data, status){
console.log(data);
});
}]);
Okay so here is the problem - {{ post.title }} bit in the HTML page is not getting updated. However, this is: {{ siteTitle }}
The difference - post.title comes from the Angular app whereas the siteTitle comes from the res.render from Node.
Also, the console.log in the Angular controller works as I wanted to rule out there being a problem with the connection. Also, I have ruled out the '/api/posts' API call as it does indeed pass on an array of objects.
I have configured my Node to use 'hogan-express' as below:
Snippet from Node:
app.engine('html', require('hogan-express'));
So - can someone help me out here? What am I doing wrong? I want my Node to do the routing plus act as an API server and Angular just to get the data from the APIs and just chuck them out to the HTML page.
Thanks in advance,
Shayan
Use something like this {[]} as either your server-side template syntax or your client-side (Angular) template syntax. Shouldn't matter which one you set. If you choose client-side, set it within the Angular config injecting in the $interpolateProvider. See the Angular docs for more info.
Also I think this is a possible dup...
The issue is that template tag for both your AngularJS and NodeJS template engine are same.
One fix is to change the AngularJS template tag to some something
other than {{. You can do it by config.
Or change the template tag of the NodeJS template engine to
something other than {{
Or for a quick fix you can move following code to a separate html
and include it using ng-include.
<div ng-controller="wallPosts">
<div ng-repeat="post in posts">
<p>{{ post.title }}</p>
</div>
<div>
Related
I need to show a picture in a blade view loaded dynamically with AngularJS.
this is the short piece of code causing me many headaches since many days:
<img ng-src="#{{ $video.thumb }}" width="57">
if I put #{{ $video.thumb }} outside the img ng-src I get the correct path of the image.
I wouldn't change the whole app using interpolate provider.
var sampleApp = angular.module('sampleApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
More in HTML if I search with the inspector for the img tag I can't see anything, just
<img width="57">
I'm running it locally.
Please help me
I post the solution if someone else need it.
I had to use the full url in the ng-src.
Since I'm using Laravel and I'm working on a Blade view I had to use the following code:
<img ng-src="{{ url('/') }}/storage/#{{ video.thumb }}" width="57">
with {{ url('/') }} to get the domain url, then added /storage/ because I saved my files in that folder and at the end the angular var.
Please see relevant jsFiddle
Within this file even though I included angular.sanitize.js I am not able to bind the html elements.
HTML Code:
<div ng-app="HelloApp">
<div ng-controller="MyCtrl">
<ul ng-repeat="snippet in myHTML" ng-bind-html="snippet"></ul>
</div>
</div>
JS Code:
var app = angular.module('HelloApp', ['ngSanitize'])
app.controller('MyCtrl', function($scope) {
$scope.myHTML = [];
$scope.myHTML.push('<li>Test1</li>');
$scope.myHTML.push('<li>Test2</li>');
});
Nothing is being displayed when running the jsFiddle. When debugging I am getting an injector error.
Please let me know if you need any more relevant information
Make sure ngSanitize is loaded after Angular. Updated working fiddle: http://jsfiddle.net/36qp9ekL/444/
I have a strange problem when combining Laravel 5 (with Blade) and Angular 1.3.
I am experienced with Laravel, but a newbie with Angular. I know that I have to change Angular's delimiters to be able to make it work with Laravel's Blade.
So here is what I did:
//app.js
(function(){
var app = angular.module('TeamManager', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
app.controller('TeamController', function(){
// Do Something
});
})();
An in my View-File I definded ng-app and ng-controller. My goal is to iterate through a JSON. The JSON is not part of the JS above - I am aware of that.
<div class="container" ng-app="TeamManager">
<hr>
<div class="row" ng-controller="TeamController as team">
<div class="col-xs-4">
<div class="teamlist-container">
<table class="table table-striped">
<tr ng-repeat='member in teammembers'>
<td><% member.firstname %> <% member.lastname %></td>
</tr>
</table>
</div>
</div>
</div><!-- /row -->
<hr>
If I leave out the $interpolateProvider code, everything work and no errors are shown on the console. With it - however - nothings runs anymore. I get a Uncaught Error: [$injector:modulerr]
When I follow it, I come to: Error: $injector:unpr Unknown Provider
Am I missing something? I tried code from AngularJS Docs and some Tutorials. So it should be fine. Every time I was running in this error and it is driving me crazy.
I someone could help me with this, I would really appreciate it.
Many thanks,
AFX
I don't think your injecting the provider correctly, it should be in a callback for the config method of your app.
Try:
var app = angular.module('TeamManager', []);
app.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
Update: in the case of the OP, the minifying process wasn't jiving with the angular syntax being used. The asker would need to inject dependencies in the following way to use with minify/uglify:
var app = angular.module('TeamViewer', ['deps', function(deps) {
//...
}]);
And:
app.config(['$interpolateProvider', function($interpolateProvider) {
//...
}]);
This syntax is minify and uglify safe.
You don't have to change $interpolate. To use the default {{ }} delimiters for angular, simply add #{{}}, and blade will let javascript handle that for you.
I'm still fighting with simple things in Angular. I have jQuery and Backbonejs background, so please do not yell on me. I try hard to understand differences
I have HTML in which from rails is given ID of project as data-project-id:
<div data-ng-controller="ProjectCtrl as ctrl" data-project-id="1" id="project_configuration">
Is there any chance to get access to this attribute? I need it to my API calls...
To access an elements attributes from a controller, inject $attrs into your controller function:
HTML
<div test="hello world" ng-controller="ctrl">
</div>
Script
app.controller('ctrl', function($attrs) {
alert($attrs.test); // alerts 'hello world'
});
In your example, if you want to get data-project-id:
$attrs.projectId
Or if you want to get id:
$attrs.id
Demo:
var app = angular.module('app',[]);
app.controller('ctrl', function($attrs) {
alert($attrs.test);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" test="hello world">
</div>
In Angular world you should use directives to manipulate with DOM elements. Here a nice explanation how to get attribute value from custom directive (How to get evaluated attributes inside a custom directive).
But if you still want to get it's value from controller you are able to use jQuery as well $('#project_configuration').data('project-id')
I'm trying to make an angularjs jfiddle for another question, but I can't get it working. Can somebody look at it and let me know what I'm doing wrong?
<div ng-app="myApp">
<div ng-conroller="MyController">
Click me: <input type="checkbox" ng-model="checked"/><br/>
<div>
{{checked}}
</div>
</div>
</div>
js:
var app = angular.module('myApp', [
'ngAnimate',
'my.controllers'
]);
var controllers = app.module('my.controllers', []);
controllers.controller('MyController', function($scope) {
$scope.checked = true;
});
fiddle link
fiddle link without external libraries
fiddle link with only ng-animate ext library
Can it be that it's because jsfiddle adds a "http://fiddle.jshell.net/_display/" in front of any external library location? Like when I try to add "ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-animate.js" then jsfiddle changes it to "http://fiddle.jshell.net/_display/ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-animate.js"
WHY?
You need to set option no wrap - in <body>
You should use:
var controllers = angular.module('my.controllers', []);
Instead of:
var controllers = app.module('my.controllers', []);
This fiddle works: http://jsfiddle.net/NBhn4/1/
EDIT:
To work with ng-animate you need to include external libraries in correct order and use No-Library (pure JS) option or eg. any jQuery library:
Updated fiddle: http://jsfiddle.net/NBhn4/175/
I am writing my answer for those who land on this page , I was used to use ng-module directive but in jsfiddle after half an hour I realized that ng-module is not allowed and you see no error , and when changed that ng-module to ng-app fiddle worked very well .I just wanted to share this .
<div ng-app="appX" ng-controller="appCtrl">
<p>{{greeting}}
</p>
</div>
var app=angular.module("appX",[]);
console.log(app);
app.controller("appCtrl",function($scope){
$scope.greeting="Hello World";
});
https://jsfiddle.net/furkankatman/trgrjwf1/7/