Is there a way to have bootstrap js directives (inline tag attributes) work within a angular template file?
All JS libs are correctly loaded, including the js init code for using popovers.
The angular template is correctly loaded using angular router.
All the bootstrap js functions fail to be run/detected in angular templates, is there something i'm doing wrong or is this expected, and is there a way to get it working without changing the html (I looked at angular bootstap ui, but it requires rewriting the html)
Super simplified:
Twig template:
<div class="col-md-12" ng-app="builderApp"><div ng-view></div></div>
Angular template:
<i class="fa fa-info-circle" data-toggle="popover" data-content="woop woop"></i>
Angular JS:
var builderApp = angular.module('builderApp', ['ngRoute', 'xeditable']);
builderApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: template_path + 'root.html',
controller: 'rootController'
})
}]);
builderApp.controller('rootController', function($scope, directoryFactory) {
$scope.directory = directoryFactory.getDirectory();
});
I would most certainly use the Angular Bootstrap Directive. I've never seen it done any other way. This will give you access to the typical bootstrap CSS as well as the interactive functions in the angular bootstrap. I also prefer to use ui router.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<script src="scripts/vendors/ui-router-master/release/angular-ui-router.min.js"></script>
<script src="scripts/vendors/ui-bootstrap-tpls-0.13.0.min.js"></script>
var app = angular.module('BuilderApp', ['ui.router','ui.bootstrap']);
app.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/login");
$stateProvider
.state('login', {
url: '/login',
title: 'Login',
templateUrl:'views/loginView.html',
controller: 'loginCtrl'),
})
.state('account', {
url: '/account',
title: 'My Account'
views: {
'navigation': {
templateUrl: 'views/navigationView.html',
controller: 'navigationCtrl'
},
'content': {
templateUrl: 'views/contentView.html',
controller: 'navigationCtrl'
}
}
})
.state('account.dashboard', {
url:'/dashboard',
title: 'Dashboard',
views : {
'pageContent': {
templateUrl:'views/dashboardView.html',
controller: 'dashboardCtrl'
}
}
})
And then make sure to inject the router into your controller.
app.controller('navigationCtrl', function ($scope, $stateParams, $location, $state) {
Related
I'm trying to pass a string from a laravel blade to a vue component but vue keeps telling me that the variable is undefined. I've tried every solution and nothing seems to work.
header.blade.php
<div id='app'>
<header-component page="{{$page}}"/>
</div>
headerComponent.vue
<button v-on:click="toggleForm"> TEST </button>
<script>
export default {
props: {
page: String
},
data() {
return {
//
}
},
methods: {
toggleForm: function() {
console.log(this.page);
}
}
}
</script>
I also tried
props: ['page'],
and
<header-component :page="'{{$page}}'"/>
and yes the $page variable does show a string when I dd($page)
I need to make a category filter for my blog posts. I was toying around with Vue a bit. But since I have not learned Vue, I was recommended to just use Axios. I am completely lost. How does it work? I cannot even log a result from here? I did get it to work with an example in the App.JS from a SO question, trying to find that again. But thats Vue? I am not sure what to do anymore ? This is my example the /axios refers to a controller I show the controller first then the blade :
class AxiosController extends Controller
{
public function index()
{
$articles = Article::all();
//$categories = Category::all();
return response()->json($articles);
}
}
The blade ( I had it without the axios.create and all kinds of try outs I did) I also did it without the #once and the #push I just read this in the Laravel documentation.
#once
#push('scripts')
<script src="https://unpkg.com/axios/dist/axios.min.js">
const instance = axios.create({
baseURL: 'http://localhost:8000/axios',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
const axios = require('axios');
axios.get('http://localhost:8000/axios')
.then(function (response) {
// handle success
console.log(response);
})
</script>
#endpush
#endonce
i am fetching data, that i want to output from mysql with laravel query builder and converting it to JSON format, as w3Schools suggested
W3schools SQL link
And afterwards printing fetched mysql data with AngularJS help, but it doesn't seem to do anything at all and it shows me a blank page.
Laravel route
Route::get('/' , [
'as' => 'homepage',
'uses' => 'indexController#main'
]);
IndexController
class IndexController extends Controller
{
public function main(){
$data = json_encode(array('user_posts' =>\DB::table('posts')
->orderBy('added_on', 'desc')
->get()));
return view('index', ['posts' => $data]);
}
}
index.php view with AngularJS controller
<head>
<!--Angulare -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
<!--Applicazione -->
<script src="js/app.js"></script>
<script src="js/controller/PoolController.js"></script>
<script src="js/service/poolService.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.username }}</td>
<td>{{ x.age }}</td>
</tr>
</table>
</div>
### Angular Module and controller ###
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("/")
.then(function (response) {$scope.names = response.data.user_posts;
});
});
</script>
</body>
Json output how it looks like:
{"user_posts":[{"id":1,"username":"Moly","age":22,"added_on":"2017-01-05 08:51:18"},
{"id":2,"username":"katja","age":22,"added_on":"2017-01-05 08:51:18"},
{"id":3,"username":"rumanova","age":22,"added_on":"2017-01-05 08:51:18"}]}
I've tried so far in AngularJS controller:
changing:
$http.get("/")
With
$http.get("homepage")
Also tried changing
response.data.user_posts
with
response.data.posts
Basically i'm kinda lost and can't seem to understand, what i am doing wrong.
Thanks in advance
You are always returning a rendered view which will never be a valid JSON response. Instead, check if it's an ajax request. Also, Laravel provides collection()'s which should be used in favor of raw arrays or json encoding where possible to provide stack cohesion. Try this:
if ($request->ajax()) {
return response()->json(collect(['user_posts' =>\DB::table('posts')
->orderBy('added_on', 'desc')
]));
}
return view('index);
Also, make sure you're injecting the $request into your controller's method:
public function main(Request $request) {
Furthermore, Angular doesn't have any idea about Laravel's routes, but that's okay. If you're using scripts directly inside of the view file, you still have access to Laravel's helpers, you can make your endpoint request:
$http.get('{{route('homepage')}}')
Otherwise, if your Angular is in a script, just do:
$http.get('/');
And you will access it within your HTTP request callback with response.user_posts.
You can use $routeProvider instead of $html like this:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/homepage', {
templateUrl: '/homepage.html',
controller: 'customersCtrl'
});
}]);
I want to make a feature for my web app in laravel(i'm new at it) that every Post/Comment/Theme(in my case) the user has the ability to upVote and downVote. Now i am woking with upVote, but it is not working whatsoever.
In the view (welcome.blade.php)
I have:
<img class="media-object" style="height:40px; width:40px;" src="images/upVote.svg" alt="...">
Where $Theme->name is the one that the user wants to upVote/like(whatsoever).
The route:
Route::put('/', [
'uses'=>'Vote#VotePlus',
'as' =>'Voteplus' //Name of route
]);
And the controller:
<?php
namespace App\Http\Controllers;
use App\NewTheme;
use DB;
class Vote extends Controller {
public function VotePlus($name){
DB::table('New_Themes')
->where('name', $name)
->increment('upVotes', 1);
$Themes = NewTheme::paginate(5);
return redirect()->route('welcome', ['Themes'=>$Themes]);
}
};
I am trying everything, but it isn't working. Can someone help me please?
With an anchor tag, you only send a get request. If you want it to be put, you must create a form, and then add :
<input type="hidden" name="_method" value="PUT">
Another way to solve this issue is to use Ajax. Right now the page will get refreshed each time a user wants to up-vote a theme and that can be quite frustrating.
I think you should post to the back end using Ajax and on the success callback update the view with javascript. I recommend using Angular for the front end. It has all what you need and it is super simple to make an Ajax-request.
So, here's a quick example how you could use Angular + Laravel to make your web application work.
Front End
<html ng-app="exampleApp">
<head>
<title>MyTitle</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="ThemeController">
<ul>
<li ng-repeat="theme in themes">
<span><% theme.name %></span>
<p><% theme.description %></p>
<p><% theme.votes %></p>
Vote Up
</li>
</ul>
</div>
<script type="text/javascript">
var app = angular.module("exampleApp", [], function($interpolateProvider) {
// This we need to not collide with Laravel's {{ }}
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
app.controller('ThemeController', function($scope, $http) {
$scope.themes = [];
$scope.voteUp = function(theme) {
$http({
url: '/api/themes/voteUp',
method: 'POST',
data: {
id: theme.id
}
}).success(function(response) {
theme.votes += 1;
});
}
// On init we need to get the themes
$http({
url: '/api/themes',
method: 'GET'
}).success(function(themes) {
$scope.themes = themes;
});
});
</script>
</body>
</html>
Back End
Your routes
Route::get('api/themes', 'ThemeController#getFive');
Route::post('api/themes/voteUp, 'ThemeController#voteUp');
Your ThemeController
function getFive() {
return Theme::paginate(5);
}
function voteUp(Request $request) {
$theme = Theme::whereId($request->id);
$theme->votes += 1;
$theme->save();
return $theme;
}
This code is not tested. But I'll think you get the point!
In yii version 1.14 we used
CHtml::ajaxlink
for ajax call what about in yii2?
You can make an ajax link like
Html::a('Your Link name','controller/action', [
'title' => Yii::t('yii', 'Close'),
'onclick'=>"$('#close').dialog('open');//for jui dialog in my page
$.ajax({
type :'POST',
cache : false,
url : 'controller/action',
success : function(response) {
$('#close').html(response);
}
});return false;",
]);
From: http://www.yiiframework.com/wiki/665/overcoming-removal-of-client-helpers-e-g-ajaxlink-and-clientscript-in-yii-2-0/
You can easily create and combine all such client helpers for your
need into separate JS files. Use the new AssetBundle and AssetManager
functionality with the View object in Yii2, to manage these assets and
how they are loaded.
Alternatively, inline assets (JS/CSS) can be registered at runtime
from within the View. For example you can clearly simulate the
ajaxLink feature using a inline javascript. Its however recommended if
you can merge where possible, client code (JS/CSS) into separate
JS/CSS files and loaded through the AssetBundle. Note there is no more
need of a CClientScript anymore:
$script = <<< JS
$('#el').on('click', function(e) {
$.ajax({
url: '/path/to/action',
data: {id: '<id>', 'other': '<other>'},
success: function(data) {
// process data
}
});
});
JS;
$this->registerJs($script, $position);
// where $position can be View::POS_READY (the default),
// or View::POS_HEAD, View::POS_BEGIN, View::POS_END
$.get( "' . Url::toRoute('controller/action') . '", { item: $("#idoffield").val()} ) /* to send the parameter to controller*/
.done(function( data )
{
$( "#lists" ).html( data );
})
and give lists id for div
<div id="lists"></div>
for more visit https://youtu.be/it5oNLDNU44
<?=yii\helpers\Url::toRoute("site/signup")?>