将Bootstrap主题/模板添加到Angular应用程序

时间:2018-01-12 20:20:55

标签: javascript css angular twitter-bootstrap

我刚创建了Angular& Visual Studio 2017向导中提供的Asp.Net Core模板。然后我下载了以下模板(在免费版中),https://graygrids.com/item/classix-bootstrap-html5-classified-ads-listing-job-portal-web-template/。但是我不确定如何处理我下载的文件。它由一个名为assets(包含css,js,...)和一堆html文件的文件夹组成。

如何将此模板与Angular集成?

有关详细信息,请参阅https://github.com/gf1721/Directory-ListingWebApp

为了澄清我不是在谈论Bootstrap CDN。

我已经在互联网上看了,但令人惊讶的是,似乎没有单一来源解释如何将主题与Angular集成。这似乎也不是一个微不足道的问题。我真的在这个上苦苦挣扎,谢天谢地我还没买过模板!

由于

1 个答案:

答案 0 :(得分:1)

您不能只复制一堆非Angular文件并将它们转换为Angular项目。

最好的方法是开始为您的应用程序构建所需的组件/路由,然后手动将模板代码复制到组件中。这并不是你可以自动化的东西,你决定将模板分解成组件将是你必须做出的设计决定。这不是将模板添加到项目然后在Angular中重建模板的问题。

就基本代码而言,只需将模板所需的任何Javascript / CSS依赖项添加到Angular中(在index.html中或使用Angular CLI' s脚本选项)。只需查看如何将Bootstrap 4添加到Angular Starter或CLI应用程序中,这应该可以帮助您入门。

此外,请注意,通常需要将JQuery重接口元素添加到Angular项目中,因为您实际上使用的是两个正交DOM操作系统。我并不是说不要这样做,但是当你试图通过Angular的DOM操作绑定它们或与它们交互时,你可能会发现模板中的元素不会很好。