Hey people i am trying to integrate prismic io with angular js 1 but it is not working.
I referred to many links to do that but i don't get anything data.
https://github.com/awulder/angular-prismicio
https://gist.github.com/laradevitt/94f7e21eaf6d3441b9475fc8f5201201
http://jsfiddle.net/othermachines/bbv9dzug/
and that's my code :
my code
app.js
// Define the `myApp` module
var app = angular.module('app', ['prismic.io']);
app.config(function(PrismicProvider) {
PrismicProvider.setApiEndpoint('https://myname.prismic.io/api');
PrismicProvider.setAccessToken('i put my access token');
PrismicProvider.setClientId('i used my id');
PrismicProvider.setClientSecret('i put my secret');
PrismicProvider.setLinkResolver(function(ctx, doc) {
return 'detail.html?id=' + doc.id + '&slug=' + doc.slug + ctx.maybeRefParam;
});
});
// Define the `AppCtrl` controller on the `app` module
app.controller('AppCtrl', ['Prismic', function(Prismic) {
var self = this;
Prismic.all().then(function(data) {
self.data = data;
});
}]);
index.html
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://unpkg.com/prismic.io/dist/prismic.io.min.js"></script>
<script src="https://raw.githubusercontent.com/awulder/angular-prismicio/master/dist/angular-prismicio.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="AppCtrl">
<prismic-html fragment="data.fragment"></prismic-html>
<ul>
<li ng-repeat="item in data">
<span>{{item.slug}}</span>
</li>
</ul>
</body>
</html>
The idea with this Prismic thing is that it has the data on it and they are just providing some code for integration and then we read this json data using angular.
please if anyone used it before will be really nice to help.
thanks
Related
I suspect it is an incorrectly written expression or the way the controller is fetching data from the service. By the way, the controller has been tested and it works just fine.
Please help.
Here is my view
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/vendor/angular.min.js"></script>
<!-- Installing the ngRoute module -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
</head>
<body ng-app="SuggestionBox">
<div class="suggestion" ng-controller="HomeController">
<div class="container" ng-repeat="post in posts">
<h2 class="title">{{ post.title }}</h2>
</div>
</div>
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/HomeController.js"></script>
<!-- Services -->
<script src="js/services/suggestions.js"></script>
</body>
</html>
Here is the service where I am fetching the data from
app.factory('suggestions', [function() {
var demoSuggestions = {
posts: [
{
title: "bla bla bla",
},
{
title: "blo blo blo",
}
]
};
return demoSuggestions;
}]);
This is the controller
app.controller('HomeController', ['$scope', 'suggestions', function($scope, suggestions) {
$scope.posts = suggestions.demoSuggestions;
}]);
In service you should assign posts which has been return in suggestions factory object.
Controller
app.controller('HomeController', ['$scope', 'suggestions',
function($scope, suggestions) {
$scope.posts = suggestions.posts;
}
]);
Demo here
Update
You app.js should define module like below
var app = angular.module('SuggestionBox',[])
Edit
I made last plunkr to demonstrate the issue which were faced by OP. So ideally you should follow angular styleguide made by John Papa
Here you need to wrap each component code to IIFE pattern like
(function(){
//code here
})()
And do define angular module once and used them afterwards, avoid creating global variables.
I'm learning AngularJS and I have a strange problem with it. My code is as follows:
html:
<!doctype html>
<html ng-app="blogApp">
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container" ng-controller="blogPostsCtrl">
<article ng-repeat="post in posts">
{{post.title}}
</article>
</div>
</body>
</html>
js:
var blogApp = angular.module('blogApp', ['ngSanitize', 'ngRoute']);
blogApp.controller('blogPostsCtrl', function($scope, $http) {
$http.get('//jsonplaceholder.typicode.com/posts').success(function(data) {
$scope.posts = data;
$scope.postsLoaded = 'visible-lg';
});
});
It should be working, as I create a module and then controller for it. But it returns an error: https://goo.gl/UWFMNm. What can I do?
Looks like you didn't install ngRoute. It comes separately in its own file/module.
As the error page says:
Using ngRoute
In AngularJS 1.2.0 and later, ngRoute has been moved to its own module. If you are getting this error after upgrading to 1.2.x or later, be sure that you've installed ngRoute.
ngRoute Documentation - include the file from there for it to work
For some reason when I use ng-repeat the $scope variable does not bind its data to the view. It's been driving me insane because I figure out what i'm doing wrong in this case. In the when I console.log the $scope variable, its there but it just refuses to bind to the view when i'm using ng-repeat. In this case the word "movie" in the paragraph tag is repeated 3x but there's not data to go with it. Here is the code below:
<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>
<body>
<div>Hello World!
<div ng-repeat="movie in movies">
<p>movie: {{movie.moviename}}</p>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
function IndexCtrl($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
};
</script>
</body>
</html>
After long sleepless nights lol I figured out the answer. Apparently the problem was with my node js express server using mustache as a middleware to template html. It uses the {{ }} symbols as well so angular never got to interpret what was going on. So I used $interpolateProvider to change the angular symbols and now it works beautifully.
var myApp = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
To anyone else using a node.js backend and not using jade as a template language, I hope this helps!
It would be better to explicitly define the controller inside the module:
var myApp = angular.module("myApp", []);
myApp.controller('IndexCtrl', function($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
});
But.... I copied the code exactly, replaced angular resource path. And all is working.
<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>
<body>
<div>Hello World!
<div ng-repeat="movie in movies">
<p>movie: {{movie.moviename}}</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
function IndexCtrl($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
};
</script>
</body>
</html>
I am trying to iterate with ng-repeat, using data served from a REST service. I manage to recover the data in my main.js file, but I can't get the data to be injected into the HTML.
I just started learning nodejs and angular, so it is very probable that I am not clearly getting it. I am logging twice the call to the REST service, getting the data in one of them (using a callback function) and getting a promise in the other (Which I assume happens because the call is synchronous, I didn't use any callback function here).
What I don't understand is why the HTML doesn't get the data.
Anyway, here's the code:
main.js
var myApp = angular.module('myApp', ['ngResource']);
myApp.factory('restservice', function ($resource) {
var source = $resource(
"http://rest-service.guides.spring.io/greeting/");
var data =source.get({},function(){
//this log shows the data
console.log (data);
})
return data;
});
function AvengersCtrl($scope, $resource, restservice) {
$scope.servicedata = restservice;
//this log shows the promise
console.log($scope.servicedata);
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Tutorials</title>
<!-- <link rel="stylesheet" href="vendor/foundation/foundation.min.css"> -->
</head>
<body>
<div ng-app="myApp">
<div ng-controller="AvengersCtrl">
<input type="text" ng-model="search.$">
<table>
<tr ng-repeat="resource in servicedata | filter:search">
<td>{{resource.id}}</td>
<td>{{resource.content}}</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-resource.js"></script>
<script type="text/javascript" src="/angular/app/main.js"></script>
</body>
</html>
Thanks in advance, regards
The code looks good to me.
The problem is the service returns a Json object instead of list.
If you wrap it with a list like this, you will see the result
$scope.servicedata = [restservice];
I am currently ramping up with angular, and trying to make dynamic routing work.
Note: I have looked at the question: How to defer routes definition in Angular.js?, and I believe I am doing everything it states, but I'm still getting the error "unknown provider: $routeProvider"
What am I doing wrong?
html:
<!doctype html>
<html ng-app="rProvider">
<head>
<link rel="stylesheet" href="css/style.css">
<script src="lib/angular/angular.js"></script>
<script src="js/routeProviderTest.js"> </script>
</head>
<body>
<div ng-controller="rControl">
<h2>Route Controller Test</h2>
[Route 1 | <a>Route 2</a>]
<hr/>
<span class="partial-info">
Partial: {{routeValue}}
</span>
<div ng-view></div>
<small>The Bottom</small>
</div>
</body>
</html>
js:
var myAppModule = angular.module('rProvider',[]);
myAppModule.config(function($routeProvider){
$routeProvider.when("r1",{templateUrl:"/route1.html"});
});
myAppModule.controller('rControl', function($scope, $route){
$scope.routeValue = 'nothing yet';
});
thanks in advance...
If you are using version 1.2.x, you need to download angular-route.js, include it via the <script> tag, and add it as a dependency module in JavaScript:
<!-- in HTML -->
<script src='angular-route.js'></script>
// in JavaScript
var myAppModule = angular.module('rProvider', ['ngRoute']);
Maybe this will help you:
http://www.egghead.io/video/gNtnxRzXj8s
This guy has some pretty good tutorials on AngularJS. Or some of the next videos about the routeProvider.