I have a component called </App>, and another component called </Interface>, both are already imported, how can I put Interface on top of App in the centre and export (export default function foo() ) it?
I am new to both React and HTML, so any helps are appreciated!
let me provide some guidance for you here:
1.) It is great that you are learning React, however since you are brand new to web development I strongly urge you to first learn to make a website with vanilla html, vanilla javascript, and css. It will provide you the fundamentals you need to jump into React.
2.) When you are asking about putting Interface on top of App, are you asking about how to make it so that Interface is displayed above App on the page that is rendered, or are you asking how to move it's position in the code? Also, I'm not sure why you have your app component as the source for the image. You should import images from your folder which contains your assets and use that instead.
You can simply import the interface component and use it in the app component. Please follow the provided example.
export default App= (props) => {
return
(
<Interface/>
)
}
Above mentioned would add Interface component to the App Component, similarly you can follow the same pattern to open any other component in the Interface component respectively.
Related
In Vue, there's this feature where you can render a registered component directly to an HTML or Laravel Blade file using Vue.component()
instead of mounting them to a parent component/element first. I wonder if such way is also possible with React, because I'm currently building a Laravel-React side project. You might suggest just create a root JS file and render the component with ReactDOM.render(), but that would be a hassle and it would flood the folder if I want to render multiple small components.
In your view blade just add div like below
<div id="react-component-id" ></div>
and create component and render you html as below:
if (document.getElementById('react-component-id')) {
ReactDOM.render(
<yourCreatedCompoennt />,
document.getElementById('react-component-id')
);
}
So it will not affect root level.
I'm having an issue where a named export for a styled-component const is not being picked up by WebStorm. If I create a function or a react class and export it, WebStorm sees it when starting to type like in my screenshot.
Any ideas why it's not working with styled-components? In my screenshot I cannot see PageContainer in the code completion.
Using styled-components v4.2
Completion/auto-import for styled components is not currently supported, please follow WEB-33709 for updates
EDIT: I found the problem. I was using ng2-boostrap tabset module,
when adding the maps inside this view, the map does not render. I
haven't been able to fix the problem though.
I'm working on an angular 2 application, where i need to import google maps module into a sub module. My question is - how might i do that correctly? is this even possible as it is.
What i've tried:
I have added the import { AgmCoreModule } from 'angular2-google-maps/core'; and AgmCoreModule.forRoot({ apiKey: 'xxx', libraries: ['places'] }) where xxx is my apiKey downloaded from google api site. If i run this code in a newly angular-cli created app - loading the module into app.module, everything works fine. Selector code looks:
<sebm-google-map [latitude]="lat" [longitude]="lng">
<sebm-google-map-marker [latitude]="latitude" [longitude]="longitude">
</sebm-google-map-marker>
</sebm-google-map>
However, i want to use it in a module called MapModule and import that module into my app.module, so i import the AgmCoreModule into the MapModule, without forRoot(), and the selector is recognized in the html and the map is loaded but the map shows an empty view - i.e. there is a map with google logo and stuff, but no content - no error messages. I use the exact same code as my test example.
I also tried adding the AgmCoreModule with the forRoot({apiKey: 'xxx'}) with the same result. I removed the import from the App.module and only imported into the MapModule with the same result.
Am i missing something here? i can provide more code if needed, but i think my problem lies with the lack of knowledge in imports.
Kind regards Chris
Did you tried putting this code in your component that is responsible for viewing the map?
import {MapsAPILoader, SebmGoogleMap} from 'angular2-google-maps/core';
#ViewChild(SebmGoogleMap) map: SebmGoogleMap;
this.map.triggerResize();
if the map is not rendered in initial view, eg. inside an *ngif block then issues arise. When you inspect the elements in the tabs do you see map code or you see map code only when the map tab is activated?
Normally when there are no errors, a triggerResize() will fix your issue.
I'm working with restangular ngroute and playframework and I'm trying to do my CRUD following this tutorial : http://plnkr.co/edit/d6yDka?p=info
the list.html and detail.html in the index page (in the tutorial), I have them all in customer.scala.html page which call the main page by using this : #main("MyApp") So all my controllers and models are defined in this main page.
So how can I do the routing, the way that when I click on a button I can call the link (localhost:9000/custd) definded here in my js page:
app.config(function($routeProvider, RestangularProvider) {
$routeProvider.
when('/custd', {
controller:ListCtrl,
templateUrl:'list.html'
}).
UPDATE:
this is the link in customer.scala.html
<li>Customers</li>
in the file Application.scala I have this:
def custDetail = Action {
Ok(views.html.custDetail("Your new application is ready."))
}
in routes I have this:
GET / controllers.Application.index
GET /custdetail controllers.Application.custDetail
so how can I link this : /custd (in the angular controller) with my html page
So I think you're jumping in at the deep end a bit here. If you don't understand how to make a simple play web app, and you don't understand how to make a simple angular app then it might not be the best idea trying to integrate both straight away (I tried the same thing when I was new to this and it was complicated!).
Why have you chosen Angular for this given job? If you are not planning to create a single page application (which it sounds like you're not), then just using play templating should be sufficient for your needs (ands there's lots of docs available!).
If you are adamant on using the two, angular routing is geared towards angular applications. Looking at the routing you've provided:
app.config(function($routeProvider, RestangularProvider) {
$routeProvider.
when('/custd', {
controller:ListCtrl,
templateUrl:'list.html'
}).
In this you have provided a controller and a template. These are in reference to Angular controllers html templates, not Play. If you're not sure on how Angular controllers work, Angular has great documentation:
https://docs.angularjs.org
You need to work out exactly what information you need from the server side, create an endpoint to serve that data to your Angular app (using AJAX calls). I know this is a high level answer but really integrating the two is quite complex and hard to summarise in a single reply. My advice would be focus on creating an Angular OR Play app, then once you have the basics down move to integrating the two, but be clear as to the reasons behind chosing your technology as it sounds like you may not be
The question is on the same lines as this one, however the other way around.
I want to embed an Angular 1.x app inside an Angular 2 app. More specifically this app. I understand that there are ways to upgrade elements individually, however this being a large project, I simply want to embed this in one of my tabs on the Angular 2 app.
I tried a very naive approach where I copied the dist folder in one of my components and I am trying to use the same index.html with
<div ng-app="app">
<div ng-view="">
</div></div>
Now I am trying to load all the minifed javascript (which includes angular 1.x library as well as some app specific javascript files and css) into my main angular 2 app in its own index.html . Then I load the index.html from the dist directory through my component. The problem seems that Angular 1 library doesnt seem to load.
I have a few questions;
Would it help if the libraries(js) files are loaded as ts. I assume that it is possible to load Angular 1 and 2 libraries simultaneously.
If it would, is there an easy way to get the js files converted to .ts files.
EDIT
I got this to work by using the angular.boostrap call as shown below.
Following is my code snippet for my component
import {Component, AfterViewInit, OnInit} from 'angular2/core';
declare var angular:any;
#Component({
selector: 'server-monitor',
templateUrl: 'app/components/server-monitor/dist/index.html',
styleUrls: ['app/components/server-monitor/dist/styles/vendor-c0a35f80.css',
'app/components/server-monitor/dist/styles/main-0c4cc0e5.css',
],
})
export class ServerMonitorComponent implements AfterViewInit, OnInit{
ngOnInit(){
angular.bootstrap(document, ['app']);
}
}
However, now I have run into a different problem. The original project makes a lot of http calls very frequently(2 sec by default) to get live stats about the system.
When I run this embedded into my app, I can see the calls are made but my page keeps refreshing and doesn't show anything on the graph. I understand I have to modify something where it makes the http calls, but no sure where.
In addition to the above edit, I modified $routeProvider in the original app and it seems to work just fine