I am new to laravel and AngularJS . I am trying to render a view which is a php file. The .php file is being rendered but the AngularJS expression inside it is not being evaluated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
<script src='public/AngularSorter.js'></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"> </script>
</head>
<body ng-app = 'store'>
<div ng-controller ='SorterController as sorter'>
<p>
{{ 4+4 }}
</p>
</div>
</form>
</body>
</html>
the route is like this
Route::get('/', function () {
return view('Home');
});
Am I missing something? I tried renaming the php file to .html but it doesn't work. why can't the view render .html file??.
I get the output as {{4+4}} instead of 8.
Laravel Blade and AngularJS use the same syntax for processing variables, {}. To avoid this, you have to either change the syntax for blade or change the syntax for AngularJS. Details here.
Changing the AngularJS Syntax:
var sampleApp = angular.module('sampleApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
- or -
Changing the Laravel Blade Syntax:
// You may place this code anywhere it is executed each request. Some people have used routes.php
Blade::setContentTags('<%', '%>'); // for variables and all things Blade
Blade::setEscapedContentTags('<%%', '%%>'); // for escaped data
Also, the view will need to be .blade.php, not .html. This is the standard for all laravel blade (view) files. Documentation here: http://laravel.com/docs/master/blade
The issue was solved by reordering the script tags. the Angular script tag should be placed at the beginning and then the self written javascript files should be included.
Related
I'm learning the laravel framework and trying to get to grips with using the blade template engine. However i cant for life of me get the #extends and #section functionality to work within my project.
I have already tried reinstalling the whole project multiple times, using different browsers and restarting my machine but i cant figure out why it doesn't display the #section content
Laravel Version: 5.7.28 |
IDE: PhpStorm
routes/web.php
Route::get('/', function () {
return view('layouts/index');
});
views/layouts/index.blade.php
<body>
<div class="container-fluid">
<h1>Site Index</h1>
#yield('header')
</div>
</body>
views/header.blade.php
#extends('layouts.index')
#section('header')
<p>Header</p>
#endsection
At the moment all that is being displayed is the tag in the views/layouts/index.blade.php file.
Thank you very much for any and all input on this.
That's not how the templating works. You have to reference the child template in your return statement. Because the #extends is in this child template, Laravel knows to use the mentioned master layout. So your return statement would be like so:
return view('header');
If you just want the header to be displayed on every page, you don't need to extend the master layout in your header, you should just include the header part in your master layout.
<body>
<div class="container-fluid">
<h1>Site Index</h1>
#include('header')
</div>
</body>
i have tested the view and layout they seems working. check your controller return statement. try return view('header');
Route::get('/', function () {
return view('header');
});
thanks all for your responses, now i understand how the blade template engine works a little better and how i was doing this wrong. Just for clarification for others that get confused like me and come across this thread:
When you are redirecting to a view through the web routes then it has to be a child that is extending from a layouts master.
routes/web.php
Route::get('/', function () {
return view('index');
});
The html from the master file will then be displayed by default and its the content that we are "viewing"
views/layouts/master.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>#yield('title', 'default title if unspecified')</title>
</head>
<body>
<h1>Master Header</h1>
#yield('content')
</body>
</html>
To work with the content of the page then its the index view that is worked with using the #section('content') method.
views/index.blade.php
#extends('layouts.master')
#section('title', 'Changing the default title')
#section('content')
<p>content displayed</p>
#endsection
I hope this helps for anyone else.
If you want to show content of section('header') then you must return header view like
Route::get('/', function () {
return view('header');
});
this is because contents are in header view and you have been extending layout.index
so if you return layout.index view you will not see content of section('header')
I'm a beginner in Laravel and I'm getting practices converting a previous (simple) website to Laravel.
Basically, I created a template having HTML structure and I change the main content using #includes and #yield
The interesting parts in html template.blade.php are like
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- Title -->
<title>#yield('title')</title>
....
....
<!-- CSS Customization -->
<link rel="stylesheet" href="/assets/css/custom.css">
#yield('css')
....
....
#include('include._header')
#include('include._test_script')
#include('include._footer')
....
....
<!-- JS Customization -->
<script src="/assets/js/custom.js"></script>
#yield('js')
The router calls the test.blade.php which include the template. This blade file has some custom php code having the $extra_script variable
<?php $extra_script = " alert(0); console.log(0);";?>
#extends('layouts.template')
#section('css')
....
#endsection
#section('js')
...
<script>
{!! $extra_script !!}
</script>
#endsection
Loading this page the script works fine and I see the alert message having the 0 content.
Now I'm trying to update the $extra_string into the /include/test_script.blade.php file but it doesn't work.
This include blade file is like:
#php
$extra_script = " alert(1); console.log(1);";
#endphp
or
<?php $extra_script = " alert(1); console.log(1);"; ?>
The result is no errors and still alert(0) shown.
I understand is not elegant to have PHP code in the blade template but in the controller but this is a quick and fast porting to have the website online in a few time.
How to fix it in view?
I would say the order is incorrect, first test.blade.php is extending from template.blade.php. It is template.blade.php the one setting the alert to 1 by #include('include._extra_script') but then as test.blade.php is extending from that template, it is overwriting $extra_script to the one that alerts a 0.
I'm trying to include an html page (like header), but I can't get the include to work.
I want to create a page like header and footer, and want these pages to include on every html page in application just like we do in PHP. We create a page and include it using include or require.
Like if i have these lines of code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Angular Demo</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css.map">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<script src="js/jquery-2.1.4.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.js"></script>
</head>
Now i want to include these line on every HTML page.I don't want to write these lines on every page.
Is it possible to do this in Angular js using ng-include or something else.
I have tried this
<div ng-include src="'include/header.html'"></div>
If i use ng-include it only include some piece of code in div. But how can i use it like header and footer to include on every page.
For general templating you should use ngRoute & ngView : have an html page laying your base site include a view that ngRoute populates with specific content depending on the url.
Try ng-view and routeProvider to populate the ng-view. As shown here:
http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/
So in general what will happen is that you will have a index.html it will have some static part and some dynamic html part of the code. The static part will be your header and footer and the dynamic part will be controlled by the ng-view and routeProvider.
The static part will remain the same throughout every page.
Generally angularJS handles this kind of behavior with directives. Example header directive HTML:
<div id="banner" class="page-header">
<div class="row text-center">
<div class="col-lg-10"></div>
<h3> {{ content.title }} </h3>
<small>{{ content.strapline }}</small>
</div>
</div>
Example header directive javascript file:
(function () {
angular
.module('flightApp')
.directive('pageHeader', pageHeader);
function pageHeader () {
return {
restrict: 'EA',
scope: {
content : '=content'
},
templateUrl: '/common/directives/pageHeader/pageHeader.template.html'
};
}
})();
You need to include this in your index file. You don't need to include the HTML, the JS in the directive will reference your HTML file, so just add this to your index.html:
<script src="/common/directives/pageHeader/pageHeader.directive.js"></script>
I'm passing in the content attribute on html. This can be bound to parent scope variables like this:
<page-header content="vm.header"></page-header>
Where in your parent controller you define the vm.header variable:
vm.header = {
title : 'Flight App (angular edition!)',
strapline: ''
};
And now you have a reusable generic header element! You can define headers or footers this way in a single line, and you can make the content vary based on where the directive is and what is using it. If you have any issues using this, just let me know. Directives are somewhat confusing at first but become a very powerful tool when you get familiar with AngularJS.
I'm working with PHP Fat Free and I am attempting to create a layout/sublayout system which will eventually mimic MVC to some extent. I have a main layout which has placeholders (essentially the backend sets different sublayout or partial file paths and then the view takes care of calling the rendering of that file name. This all works great.
The issue I'm running into is when I need inline javascript in my sublayout to run after scripts in the main layout (after the jquery include line, for instance). In a previous framework I was using, I was able to do us output buffering ob_start and ob_get_clean to grab the script in the sublayout and then pass that to the layout to display below the script line. I hope that makes sense, but if not, here's the current code I'm working with in F3.
The route:
$f3->route('GET /test',
function($f3) {
// set the sublayout name
$f3->set('sublayout', 'testpage.php');
// render the whole shebang
echo View::instance()->render('testlayout.php');
}
);
The layout:
<!DOCTYPE html>
<html>
<head>
<title>Test Layout</title>
</head>
<body>
<h1>Test Layout</h1>
<?php echo View::instance()->render($sublayout) ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" />
<!-- inline script should go here -->
</body>
</html>
The sublayout:
<h2>My Test Page</h2>
<div id='message'></div>
<script>
// This code needs to be placed AFTER the jquery include in the main layout
$(function(){
$('#message').html('This is my message');
});
</script>
I tried extending the view to include a "beginRegion" and endRegion function that basically handled the ob_start and ob_get_clean portion so that my inline script could be picked up, but once I'm in the sublayout I wasn't able to figure out how to pass that buffered code back to the layout so it could be echo'd after the jquery include.
Before you tell me that I should not be using inline script, I know this and most things I do are in external script files which I have a solution for including, but there are times when I need it inline and that's where I'm stuck.
Is there a way to handle what I'm trying to do with output buffering, or better yet is there a better way to solve this than the output buffering approach?
Update:
Best practices generally dictate that you should include the script at the bottom of the page right before the closing body tag. If I put the script above the sublayout, it breaks both our FE best practices and has the disadvantage of blocking the rest of the page while the script downloads. That's why I'd like to keep it structured the way I have noted instead of placing the jquery include ABOVE the sublayout.
I don't understand what's the problem.
Your layout is:
<!DOCTYPE html>
<html>
<head>
<title>Test Layout</title>
</head>
<body>
<h1>Test Layout</h1>
<?php echo View::instance()->render($sublayout) ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" />
<!-- inline script should go here -->
</body>
</html>
You want to include sublayout after jquery usage. So why not to write it like this? :
<!DOCTYPE html>
<html>
<head>
<title>Test Layout</title>
</head>
<body>
<h1>Test Layout</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" />
<!-- inline script should go here -->
<?php echo View::instance()->render($sublayout) ?>
</body>
</html>
Also You can write custom function. Lets say You've folder with partials or something else more structured and want to use it:
$f3->set('partial',
function($file) {
$file .= (strpos($file, '.php')>0)? '' : '.php';
if(!is_file($file)) return '';
return View::instance()->render($file);
}
);
and then use it like:
<!DOCTYPE html>
<html>
<head>
<title>Test Layout</title>
</head>
<body>
<h1>Test Layout</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" />
<!-- inline script should go here -->
{{ #partial('partials/testpage') }}
</body>
</html>
I knew why You want to do so. But what's the problem to decouple scripts in scripts.php file and HTML,php part to another file and render them as needed? (:
From a google groups discussion I had, someone offered up a JS solution that might work:
inside your layout:
<head>
<script>
var callbacks=[];
</script>
</head>
<body>
<script src="...jquery.min.js"/>
<script>
$.each(callbacks,function(i,func){func.call(null,jQuery);}) //<< triggers all queued callbacks
</script>
</body>
inside your sublayout:
<h2>My Test Page</h2>
<div id="message"></div>
<script>
callbacks.push(function($){
//do something with jQuery
});
</script>
Here's the link:
https://groups.google.com/forum/#!topic/f3-framework/iGcDuDueN8c
I have a function in my admin controller called "login" which uses the 'login.php' view in application/views/admin/. I have the 'header.php' and 'footer.php' views included at the top and bottom of this file as shown below:
<?php include ('/application/views/layout/header.php'); ?>
The header and footer are included correctly in all my other views, but when included in the 'login.php' view, the asset files are not found. Here is my 'header.php' view:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./application/assets/bootstrap/css/bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href="./application/assets/style.css" >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./application/assets/bootstrap/js/bootstrap.min.js" ></script>
<title><?php echo $page_title; ?></title>
</head>
<body>
<div class="container-fluid text-center">
<div class="row">
<div class="span12">
<img src="./application/assets/signature.jpg" class="img-responsive center-block" style="margin-top: 20px;">
</div>
</div>
</div>
Here is the file structure of my application:
application
-+assets
---+css
------style.css
-+controllers
----admin.php
----page.php
-+views
---+layout
------header.php
------footer.php
---+admin
------home.php
------login.php
----home.php
I have used firebug to try and solve the problem, and the console is giving me a 404 error. It is adding the controller name 'Admin' into the filepath of the css file for some reason as seen below, as well as my .js files and the image:
/my_project/admin/application/assets
Any ideas as to why this could be? I have used mod_rewrite on the project in my .htaccess file.
For including header and footer I think better way this answer:
adding header and footer codeigniter to controller
...
And for to refer to CSS and JS file use CodeIgniter URL helper. You must load the helper And use this helper:
https://ellislab.com/codeigniter/user-guide/helpers/url_helper.html.
Config base_url() in config.php file. Then link to your CSS and JS like this answer:
Code Igniter simple base url css
If you use Codeigniter framework I recomend to use a standart function loading view instead include() function.
For example, Codeigniter support function View() to load your HTML code at web page.
Call function like as:
$this->load->view(template);
At your case you need to put next code at your controller file login.php, where you want load header template. Look like as:
$this->load->view("layout/header.php");
Also, dont use incude(); The better write: include_once();
If you will work furthe with inheritance classes you have problems.
Read more about here: enter link description here