用于角度项目的粒子js背景?

时间:2018-09-03 04:31:23

标签: angularjs particles.js

有人可以解释如何为angular 6项目添加粒子js背景吗? 我按照波纹管链接跟踪了一些教程,但是对我来说不起作用。 https://github.com/VincentGarreau/particles.js/

谢谢。

3 个答案:

答案 0 :(得分:2)

这是我如何在NG6项目中使用它的方法:

  1. 从npm安装颗粒.js: npm i particle.js-保存
  2. 在angular.json的脚本部分中添加 node_modules / particle.js / particle.js
  3. 在您的组件中添加:声明var particleJS:任何; @component之前
  4. 转到particle.js并根据自己的喜好修改粒子,然后下载粒子js-config.json文件
  5. 将该文件存储为您的资产/数据文件夹中的particles.json
  6. 在您的组件html模板中,添加一个id =“ particle-js”的div
  7. 在组件ngOnInit中添加以下代码:

    particlesJS.load('particles-js','assets / data / particles.json',function(){             console.log('回调-加载了particles.js配置');           });

希望这会有所帮助!

编辑:添加了代码

import { Component, OnInit } from '@angular/core';
import { ParticlesConfig } from './../../../../../assets/data/particles';

declare var particlesJS: any;

@Component({
  selector: 'app-heading',
  templateUrl: './heading.component.html',
  styleUrls: ['./heading.component.scss']
})
export class HeadingComponent implements OnInit {
    constructor() { }

    ngOnInit() {
        // https://vincentgarreau.com/particles.js/
        particlesJS('particles-js', ParticlesConfig, function() {
            console.log('callback - particles.js config loaded');
          });
    }
}

模板

<div class="h-75 bg header">
    <div  id="particles-js" class="w-100 header-particles"  >

    </div>
    <div class="header-container w-100">
        <div>
            <h1> Big Header</h1>
            <div>small header</div>
        </div>
    </div>
</div>

以及在其他组件中的使用

<app-heading></app-heading>
<main>
  <app-features></app-features>
  <app-pricing-tier></app-pricing-tier>
  <app-testimonials></app-testimonials>
  <app-trusted-by></app-trusted-by>
</main>

答案 1 :(得分:1)

我想在Alberto的答案中添加更多内容。我使用的是Angular CLI版本8.3.2,并且一切正常。正如问题所问,我实际上想将其添加到组件的背景中。我是这样使用CSS实现的。

HTML

<div id="container">
  <div id="particles-js">
  </div>
  <div id="over">
      <!--Existing markup-->
  </div>
</div>

CSS

#container {
  width: 100px;
  height: 100px;
  position: relative;
}
#particles-js,
#over {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#over {
  z-index: 10;
}

此设置将在您现有的标记下应用particles.js背景。

编辑:

如果您正在Windows(IIS)上使用Azure应用服务将其部署到生产环境,则可能会收到particles.json的404 not found错误。在这种情况下,请在web.config文件夹中创建一个src文件,并将其包含在assets

angular.json数组中

web.config

<configuration>
  <system.webServer>
    <staticContent>
        <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
    <rewrite>
      <rules>
        <rule name="Angular" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

angular.json

"assets": [
     "projects/dashboard/src/favicon.ico",
     "projects/dashboard/src/assets",
     "projects/dashboard/src/web.config"
]

答案 2 :(得分:1)

您可以使用“ Angular-particle”轻松实现粒子动画,“ angular-particle”是使用TypeScript for Angular实现的particle.js

它的实现非常简单,您可以在下面的链接中找到它 https://www.npmjs.com/package/angular-particle

已编辑

这是角度8中的角度粒子的运行示例 https://github.com/SunnyMakode/angular-particle-demo

一旦您从github提取代码,

  1. 键入“ npm install --save”,然后在终端窗口中按Enter键。
  2. 输入“ ngserve”,然后按Enter