How do i integrate angularJS in codeignitor framework? How to load the templateUrl or template?
You'd integrate it the same way you would normally.
<html ng-app="myApp">
And then add your controllers to your views. For example, let's say I have a view for my blog posts:
<div ng-controller="myController">
<div ng-repeat="blog in blogs">
<h1>{{ blog.title }}</h1>
<p>{{ blog.body }}</p>
</div>
</div>
If you have data you're storing and retrieving with codeigniter, you can make post and get requests in angular to a specific url to get/post your data. Just remember to echo out the json encoded response in the codeigniter function.
Related
I am using Contentful in my AngularJS app... I have a content type team which holds a list of team bios. http://uat.traverusglobal.com (bottom)
I have successfully gotten data from contentful using angular-contentful... Now I need to to sort the response by name or other contentful field. So that the admin has control over the order.
How can I sort the contentful response on the frontend of my angular app? Below is my attempt.
https://jsfiddle.net/k3jmq2gm/1/
<div class="columns teams-list" contentful-entries="'content_type=staff'" ng-controller="teamContentful">
<div ng-repeat="item in $contentfulEntries.items | orderBy:'item.fields.name'" class="column" data-flag="{{item.fields.flag}}" data-visible="{{item.fields.visible}}" ng-class='{active:$first}' data-tab="1" data-title="{{item.fields.title}}" data-name="{{item.fields.name}}">
<!-- <h1>{{item[0].title}}</h1> -->
<img src="{{ item.fields.image.fields.file.url }}" title="{{item.img}}">
<p class="hide bio">{{item.fields.bio}}</p>
</div>
</div>
as Und3rTow pointed out. orderBy should be orderBy:'fields.name'
I am quite new to Angular, but I have successfully set up a list.html template to show posts in Wordpress using V2 of the WP API.
Now, I would like to show some (ACF) fields from another page above my post list. I have the ACF API plugin installed as well, and it does work for posts.
I just have no idea how to refer to the right page ID, or if I need to set up another controller for this.
<!-- try to get data out of page id 2 > http://www.example.com/wp-json/acf/v2/page/2 -->
<h1 ng-bind-html="pages:2.acf.title">not working...yet...</h1>
As you can see ":2" probably makes no sense, but I could not find any reference on how to do this properly.
Thanks in advance for any help!
btw. this is the full code from my list.html template/partial:
<!-- try to get data out of page id 2 > http://www.example.com/wp-json/acf/v2/page/2 -->
<h1 ng-bind-html="pages:2.acf.title">not working...yet...</h1>
<div class="post-list">
<article ng-repeat="post in posts | orderBy:'date'" class="col-md-2">
<div>
<div class="date-wrap">
<h6 class="event-date">{{post.title.rendered}}</h6>
</div>
<!-- <div ng-bind-html="post.content.rendered | to_trusted"></div> -->
<div ng-if="post.acf.event_title">
<div class="post-data-container">
<p>{{post.acf.event_title}}</p>
<p ng-if="post.acf.conversation_with">A conversation with {{post.acf.conversation_with}}</p>
<p>{{post.acf.about_or_by}} {{post.acf.lecture_from}} </p>
</div>
<img ng-src="{{post.acf.portrait.sizes.thumbnail}}" />
</div>
<div ng-if="!post.acf.event_title">No Event Title</div>
<a ui-sref="detail({id: post.id})">Click here to read more</a>
</div>
</article>
</div>
Are you grabbing the ACF data from the OTHER post? Is it part of your JSON object that returns to the view? If it is, you would just point to that. To verify it is, go to yourdomain.com/posts/:id where id is the post you are viewing, and see if the OTHER post's ACF data is present.
If not you'll need to create a controller or another function which hits the API again for that other post's data, so $scope.other_post = getPost({id:OtherPostID});
make sense?
I have a question regarding the directive ng-repeat. Is it possible to perform manipulation to each item in a collection?
<div ng-repeat = "item in items">
</div>
Is there any possible way to call a Meteor method to perform some sort of manipulation to each item?
I'll be more specific. What I'm doing is using the meteor twitter accounts and every time a user logs in, it stored in a database.
index.ng.html :
<div ng-controller = "TweetsCtrl">
<div ng-repeat = "t in twitterAccs">
<img src = "{{t.services.twitter.profile_image_url_https}}">
<br>
<i>#{{t.services.twitter.screenName}}</i>
<br>
<br>
</div>
</div>
JS file :
if (Meteor.isClient) {
angular.module('twitter-example',['angular-meteor']);
angular.module('twitter-example').controller('TweetsCtrl', ['$scope','$meteor', function($scope,$meteor) {
$scope.twitterAccs = $meteor.collection(Meteor.users);
}]);
}
Right now, its able to get the image and the twitter handle. What I want to do is extract the number of followers and friends but that requires OAUTH from Twitter. Since those require special keys from Twitter, I know I have to put that information in the if (Meteor.isServer) scope.
I am working through the CA angular course. I had a question about this code:
<div class="main">
<div class="container">
<h2>Recent Photos</h2>
<div class="row">
<div class="item col-md-4" ng-repeat="photo in photos">
<a href="#/photos/{{$index}}">
<img class="img-responsive" ng-src="{{ photo.url }}">
<p class="author">by {{ photo.author }}</p>
</a>
</div>
</div>
</div>
</div>
In the
So when I click the photo, angular knows what it's index is and the index gets relayed to the PhotoController as a routeParams right and you can access it via $routeParams.id. But what is the #?
The char # (also called hash) is used for navigation inside your app / your website and prevent the browser to refresh the current page.
If you look your url you will see a hash # followed by /photos/{{$index}}
How to deal with Hash in AngularJS ?
In AngularJS, you can use the $location service to manage url
The $location service parses the URL in the browser address bar (based on window.location) and makes the URL available to your application. Changes to the URL in the address bar are reflected into the $location service and changes to $location are reflected into the browser address bar.
https://docs.angularjs.org/guide/$location
# are used in something called hash navigation which are a separate section of a URL's elements. hash navigation is used by angular for interior hash routing rather than full page routing.
Not only in angualrjs but in every web project if we use some url followed by # that won't reload the page.
I hope you have noticed using <a href="#"> for dummy urls too.
I am new to mobile applications, and since i have a strong html, js, css background i decided to try cordova using angularjs. Anyway, i have hit a road block and i don't know the best way to handle this.
I have this block that is setup to repeat; x.large and x.thumb are pulled from a json file via Angular.
<div class="gallery" ng-controller="imagelistController">
<div class="thumbnail" ng-repeat="x in urls">
<img src="{{x.thumb}}">
</div>
</div>
I want to setup a single page using a query string href links to a page such as image.html?id=1. In image.html i want it do display image 1. If you change the id to 2, it would show image 2.
<div ng-controller="imagelistController">
<img src="{{x.large}}">
</div>
<ul class="social-share">
<li><button onclick="window.plugins.socialsharing.share(null, null, '{{x.large.url}}', null)">image only</button></li>
</ul>
<script type="text/javascript" src="js/SocialSharing.js"></script>