I'm using angular 4 with bootstrap 4. I need to create a multi-level sign-up page. Now I'm facing issue to include the JavaScript file into angular.
import '../../../assets/js/js/multiform.js'
used this to import the file into my #Component ;
I need to call a function when the user click "NEXT / BACK"; But my function not calling
Forget about importing pure javascript plugins. It's not a good practice in Angular 2+. You can create your own component for it, or use the open source examples that are already angularized. I think something like this is what you are looking for: https://github.com/cwun/angular-multi-step-wizard.
Good luck.
Related
The problem is that I have lots of HTML templates that include < script > tags with AngularJS code in them. My current project is using Angular 8, and one critical part of it consists basically in usign all the AngularJS templates that I have inside this new project doing as little work as possible (due to the fact that in the future other users will have to be able to add new templates to the project).
I have to be able to add this HTML AngularJS templates to my current project. For that I am using ngUpgrade, but it has been quite misleading and I have not been able o achieve this.
Here is one of the templates, simplified as much as possible for this question:
HTML
<body>
<script>
angular.module('myApp', [])
.controller('myController', function ($scope, $timeout) {
$scope.local = 'es';
BigFunction($scope, $timeout);
});
var texts = {
title: {
en: 'A simple title',
};
// other constanst go here
function BigFunction(scope, timeout) {
scope.texts = texts;
scope.$watch('content', function(end, ini){
// some logic when 'content' changes
}, true);
// more logic
}
<script>
<div>
<!-- Lots of tags using ng-bind and other AngularJS tools -->
</div>
</body>
I have to integrate it touching it as little as possible. I don't know if I should separate the logic of the script from the HTML, or if I could import it as it is right now and work. Take into account that I have no previous experience working with AngularJS, I am an Angular 2+ developer.
If I have to separate the logic from the template, where do I put the angular.module? And the constants?
I would suggest you using Web Components
Basically you would have to wrap the AngularJS application as a Web Component and then import it to your Angular 8 app. You would end up with something like this
<my-angularjs-app></my-angularjs-app>
It could be imported in any component in your Angular 8 application.
There is no official solution on how to do it, but there are good examples there. I would suggest you following this one:
UPGRADING WITH WEB COMPONENTS: FROM ANGULARJS TO ANGULAR
Once you are there scroll down until you see
Exposing AngularJS Components As Custom Elements
After you manage to bundle up the AngularJS application as a web component, having the whole application in one script (main.js), you would have to copy it to your Angular 8 app.
In your Angular 8 app, create folder assets/web-components/my-angularjs-app
Copy the file you generated from AngularJS (main.js) to a folder you just created
Import the file in angular.json - Add this to scripts: assets/web-components/my-angularjs-app/main.js
Your AngularJS app is now imported but there is one more thing we have to do before you can use it in your components. You have to let Angular know that there will be some selectors which Angular might not be aware of. To do this, go to your app.module.ts and add schemas: [CUSTOM_ELEMENTS_SCHEMA]
You can now use your AngularJS app anywhere you prefer by using the selector you declared (This part is in the link I posted). <my-angularjs-app></my-angularjs-app>
I recommend the ng-book, it has a full chapter about hybrid apps. Note the UpgradeAdapter in the book is deprecated. But many concepts are still valid.
NgUpgrade is the official package to do what you want.
The first thing you must do is to put the script in a proper file. And not in the HTML. Then you can do serious coding.
You must follow the NgUpgrade doc to make the 2 apps run.
https://angular.io/guide/upgrade#bootstrapping-hybrid-applications
you need one bootstrap for AngularJS:
angular.bootstrap(document.body, ['heroApp'], { strictDi: true });
And one bootstrap for Angular 8:
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule);
You will notice the NgModule has a reference line towards AngularJs.
The code they give is for JIT compilation.
A production build in AOT compilation will look like this:
import { enableProdMode } from '#angular/core';
import { platformBrowser } from '#angular/platform-browser';
const { AppModuleNgFactory } = require('../aot/src/app/AppModule.ngfactory');
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
--
You must know a directive in AngularJS corresponds to what is meant by component in Angular 8.
You have 2 options.
inject Angular 8 components in ANgular JS directives
inject Angular JS directives in ANgular 8 components.
I recommend to upgrade ANgularJs Components inside Angular 8 components. Like that in the future you converge towards moving to Angular 8 only.
It will require some work to copy each AngularJS component in an Angular 8 component.
To reduce work, run Angular JS as it is. And put Angular 8 directives outside of the templates of AngularJS.
<div id="angularjs-root"></div>
<div my-unaltereted-angular8-component></div>
It may be I am wrong and you cannot put them deparately. But it is worth a try.
Myself, I inject DOM elements dynamically from Angular8 to a JQuery application. But you cannot do that in AngularJS since it has lifecycle for all nodes. HOwever, with some carefulness, removing change detection rendering for the node, a huge tree of nodes from Angular 8 could be injected in the template of an ANgularJs template, and this wihtout downgrading.
This is what I use.
addComponentToElement({ component, element }: { component: any, element: any }) {
// Create a component reference from the component
const componentRef = this.componentFactoryResolver
.resolveComponentFactory(component)
.create(this.injector);
// Attach component to the appRef so that it's inside the ng component tree
this.appRef.attachView(componentRef.hostView);
// Get DOM element from component
const domElem = (componentRef.hostView as EmbeddedViewRef<any>)
.rootNodes[0] as HTMLElement;
// Append DOM element to the body
element.appendChild(domElem);
// detect changes
componentRef.changeDetectorRef.detectChanges();
}
The AppModule will need to add each component inside entryComponents:
entryComponents: [ InjectedCOmponent1m InjectedCOmponent2]
https://www.reddit.com/r/Clojure/comments/4el0xi/how_to_use_an_existing_reactjs_component_with/
There is this existing post about using existing ReactJS components in a CLJS/Reagent project. I'm looking to do the opposite. I have a bunch of CLJS components and would like to compile them into a ui library of some sort so that they can be used by React developers. That is, if I have a button CLJS component, I would like to be able to render that Button using < Button /> or mylib.Button(_) etc.. in a React/js app file.
I have read this - https://shadow-cljs.github.io/docs/UsersGuide.html#target-node-library - extensively but it's not quite working out. I've been using ":target :node-library" and I can get simple functions (that return strings/numbers, for example) to compile and work in my app, etc.. but it doesn't work for entire components. For example, my cljs button component takes in :
defn button [props & children]
but when I try to pass in these parameters (I call {lib.button({}, {})} in my App.js file), I get errors like "No protocol method IMap.-dissoc defined", because I'm trying to pass JS objects into CLJS-only functions, I believe. Not sure how to resolve this..
I can explain more on this if it would help clarify. It would also be super helpful if anyone had a reference demo project or any resources they could link me to.
I only have a few suggestions:
You can try to build a new sample project to consume your library with lein new figwheel myproject and use JavaScript interop to move one step at a time closer to the native JS way of using your library.
You can create an interface namespace that can consume JS objects and wrap these into Clojure data structures to sort out the protocol errors you're seeing, eg. functions that take a props parameter and pass down (js->clj props) to the rest of the code underneath.
For the authoritative source, check the Reagent docs, especially this: http://reagent-project.github.io/docs/master/InteropWithReact.html#creating-react-components-from-reagent-components
I have a UI5 component on instantiating that component I start loading OL3 library like this,
var promise = jQuery.sap.includeScript({
url : //ol3Path,
id : 'ol3'
})
promise.then(function(){
console.log("OL3 library loaded.");
})
And I am trying to instantiate this component inside the UI5 custom control and placing that inside the div that I created in the custom control renderer And i am instantiating this custom control in FIORI Launchpad, So in summary on instantiating that custom control, I load libraries.
but after loading like this I am getting that console message also but once I loaded this there is a global variable ol I am not able to access this variable.How to fix this?
you can follow the below blog: https://blogs.sap.com/2013/02/11/sapui5-with-google-maps/
(or)
When you want to use external API's in component file use your code and use jQuery.sap.registerModulePath(). Tis will make your global variable work.
Finally I got the problem, Currently, i am using requirejs in my fiori project so if there is requirejs then all other ways of loading the library will not work. So once I removed requirejs then it's loading all the libraries properly.
I am trying to use the rc-slider React component on a existing Rails application that is using react-rails gem and it already have some other components that were built within the application that work just fine.
Based on this blog post I've been able to follow its first 3 steps, I've found the minified and browser-ready version of it here, added the file to the suggested path and required it on the application.js as recommended but even seeing the code within the Sprockets generated application javascript file that is rendered on the browser I can't see or use the supposed global variable it would provide according to step 4.
In the component's examples page it uses a const Slider = require('rc-slider'); statement in order to get that available. I've tried that but without luck as it throws: Uncaught ReferenceError: require is not defined. The same happens when I try the README usage's section approach: import Slider, { Range } from 'rc-slider';. I've tried both from an existing JS where I load other React components and also from the browser's Dev Tools Console window.
Am I using the wrong approach to the problem or maybe missing/overseeing any concept or basics here?
If you want to use Sprockets, you can get a pre-compiled version of rc-slider from unpkg:
https://unpkg.com/rc-slider#6.0.0/dist/rc-slider.js
Taking a look at the source, I see it exports the library as rc-slider:
So you can access it as window["rc-slider"] and use it from there, for example:
var RCSlider = window["rc-slider"]
var container = document.getElementById("container")
ReactDOM.render(
<div>
<RCSlider />
<RCSlider.Range />
</div>,
container
);
jsfiddle
That way, if you put rc-slider.js in the asset pipeline, you can use RCSlider in your javascripts.
According to the documentation here:
https://scn.sap.com/thread/3502503
http://jsbin.com/openui5-notepad-control-with-its-own-library-used-in-xmlview/1/edit?html,output
I build the following folder structure with following files:
/my/themes/sap_bluecrystal/library.css
/my/library.js
/my/Square.js
Now I am asking me how to load the library (inside Component.js) correct.
I tried following in Component.js
jQuery.sap.registerModulePath("my", "./my");
And in some View:
jQuery.sap.require("my.Square");
...
new my.Square({
text : "Test",
size : "200px"
})
All in all the Square control seems to be usable but the library.js and library.css is not loaded at all.
Any idea how to do it right?
Using bootstrap XML code inside index.html would not work if the app is running inside Fiori Launchpad.
Bonus question: Where to deploy a custom library inside SAP to be usable by multiple apps? One idea (but maybe that's wrong) is to create a BSP application just containing the library code?
The right way to load the library would be (instead of jQuery.sap.require):
sap.ui.getCore().loadLibrary("my");
This will load a "library-preload.json" file (if available) and also include the theme resources.
See https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.core.Core.html#loadLibrary
First question I could solve for my own:
Replace
jQuery.sap.require("my.Square");
with
jQuery.sap.require("my.library");
Second question is still open :)