Simple App with AngularJS and Laravel 4

Standard

This is my first attempt of making a simple Web Application using Angular JS and Laravel 4.

I will not go into much detail about Laravel 4 in this post.

So without further ado, here is what i did.

I created a resource controller by using

php artisan controller:make NewsController

In the index() method i just returned all the News items

public function index()
{
return News::all();
}

The show() method looks like this.

public function show($id)
{
return News::find($id);
}

I added following routes in my routes.php file.

Route::resource('news', 'NewsController');

Route::get('shownews', function(){
return View::make('news');
});
Route::get('shownews/{id}', function($id){
return View::make('news-detail')->with('id',$id);
});

I created a View called news.php. (It is not a blade template)


<head>
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script src="<?php echo asset('/js/app.js'); ?>" type="text/javascript"></script>
<script src="<?php echo asset('/js/newscontroller.js'); ?>" type="text/javascript"></script>

</head>
<body>
<div id='content' ng-app="NewsApp" ng-controller="NewsController" ng-init="init()">
<ul>
<li ng-repeat="news in results">
<p><a href="<?php echo url('news/show');?>/{{news.id}}">{{news.title}}</a></p>
<p>{{news.description}}</p>
</li>
</ul>
</div>
</body>

and news-detail.php


<!DOCTYPE html>
<head>
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script src="<?php echo asset('/js/app.js'); ?>" type="text/javascript"></script>
<script src="<?php echo asset('/js/newscontroller.js'); ?>" type="text/javascript"></script>

</head>
<body>
<div id='content' ng-app="NewsApp" ng-controller="NewsController" ng-init="detail(<?php echo $id; ?>)">
<ul>
News
<li ng-repeat="news in results">
<p><a href="<?php echo url('news/show');?>/{{news.id}}">{{news.title}}</a></p>
<p>{{news.description}}</p>
</li>
</ul>
</div>
</body>
</html>

The app.js and newscontroller.js looks like the following.

app.js code:

var app = angular.module('NewsApp',[]);

newscontroller.js code:

app.controller("NewsController", function ($scope, $http) {
$scope.init = function () {
console.log('This is data');
$scope.results = [];
$http.get('http://localhost/laravel/public/news/').success(function (data) {
angular.forEach(data, function (value, index) {
$scope.results.push(value);
});
console.log(data);
console.log('This is data');
}).error(function (error) {
});
}
$scope.detail = function (id) {
console.log('This is data');
$scope.results = [];
$http.get('http://localhost/laravel/public/news/' + id + '/').success(function (data) {
$scope.results.push(data);
}).error(function (error) {
});
}
});

It worked, If you go to your http://localhost/project/public/shownews/ , It will show you the list of news with the link to the detail page.

If there is a better way out there to do this, please let me know. I think there must be as i am just a starter to AngularJS.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>