I've got an angularjs view that I'm trying to print its results and even though the indexing and console output show the data I can't get it to show up in the actual page.
My console output of the json data received:
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
0: Object
$$hashKey: "004"
_id: Object
$oid: "527994c48776385b2e4a6e78"
__proto__: Object
author: "Undefined author"
content: "Undefined content"
title: "stfu"
__proto__: Object
1: Object
$$hashKey: "005"
_id: Object
$oid: "52799b0a8776385c490cd268"
__proto__: Object
author: "adam-stokes"
content: "some content here"
title: "dieeeee"
My controller code:
'use strict';
var cagewebControllers = angular.module('cagewebControllers', []);
cagewebControllers.controller('IndexCtrl', ['$scope', '$http',
function($scope, $http) {
$http.get('http://localhost:9000/entity/page').
success(function(data, status, headers, config) {
$scope.pages = data;
console.log($scope.pages);
});
}
]);
My app code:
'use strict';
var cageweb = angular.module('cageweb', [
'ngRoute',
'cagewebControllers'
]);
cageweb.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
» when('/', {
» templateUrl: 'partials/index',
» controller: 'IndexCtrl'
» }).
» otherwise({
» redirectTo: '/'
» });
}]);
my template partial:
<h1>Pages</h1>
{{pages.length}}
<div ng-repeat="page in pages track by $id(page)">
page {{$$hashKey}} - {{page.title}}
</div>
my template layout:
<!DOCTYPE html>
<html ng-app="cageweb">
<head>
<title>{{ title }}</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="javascripts/lib/jquery/jquery-1.10.2.min.js"></script>
<script src="javascripts/lib/angular/angular.js"></script>
<script src="javascripts/lib/angular/angular-animate.min.js"></script>
<script src="javascripts/lib/angular/angular-resource.min.js"></script>
<script src="javascripts/lib/angular/angular-route.min.js"></script>
<script src="javascripts/app.js"></script>
<script src="javascripts/controllers.js"></script>
</head>
<body>
<h1>cage-webbbbb</h1>
<div class="view-container">
<div ng-view class="view-frame"></div>
</div>
</body>
</html>
$scope.pages does contain the json data and I can see the data with console.log($scope.pages) but for whatever reason I can not get it to print on the page itself. im not sure if its something easy im missing but a second set of eyes would be much appreciated.
thanks
Thanks to the comments I was able to narrow down my issue. I probably should've mentioned that the application server was nodejs with expressjs using hogan as the templating engine...and guess what, hogan uses the same syntax as angular for processing variables :\ once I switched to ejs I was able to print to the page.
thanks!
Related
I am playing around with adding in an Angular-UI router which is working perfectly when I click on links within my application. For example, if I go from / to /feed/9 it will load in the /partials/post.html file into the ui-view div and I can then use the '9' held in $stateParams to populate the template with the data from post 9. However if I refresh the page, the site breaks and Angular tries to load index.html as the ng-app.js file? I have no idea what is happening here. I've uploaded some screenshots to demonstrate this and I've included my node server, angular routing and the relevant html partials. I have no idea where this is going wrong so I can provide any additional data and any help would be greatly appreciated!
Working fine when coming from another link on '/'
On refresh!!
Node - server.js
var = /* Dependencies and vars */;
mongoose.connect(dbConfig.url, dbConfig.options);
app.use(express.static(__dirname + '/public'));
app.use(morgan('dev'));
app.use(bodyParser());
app.use(flash());
require('./routes/api.js')(app); //For CRUD operations on the database
require('./routes/api_proc.js')(app); //Protected endpoints for CDN
require('./routes/api_ext.js')(app); //For getting data from GCal, fb, Twitter and Instagram
/* The following code is a url rewrite to pass all
further get requests that aren't defined in the
above routing files through the index page and
hence through the Angular 'frontend' routes */
app.use(function(req, res) {
res.sendFile(__dirname + '/public/index.html');
});
app.listen(port);
Angular ng-app.js
var app = angular.module('app', ['ui.bootstrap', 'ngResource', 'ui.router']);
//Using state ui-router
// ROUTES
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url : '/',
templateUrl : 'partials/home.html'
})
/* ... */
.state('feed', {
url : '/feed',
templateUrl : 'partials/feed.html'
})
.state('post', {
url : '/feed/{id:.*}',
templateUrl : 'partials/post.html',
controller: 'postController'
})
$locationProvider.html5Mode(true);
});
app.factory("Feed", function($resource) {
return $resource("/api/feed/:id", {}, {
query: {
isArray: true
}
});
});
app.controller("postController", function($scope, Feed, $stateParams) {
var feed = Feed.query();
feed.$promise.then(function(promiseData) {
postArray = promiseData.slice(0,promiseData.length);
$scope.feed = promiseData;
$scope.id = $stateParams.id;
});
});
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<!-- CDN -->
<!-- Angular, Bootstrap, Angular modules, etc. -->
<!-- Styles -->
<!-- Angular Script import -->
<script type="text/javascript" src="ng-app.js"></script>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav><!--Bootstrap nav--></nav>
<div ui-view></div>
<footer></footer>
<script>
//For Bootstrap tooltips which are in some of the partials.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
$('[rel=tooltip]').tooltip();
});
</script>
</body>
</html>
/partials/post.html
<div class="container-fluid main-content">
<header class="banner" class="row">
<h1 class="page-title">{{id}}</h1>
</header>
<!-- Main page info -->
</div>
I think you have relative paths pointing to your css files.
When you load page from /feed/9 then links are invalid.
Maybe it happens also for templates referenced from angular.
New to Typeahead/Bloodhound, and I'm struggling to get a very basic example of Typeahad.js working on localhost when querying a simple rest service that returns valid json. When I point my url to one used in the typeahead examples, it works fine (by "works", I mean the suggestion popup appears with the default string representation i.e. json). I am returning valid json and the appropriate header
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>States</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<script>
$(document).ready(function () {
var states = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
// `states` is an array of state names defined in "The Basics"
//local: states
remote: {
url: '../search.php?q=%QUERY',
//url: 'https://twitter.github.io/typeahead.js/data/films/post_1960.json',
wildcard: '%QUERY'
}
});
$('#the-basics .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
}, {
name: 'states',
//display: 'value',
source: states
});
});
</script>
</head>
<body>
<div id="the-basics">
<input class="typeahead" type="text" placeholder="States of USA">
</div>
</body>
Image showing the response headers for my service.
Any idea what I may be doing wrong?
I'm building my first AngularJS dynamic form, built based on information received from a JSON file using AngularJS directive.
Everything works, my issue is that the JSON code is getting displayed while the page is loaded - once the page is loaded the JSON code disappears.
Am I doing something wrong?
Check http://plnkr.co/edit/v4jOwuF6jmZfORlNbvIB?p=preview to see the behavior, click on "Stop"/"Start" multiple times to see the behavior.
HTML code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.2" src="https://code.angularjs.org/1.4.0-beta.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="ViewCtrl">
<div ng-repeat="page in form.form_pages">
<div ng-repeat="field in page.page_fields" class="form-group">
<field-directive field="field" ng-form="subForm"></field-directive>
</div>
</div>
</body>
js code:
'use strict';
angular.module('myApp',[])
.controller('ViewCtrl', ['$scope', function($scope) {
var jsonStr='{"form_id":"1","form_name":"My Test Form","form_pages":{"1":{"page_id":1,"page_title":"My First Tab","page_hide":false,"page_fields":{"1":{"field_id":1,"field_title":"First Name","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"2":{"field_id":2,"field_title":"Last Name","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"3":{"field_id":3,"field_title":"Gender","field_type":"textfield","field_value":"0","field_required":true,"field_disabled":false},"4":{"field_id":4,"field_title":"Email Address","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"5":{"field_id":5,"field_title":"Password","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"6":{"field_id":6,"field_title":"Birth Date","field_type":"textfield","field_value":"1981-01-10T06:00:00.000Z","field_required":true,"field_disabled":false},"7":{"field_id":7,"field_title":"Your browser","field_type":"textfield","field_value":"2","field_required":false,"field_disabled":false},"8":{"field_id":8,"field_title":"Additional Comments","field_type":"textarea","field_value":"","field_required":true,"field_disabled":false},"9":{"field_id":9,"field_title":"I accept the terms and conditions.","field_type":"textfield","field_value":"0","field_required":true,"field_disabled":false}}}}}';
$scope.form = JSON.parse(jsonStr);
}])
.directive('fieldDirective',function($http, $compile) {
var linker = function(scope, element) {
// GET template content from path
var templateUrl = "textfield.html";
$http.get(templateUrl).success(function(data) {
element.html(data);
$compile(element.contents())(scope);
});
}
return {
template: '<div>{{field}}</div>',
restrict: 'E',
scope: {
field: '='
},
link: linker
};
})
textfield.html - the html template:
<div class="row" ng-form="subForm" ng-class="{'has-success': subForm[field.field_id].$invalid}">
<div class="col-sm-5">{{field.field_title}}:</div>
<div class="col-sm-7">
<input type="text"
placeholder="{{field.field_title}}"
ng-model="field.field_value"
value="{{field.field_value}}"
ng-required="field.field_required"
ng-disabled="field.field_disabled"
class="form-control"
id = "{{field.field_id}}"
name = "{{field.field_id}}" >
<div ng-show="subForm[field.field_id].$touched && subForm[field.field_id].$error && subForm[field.field_id].$invalid">Field '{{field.field_title}}'
<span ng-show="subForm[field.field_id].$error.required"> is required.</span>
</div>
</div>
</div>
Thank you.
http://plnkr.co/edit/YC9p0UluhHyEgAjA4D8R?p=preview
Basically instead of adding the loaded template into the element then compiling it in place I just compile the string then insert the compiled element directly
element.append($compile(data)(scope));
Seems you can still see a delay but this might be the async loading of the template causing that, would need to debug in the network panel and do some profiling or logging to see exactly what's going on.
Edit
Made a fork of the plnkr to show one with the template inlined so there's no delay fetching it with $http http://plnkr.co/edit/Tnc3VOeI8cELDJDHYPTO?p=preview instead just grabbing it synchronously from the template cache and using ng-template in a script block to have it loaded in advance.
I was trying to import certain script depending on which URL I'm.
Simple <script> tag in my HTML is:
<html ng-app="myApp">
...
<script type="text/javascript" src="{{srcRoute}}" language="JavaScript"></script>
...
</html>
I was trying to get this after main module "myApp", in a run block:
angular.module('myApp', [])
.config(function($routeProvider) {
$routeProvider.
when('/', {controller: MyController, templateUrl: 'partials/home.html'}).
otherwise({redirectTo: '/'});
})
.run(function($rootScope) {
$rootScope.srcRoute = 'some/route/here.js';
});
but when running this I get something like:
GET myRoute/%7B%7BsrcRoute%7D%7D 404 (Not Found)
What I want to do is add a conditional sentence in the run block to decide which route to use. Is there a way to do this?
Thanks!
I am trying to implement this code here
but I get no results while running the project.
here is my code:
View:
<input type="text" name="names" value="" id="typeahead" data-provide="typeahead" autocomplete="off" />
Again on view (index.cshtml):
<script type="text/javascript">
$(function () {
$('#typeahead').typeahead({
source: function (term, process) {
var url = '#Url.Content("~/index/GetNames")';
return $.getJSON(url, { term: term }, function (data) {
return process(data);
});
}
});
})
</script>
Controller (indexController.cs):
[HttpGet]
public JsonResult GetNames(string term)
{
// A list of names to mimic results from a database
List<string> nameList = new List<string>
{
"Jonathan", "Lisa", "Jordan", "Tyler", "Susan", "Brandon", "Clayton", "Elizabeth", "Jennifer", "Hadi"
};
var results = nameList.Where(n =>
n.StartsWith(term, StringComparison.OrdinalIgnoreCase));
return new JsonResult()
{
Data = results.ToArray(),
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
}
here are also the js scripts added at the end of the view page:
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-1.9.1.intellisense.js"></script>
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
here is also the list of bugs I get on runtime:
Uncaught TypeError: undefined is not a function bootstrap.js:29
Uncaught ReferenceError: intellisense is not defined jquery-1.9.1.intellisense.js:1
Uncaught TypeError: Object [object Object] has no method 'typeahead'
Please let me know what am i doing wrong!
This may be a bit old but you cannot use source: you must use either remote:, prefetch:, or local: as the error reads.
Which version of bootstrap are you using? The standalone plug-in no longer supports all of the different data providers in the same way as the old one did
First off, make sure you place the script tag referencing jquery first, before bootstrap. Also only load a single jquery script tag.
Like this:
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
All the JS libraries you are using at the moment have one dependancy: jQuery so they need to be loaded in right order:
<!-- jQuery should always be the first -->
<!-- jquery-1.9.1.js and jquery-1.9.1.min.js are the same but .min version is minified and always lighter, so use it for faster page load -->
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<!-- Any other library should be loaded after jQuery -->
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/jquery-1.9.1.intellisense.js"></script>
Hope this helps ;)