如何将AngularJS文件包含在web工具包中
我主要来自CMS (Wordpress，PHP)背景。我正在建设一个新的网站，这将是一个一页的AngularJS应用程序。我下载并安装了Google工具包。我将AngularJS安装为nmp安装。但是，如何在我的构建中包含AngularJS文件呢？我刚开始使用包管理器和构建过程来构建站点。谢谢。
回答 1
Stack Overflow用户
发布于 2015-01-19 21:49:35
将Google作为您的编译器，并将项目中的/app文件夹中的任何内容作为Web应用程序的源代码。在命令行运行gulp相当于运行编译器来构建web应用程序。(我是说gulp，因为这就是GWSK现在正在使用的。)
通过NPM添加包可以扩展编译器，而不是web应用程序。要将软件包添加到您的web应用程序中，您可以使用像鲍尔这样的工具，或者将它们“手动”添加到基本模板中。请记住，您正在创建一个将在云中运行的web应用程序，添加包就像在HTML文件中添加脚本引用一样简单。
云连接
打开your-project/app/index.html，在构建块之前添加对AngularJS 的脚本引用。例如，在文档的HEAD中。
<head>
<!-- ... existing head items... -->
<link rel="stylesheet" href="styles/main.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
</head>将应用程序实现添加到your-project/app/scripts文件夹中。我建议将子文件夹用于控制器、指令等。
在现有的main.js脚本文件中实例化应用程序。
(function () {
'use strict';
var querySelector = document.querySelector.bind(document);
... existing Starter Kit boilerplate...
// Instantiate my Angular app
angular.module('MyWebApp', [
'myDirective',
'pageController'
]).config(function($locationProvider) {
$locationProvider.html5Mode({
enabled: true
});
});
})();将您的角度模块添加到构建块中
<!-- build:js scripts/main.min.js -->
<script src="scripts/directives/my-gallery.js"></script>
<script src="scripts/directives/img-uploader.js"></script>
<script src="scripts/controllers/pageController.js"></script>
<script src="scripts/main.js"></script>
<!-- endbuild -->运行gulp serve在本地测试您的应用程序，调试，并重复，直到满意。
鲍尔大道
如果您不希望依赖第三方CDN为您的站点的重要资产提供服务，您也可以将AngularJS作为应用程序资产的一部分，即您控制的应用程序资产。
首先，您需要扩展您的“编译器”(参见上文)，以添加Bower包管理器：
npm install -g bower将包配置为将包放入my-project/app/scripts/vendor文件夹，请参阅.bowerrc，然后使用bower init初始化项目。要向您的web应用程序添加包，例如添加AngularJS运行：
bower install angular --save将所需的供应商包添加到基本模板中的构建块中，使它们成为包的一部分：
<!-- build:js scripts/main.min.js -->
<script src="scripts/vendor/angular/angular.js"></script>
<script src="scripts/vendor/angular-resource/angular-resource.js"></script>
... other angular modules you need in your app...
<script src="scripts/directives/my-gallery.js"></script>
<script src="scripts/directives/img-uploader.js"></script>
<script src="scripts/controllers/pageController.js"></script>
<script src="scripts/main.js"></script>
<!-- endbuild -->运行gulp serve来测试一个完全本地的web应用程序，您甚至可以在脱机时使用它。
替代方式
实现上述目标还有其他方法。初学者工具包就是这样的；一个开始。例如，有些开发人员喜欢使用NPM和褐化的组合，但如果您不知道/喜欢Node.js，我不推荐使用。如果您对包管理器感到不舒服，可以完全手工操作，并根据需要将它们复制到scripts/vendor文件夹中。
尝试以上两种方法，看看它们是否有意义。如果不是，迭代。
https://stackoverflow.com/questions/26441481
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号