如何在基于angular-fullstack的应用程序中包含库文件(css / js)
我使用了一个Yo Angular-Fullstack生成器( https://github.com/DaftMonk/generator-angular-fullstack ),并启动了一个应用程序,然后尝试从凉亭通过做安装Toastr –
bower install angular-toastr
现在我想添加toastr css和js文件。 他们位于
bower_components/angular-toastr/dist
现在我如何将它们包含在当前项目中,以便在使用grunt构build应用程序时将它们包含在dist文件夹中。
文件夹结构如下 –
├── client │ ├── app - All of our app specific components go in here │ ├── assets - Custom assets: fonts, images, etc… │ ├── components - Our reusable components, non-specific to to our app │ ├── e2e - Our protractor end to end tests │ └── server ├── api - Our apps server api ├── auth - For handling authentication with different auth strategies ├── components - Our reusable or app-wide components ├── config - Where we do the bulk of our apps configuration │ └── local.env.js - Keep our environment variables out of source control │ └── environment - Configuration specific to the node environment └── views - Server rendered views
我使用一个称为wiredep
的咕task任务。 它会查找我应用程序使用的凉亭组件,并将对css / js文件的引用添加到我指定的文件中。
我正在使用.NET BundleConfig缩小,所以我的任务设置如下所示:
wiredep: { task: { src: [ 'App_Start/BundleConfig.cs' ], ignorePath: '..', fileTypes: { cs: { block: /(([ \t]*)\/\/\s*bower:*(\S*))(\n|\r|.)*?(\/\/\s*endbower)/gi, detect: { js: /<script.*src=['"](.+)['"]>/gi, css: /<link.*href=['"](.+)['"]/gi }, replace: { js: '.Include("~{{filePath}}")', css: '.Include("~{{filePath}}")' } } }, dependencies: true, devDependencies: false } },
最终的结果是这样的:
bundles.Add(new ScriptBundle("~/bundles/thirdparty") //NOTE: auto-generated by a grunt task //anything between 'bower:js' and 'endbower' WILL BE LOST! //bower:js .Include("~/assets/angular/angular.js") .Include("~/assets/moment/moment.js") //endbower ); bundles.Add(new StyleBundle("~/bundles/css") //NOTE: auto-generated by a grunt task //anything between 'bower:css' and 'endbower' WILL BE LOST! //bower:css .Include("~/assets/nouislider/distribute/nouislider.min.css") //endbower .Include("~/Content/css/app.css") );
正如我所说,我正在使用.NET BundleConfing,但是,您可以使用和标签。 我想你只需要从grunt任务configuration中删除选项replace
。
- 教程AngularJS-npm安装错误
- 连接到API与后端呈现的WebApp之间的区别
- 使用ng-scenario作为框架以Karma和Jasminetesting控制器时,范围variables未定义
- 初学者 – 在Windows 7上使用XAMPP设置Angular应用程序的本地主机
- 在AngularJS和数据库之间保持唯一标识符同步的最佳方法是什么?
- 如何通过callback后的服务传递内容到另一个服务控制器已被parsing?
- 无法使用快递获取删除标题的任何数据
- 如何以angular度显示图像(图像在服务器端上传文件夹和angularjs在不同的服务器上工作)?
- 如何显示循环后的所有多数据数组,并显示所有数据与ng-repeat?