I've just managed to get Laravel and AngularJS 2 setup together.. albeit a very simple setup ie I have a main welcome.blade.php file that shows as the index page, however, I would like to make some kind of navigation where you can switch between pages and angular will pull the info in from various blade templates and this is where I am stuck, I understand how to generate the nav in angular etc but I am not sure what to add to the #component({template:xxxxxxxxxx}) field in order for it to pull in blade templates.. does anyone have any examples of how to render these external templates in the angular components ? below is what i have so far and it injects My First Angular 2 App into the default laravel welcome page.
app.components.ts
///<reference path="../../../public/js/angular2/core.d.ts"/>
import {Component} from 'angular2/core';
#Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
boot.ts
///<reference path="../../../public/js/angular2/typings/browser.d.ts"/>
/* the above file fixes an issue with promises etc - was getting loads of errors then found this http://stackoverflow.com/questions/35382157/typescript-build-getting-errors-from-node-modules-folder*/
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
welcome.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel</title>
<script src="{{ url('/') }}/js/es6-shim/es6-shim.min.js"></script>
<script src="{{ url('/') }}/js/systemjs/dist/system-polyfills.js"></script>
<script src="{{ url('/') }}/js/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="{{ url('/') }}/js/angular2/bundles/angular2-polyfills.js"></script>
<script src="{{ url('/') }}/js/systemjs/dist/system.src.js"></script>
<script src="{{ url('/') }}/js/rxjs/bundles/Rx.js"></script>
<script src="{{ url('/') }}/js/angular2/bundles/angular2.dev.js"></script>
<script type="text/javascript">
System.config({
"baseURL": '/js',
"defaultJSExtensions": true,
"packages": {
typescript: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('typescript/boot').then(null, console.error.bind(console));
</script>
</head>
<body>
<div class="container">
<div class="content">
<div class="title">Laravel 5</div>
<my-app>Loading...</my-app>
</div>
</div>
</body>
</html>
Maybe I am very mistaken, but from what I understand Angular cannot render blade templates? They are first rendered by Laravel before being sent as regular HTML with whatever was filled in on the template. Then Angular is initialized and works with the HTML document. I typically like to let Angular handle all my routing and make it a SPA by just redirecting any undefined routes in routes.php to a single index page where Angular's router will render different views. Sadly, I have not made the transition yet to Angular 2 so I'm not sure how the router is setup. But this is just a route file I use that has a "catch-all" so to speak that redirects to the index page.
Route::group(["prefix" => "api"], function() {
Route::resource("users", "UsersController");
Route::group(["prefix" => "users"], function() {
Route::get("{id}/places", "UsersController#getPlaces");
Route::get("{id}/searches", "UsersController#getSearches");
});
Route::resource("places", "PlacesController");
Route::resource("searches", "SearchesController");
Route::group(["prefix" => "auth"], function() {
Route::get("/", "AuthController#GetAuth");
Route::get("logout", 'Auth\AuthController#logout');
});
});
Route::get('/', 'RedirectController#toAngular');
// Authentication Routes...
Route::get('login', 'RedirectController#toAngular'); // Override, let Angular handle login form
Route::post('login', 'Auth\AuthController#login');
Route::get('logout', 'Auth\AuthController#logout');
// Registration Routes...
Route::get('register', 'RedirectController#toAngular');
Route::post('register', 'Auth\AuthController#register');
// Password Reset Routes...
Route::get('password/reset/{token?}', 'Auth\PasswordController#showResetForm');
Route::post('password/email', 'Auth\PasswordController#sendResetLinkEmail');
Route::post('password/reset', 'Auth\PasswordController#reset');
Related
We are trying to convert our app from jQuery to Vue in Laravel. One of the option we have is to do components by one since we are can't do everything from scratch.
One of the option is something like this.
require('./bootstrap');
import Vue from "vue"
import bla1 from "./vue/bla1"
import bla2 from "./vue/bla2"
const app = new Vue({
el: '#app',
components: {
bla1,
bla2
}
});
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<div id="app">
<!-- Theres gonna have HTML HERE --->
<bla1 />
<bla2 />
<!-- Theres gonna have HTML HERE --->
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
As you can see, we are just adding seperate components. Is there a way those components can pass data to each other even not under the parent component?
Any input will be appreciated. Thanks
I am trying to use vue.js with laravel for the first time.
In the blade.php file:
<html>
<body class>
<div id="app">
<favourup></favourup>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
In the app.js file:
Vue.component('favourup', require('./components/Favourup.vue'));
const app = new Vue({
el: '#app',
});
In the vue file:
<template>
<div>
<h2>FavourUp</h2>
</div>
</template>
I am not getting any errors however the local host displays an empty web page when it should display 'FavourUp'
you should write .default at end of require vue components because of part of the vue-loader 15 updates, if your code uses the CommonJS syntax for importing EcmaScript modules, you'll need to append .default:
https://laravel-mix.com/docs/4.0/upgrade#importing-es-modules
but as #Ifaruki said you can import it too here's the code:
// first
Vue.component('favourup', require('./components/Favourup.vue').default);
// second
import Favourup from './components/Favourup.vue';
Vue.component('favourup', Favourup);
`
<script src="./jquery.min.js"></script>
<script src="./bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="./jquery.easing.min.js"></script>
<!-- Page level plugin JavaScript-->
<script src="./Chart.min.js"></script>
<script src="./jquery.dataTables.js"></script>
<script src="./dataTables.bootstrap4.js"></script>
<!-- Custom scripts for all pages-->
<script src="./sb-admin.min.js"></script>
<!-- Demo scripts for this page-->
<script src="./datatables-demo.js"></script>
<script src="./chart-area-demo.js"></script>
This is the some part of code of my index.html file in an angular component.I want to import all the js files as above but couldn't be able to do that.Can anyone please tell that how i can include all the javascripts file?I only just want to include it in Html file of an angular component.I can't do it globally as i have to use it only in a particular Component
Scripts and styles should be imported into your angular.json file:-
look for the following line and import your css and js into those:-
"styles": [
"./node_modules/#angular/material/prebuilt-themes/indigo-pink.css",
"./node_modules/font-awesome/css/font-awesome.min.css",
"./node_modules/semantic-ui/dist/semantic.min.css",
"src/styles.scss"
],
"scripts": []
Are those script tags belong only to that component? If no, what about placing these tags in the index.html file?
Let me take Jquery for example, Assume Jquery path included in the index.html file like you did above, then in the component where I want to use Jquery, add below priece of code above the #Component decorator, then you can use the Jquery functionality inside that component only.
declare var $;
Example component.ts
import { Component } from '#angular/core';
//declare dollor($) here
declare var $;
#Component({ templateUrl: 'home.component.html' })
export class HomeComponent {
public divElement: any;
constructor( ) { }
ngOnInit() {
this.divElement = $('div');
}
}
I'm trying to use vuejs in my fresh laravel setup. I run the follwing commands in my command line
npm install
npm run dev
This commands runs without any errors. When I import the default VUE componet located under ~/ressources/assets/components/ExampleComponent.vue in my template nothing happends.
#section('content')
<example-component></example-component>
#endsection
Here the app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
});
If you are using Laravel Mix check your webpack.mix.js file, default config must look like this
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Now, look if you have linked JS file to you blade template
Looks like this for older Laravel versions (<= 5.5):
<script src="{{ asset('js/app.js') }}"></script>
and like this for new once (> 5.5)
<script src="{{ mix('js/app.js') }}"></script>
Finally, see you have
el: '#app'
it mean # - id, like in CSS, VueJS will search for element with id app.
Everything outside that element will not work.
so you have to use it like
<div id='app'>
<example-component></example-component>
</div>
or
<section id='app'>
<example-component></example-component>
</section>
I think you should wrap the container div with an id of app
<div id="app" > <example-component></example-component> </div>
if not just check if the Js files are properly imported in the php file
I also faced this problem and mine is solved. I'm not importing
<script src="{{ asset('js/app.js') }}" defer></script>
check that you are importing js/app.js and #app
It should work for you.
Lol, it was an faceplam question. I've removed the #yield('content') from the layout file. Sorry for that and tanks for help!
check if you are importing app.js
<script src="{{ asset('js/app.js') }}" defer></script>
I'm trying to write an app in angularjs by using the new router. But, don't know what's i'm doing wrong. From two days i went through a lot of articles,videos but till now can't able to get a grip on this.
Right now, i'm following this article - http://goo.gl/ayPmxr . My folder setting is like this..
- components
-- home
--- home.html
- angular.js
- app.js
- index.html
- router.es5.js
My Files -
index.html
Test new router
<body ng-app="app" ng-controller="AppController">
<!-- Multiple viewports require a name -->
<div ng-viewport="nav"></div>
<div ng-viewport="main"></div>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="router.es5.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
app.js
Chrome Console error
Can any one please help me to find out where I'm doing wrong & how I can fix that.
That's because you are not specifying any component for the nav viewport/outlet.
You should either remove from your view
<div ng-viewport="nav"></div>
or specify a component in your routes, something like
components: { 'nav': 'home', 'main': 'home' }
It's a known behavior/bug: https://github.com/angular/router/issues/207
As of 2016-01-12, the following works for me:
(just the body of index.html):
<body ng-app="app" ng-controller="AppController">
<ng-viewport></ng-viewport>
<script src="/node_modules/angular/angular.js"></script>
<script src="/node_modules/angular-new-router/dist/router.es5.js"></script>
<script src="./app.js"></script>
<script src="./components/home/home.js"></script>
</body>
// app.js
// This example works as of 2016-01-12 using
// angular 1.5.0-rc.0
// angular-new-router 0.5.3
// Assumes:
// 1. app.js is in the root of the folder structure
// 2. components/home/ folder exists off the root and contains:
// a. home.js
// b. home.html
angular.module('app', ['ngNewRouter', 'app.home'])
.controller('AppController', ['$router', AppController]);
function AppController ($router) {
console.log('made it to AppController');
$router.config([
{path: '/', component: 'home' }
]);
}
I can post home.js and home.html, if needed, but based on the question, the problem is within app.js.
One key difference I spot right away is my (perhaps simplistic) example does NOT enclose the route confiuration inside of a components {} object.
Hope this helps.