Building one page site by using AngularJS and Laravel… mostly AngularJS

It is the site I working on currently and it is using AngularJS 1.2.26 and Laravel 4.2.9

 

I am thinking to renew my site with some new cool technology and here’s come, AngularJS. What is the charming point of AngularJS?

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. – by angularjs.org

Be honest, I don’t quite understand what it’s talking about. I looked through many sites, blogs, and I got a better and understandable answer,

AngularJS is a powerful JavaScript framework for building one page web application.  –  by edisonthk

Preparation & Installation

I am going to using laravel for my backend framework, server. Version is 4.2.9

laravdel

Server is getting worked in few minutes.

composer create-project laravel/laravel --prefer-dist
Configuration app/local/database.php
php artisan migrate

and AngularJS for my frontend framework. Version is 1.2.26

angularjs.jpeg

Download from https://angularjs.org/ and locate it in public/js folder.

Coding in Laravel

Let’s begin coding, first begin with Laravel. Laravel handle all kinds of data and response in json. Open app/routes.php and configure the routing.

<?php

// Response in JSON
Route::controller('/json/tag','TagController');
Route::resource('/json/snippet','SnippetController');

// Response for AngularJS
Route::get("/",function(){
  return View::make("base");
});

AngularJS also able to handle routing, I will show it later on. Now, open app/views/base.php and we are going to coding it.

I got a static parts, navigation bar, header and dynamic parts, snippets list and article selected. In code below, nav tag is the static part and ng-view is dynamic parts.

<html lang="ja">
	<head>
		<meta charset="utf-8">
		<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=no"> -->
		<meta name="format-detection" content="telephone=no">
		<title>Codegarage</title>


		<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
		<link rel="stylesheet" type="text/css" href="/css/common.css">

		<!-- Angularjs library -->
		<script type="text/javascript" src="/angular-libs/angular.min.js"></script>
		<script type="text/javascript" src="/angular-libs/angular-route.min.js"></script>

		<!-- Angularjs Application -->
		<script type="text/javascript" src="/angular-js/app.js"></script>
		<script type="text/javascript" src="/angular-js/controllers.js"></script>
		
	</head>
	<body>
		<!-- static part -->
		<nav>
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<h1 id="logo"><a href="/">Codegarage</a></h1>
					</div>
				</div>
			</div>
		</nav>
		

		<!-- dynamic part -->
		<div ng-view></div>
	</body>
</html>

In angularJS tutorial, I found out that angular js able to handle routing and multiple views. You can check it out at https://docs.angularjs.org/tutorial/step_07. I am going to adapt it in my site. ng-view on above, will be rendered by other html by angularJS.

Next, prepare data. Open app/controllers/SnippetController.php and return data in json.

<?php

class SnippetController extends BaseController {

	/**
	 * Display a listing of the resource.
	 *
	 * @return Response
	 */
	public function index(){

		$snippets = array();
		foreach (Snippet::all() as $snippet) {
			$temp = $snippet->toArray();
			
			array_push($snippets, $temp);
		}

		return Response::json($snippets);
	}	

And app/controllers/SnippetController.php also do the same by return data in json.

Coding in AngularJS

It is my file structure, I have prepare three angular folders in public for html, javaScript and library respectively.

スクリーンショット 2014-10-03 午前3.02.49

 

First, I begin with angular-js/app.js

var codegarageApp = angular.module('codegarageApp',['ngRoute','ngSanitize', 'snippetContollers']);

codegarageApp.config(['$routeProvider',
	function($routeProvider) {
		$routeProvider.
			when('/snippets', {
				templateUrl: '/angular-html/index.html',
				controller: 'SnippetListCtrl'
			}).
			otherwise({
				redirectTo: '/snippets'
			});
	}]);

I have import two plugins, ngRoute and ngSanitize. ngRoute is used for routing and handle multiple views. ngSanitize is used for safe html template, if you are using ng-bind-html, it is required to import this plugin for binding safety html.

Then, angular-js/controllers.js

var snippetContollers = angular.module('snippetContollers', ['ngSanitize']);

snippetContollers.controller('SnippetListCtrl', ['$scope','$http',function($scope, $http){

	$http.get('/json/snippet').success(function(data) {
		$scope.snippets = data;
	});

	$scope.article = "<p>hello! This is html.<p>;

}]);

Retrieve data from SnippetController by request /json/snippet and output it to $scope.snippets. Best things, it will decode json to object automatically.

Last thing, angular-html/index.html

<div class="wrapper">
	<div class="container">
		<div class="row">
			<div class="col-md-6">
				<!-- BEGIN: snippets list -->
				<div id="snippets">
					
					<div ng-repeat="snippet in snippets" class="single-snippet">
						<div class="title">
							<p><a href="/snippet/{{snippet.id}}">{{snippet.title}}</a></p>
							
						</div>
						<div class="meta">
							<div class="tags-group">
								
								<span ng-repeat="tag in snippet.tags" class="tag">{{tag.name}}</span>
								
							</div>
							<div class="datetime">Updated at {{snippet.updated_at}} </div>
						</div>			
					</div>
					
				</div>
				<!-- END: snippets list -->
			</div>
			<div class="col-md-6">
				<div ng-bind-html="article"></div>
			</div>
		</div>
	</div>
</div>
Advertisements

One thought on “Building one page site by using AngularJS and Laravel… mostly AngularJS

  1. nice tutorial. I am a newbie at laravel and need to develop a CRM system with sentry 2.1 package and laravel. Last few days I am thinking should I also use angular in this project. Do you have any recommendations maybe for a newbie like me or more tutorials? Have you maybe tried to use it with sentry 2.1?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s