I need to create one page or two page using angular 6 but I don't want to use ng new myapp command. please guide me hows to use on one simple html page ?
Angular create directory structure which will be required for transpiling your code from typescript to javascript bundles. Also for the compilation it needs many npm dependencies, which directly managed by angular-cli. So you always should use angular-cli i.e. ng new myapp.
If you are just prototyping, you can use https://stackblitz.com/ which provided all VS code functionality in browser without any setup.
Follow the official angular tutorial.
Angular is built upon the concept of single page applications.
So if you want to create an application with 2 pages, what you need to do is creating two components (using ng generate component command) and switch between them using routing. Follow the documentation.
Related
I have one Asp Dot Net Core project, using Razor page, that is the ClientApp.
I create a new projet, using Blazor, that is the AdminApp.
I reference the AdminApp within the ClientApp.
I would like to call the AdminApp, from the ClientApp, when url is "clientapp/admin"
I cannot make it work.
Could you help me ?
Personally I would convert the ClientApp to blazor which should just require a couple lines being added to the startup.cs and then you can just import Admin components or update the route on top of the admin pages to include /admin/admincomponentname
This is the beauty of Blazor since serverside Blazor is essentially just razor pages with a small difference engine to run like a SPA.
I am in the middle of converting a Polymer 2 app to Polymer 3. Modulizer did not work for me so I converted it manually. Thanks to the great upgrade guide it has been mostly straight forward so far.
One task is left though:
in my Polymer 2 app I had a special html import (d3-import.html) that brought in the d3.js lib version 3 which comes as a plain JavaScript file (no ES6 module!). This import was dynamically loaded in only two out of overall 20 pages because the other 18 pages did not need it.
In Polymer 3 I can not import it as an ES6 module because it is not a module. Loading it in my main start.html would mean it gets loaded even if the user only uses the other 18 pages that don't need it.
I tried writing script-tags in my web component templates but that doesn't seem to work. Unfortunately I don't see any error in the browser tools. The template simply stops to load at the line of the script-tags.
Any idea how to do this?
Additional question:
since I start using lit-element in the same application. How to solve the same problem with lit-element?
Edit: note that I currently don't use any build steps/tools except for polymer-build to replace the module paths with actual file paths.
Note that this challenge has nothing to do with Polymer or LitElement, this is only an issue with how to load non-module resources from a module.
The most straightforward way that I know of is to use a bundler like Rollup that can support CommonJS or UMD. Rollup has the commonjs plugin for this: https://github.com/rollup/plugins/tree/master/packages/commonjs
The other option is to upgrade to D3 5.x, which appears to be published as standard modules itself. Given the number of files involved, you'll still likely want a bundler to reduce network roundtrips.
I wish to use polymer to create a web component and embed it in another project built with angular.js.
The same way we can do with stencil, where I can just import a script and use the web components.
I tried following the official polymer tutorial, but it only specifies how to build a "polymer app", I wish to have a component, bundled into a single JS file.
I tried running these commands with polymer CLI.
polymer init
polymer build
I got an HTML file, but the source component was not compiled or bundled.
I expected a compiled version of the component which I can use in any other project - like I get when I compile stencil.
Here are some useful links for you
https://medium.com/#tonytunes2005/integrating-polymer-3-components-on-angular-5-317f8c43ef03
https://medium.com/google-developer-experts/mix-and-match-angular-custom-elements-polymer-1aee0b3d63a1
https://vaadin.com/blog/using-polymer-components-in-angular-2
our Team, work with laravel and we want to start a large scale project.
The front-end project will be written with Html Css Bootstrap jquery Sass
and we task runner is Gulp
How will our project directory be?
sass directories and my file and images Where do they go?
You can use Laravel Mix to compile CSS and JavaScript pre-processors. So you will store all your assets into resources/assets folder.
Laravel Mix provides a fluent API for defining webpack build steps for your application using several common CSS and JavaScript pre-processors.
To use laravel mix you have to first install node and npm.
Then create files app.js and app.scss in resources/app/sass directory and resources/sass respectively.
Then open webpack.mix.js file which will be on your project root write the following code in webpack.mix.js file
In webpack.mix.js file (you can see this file at your project root directory)
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Now let's see what is the meaning of above two lines?
mix.js('resources/assets/js/app.js', 'public/js') says to read app.js contents (which is stored in resources/js directory), pull them and put them up in public/js after mixing them up.
Same is for mix.sass. Since it is using SAAS compatible so you may use CSS or SAAS based syntax to define your layouts. Webpack compiled them to a single CSS anyway. Now in master.blade.php, all you have to make these two calls for JS and CSS resources respectively:
<script src="{!! asset('js/app.js') !!}"></script>
and
<link rel="stylesheet" href="{!! asset('css/app.css') !!}">
Now run npm run dev command.
It will compile your CSS and JS files and put the build inside a public folder.
For detail explanation you can check
https://laravel.com/docs/5.7/mix
https://appdividend.com/2018/02/19/laravel-mix-compiling-assets-tutorial/
It varies from projects and frameworks. Put the stuff where you find that it makes the most sense. If you're running a standalone frontend app that uses Laravel as backend API you'll probably do well organising your app with it's own tree.
But considering you're using html, css, jquery and sass, which are standard web techniques, this is what Laravel is basically built for. So use blade-templates for the html and put all your jquery and css in the public folder. If you haven't used Laravel before you should probably plow through a series of tutorials to get the idea of its MVC structure.
i'am trying to use components from another module, but is not working.
Look what i have:
I have my project, its an app to convert files, and its working everything is ok. Now i want to change the interface... for that i cloned a github repository thats is a project with the components that i want to use, and imported it as a module. (should i import as a module or as a project?)
Everything great till now, but when i try to use the components from the module i cant find the classes or even the module...
Any suggestions?
You should add your imported sources as a new module (let's call it B), then you should add a dependency from your original module A to your module B in order to use its code.
See this page on how to configure module dependencies.