-2

I am building an Angular-Dart site based on a commercial Bootstrap template.

The correct rendering should be like this:

enter image description here

I used IntelliJ to scaffold a Dart/Angular app and started to modify from there.

I have put related files (CSS/JS/images) of that template into web/css, web/js, respectively.

HTML used is verbatim copied from the template but I have taken out the CSS, JS reference from btqun_component.html and moved into index.html.

The output is like this:

enter image description here

Obviously, the CSS is working, and the header/footer are showing correctly. But the masonry effect is not showing, so I doubt that is related to JS reference.

Can anyone give any hints on this?

TaylorR
  • 3,746
  • 5
  • 25
  • 42
  • you are not able to use external 3rd party js in angular is that so ? – Rahul Singh Aug 16 '17 at 07:04
  • I think so as this template uses a lot of external 3rd party JS files to have those fancy effects. – TaylorR Aug 16 '17 at 07:15
  • Please look at this answer on SO how to import third party JS [answer](https://stackoverflow.com/a/45387777/2708210) – Rahul Singh Aug 16 '17 at 07:15
  • Thanks. It is very strange that I have to use this kind of workaround. Is there a more straightforward method? BTW, I am not using `cli` so there is no such file `angular-cli.json` – TaylorR Aug 16 '17 at 09:18
  • actually this is the official way , what are you using webpack ? – Rahul Singh Aug 16 '17 at 09:19
  • 2
    I am using Angular Dart and IntelliJ – TaylorR Aug 16 '17 at 09:35
  • I'd like to answer but I don't think you're giving the information needed. Is there an error in the JavaScript console? What is it? What specifically is in btqun_component.html? Did you copy that all over? This may very well be an issue with webpack — btqun_component.html looks like a WebComponent, which webpack could need some special directory structure for — which goes way beyond AngularDart. – filiph Aug 21 '17 at 23:12
  • @TaylorR were you able to solve this problem? I'm in your exact same situation – David_E May 18 '18 at 21:38
  • 2
    Providing more code that allows to reproduce might help. – Günter Zöchbauer May 19 '18 at 06:27

1 Answers1

3

Do you have a documentation for the bootstrap template ? I guess you need to execute the javascript they provide to you so you need to add it to your index.html, and you probably need to import bootstrap and jquery too.

If you need to call a javascript function you can do it directly in the index.html inside a script tag or build a dart wrapper using package:js

EDIT: answer to call jQuery function from Dart

Hadrien Lejard
  • 5,644
  • 2
  • 21
  • 18