yeoman
无论您是喜欢还是讨厌它,都不能否认AngularJS是每个开发人员都喜欢的框架。 可能并不适合每个人,但AngularJS具有一个古怪,高效且强大的功能集。 再加上一些有用的开发工具,如Yeoman,Grunt和Bower,您将获得一个非常快的快速原型制作过程。
我们将介绍的内容
此AngularJS教程将涵盖:
- 用Yeoman生成裸露的AngularJS应用
- 使用Grunt加快开发速度并帮助执行重复性任务
- 使用Bower添加第三方插件/框架
- 对AngularJS应用进行较小的更改
先决条件
为了充分利用本教程,我们建议您掌握以下技能和资源:
- 终端和命令行基础知识
- 已安装NodeJS和NPM
- 基本的JS,CSS和HTML知识
档案
让我们开始吧!
好吧,让我们开始吧。 您需要做的第一件事是安装Yeoman,Grunt和Bower。 我们将使用Node Package Manager一次完成所有操作。 在终端中,运行以下命令:
npm install -g yo grunt-cli bower
如此简单,我们现在可以使用一组强大的工具。 在使用过程中,我将逐一解释。
约曼
Yeoman用于为您生成应用程序的脚手架。 它将创建基本文件夹,文件和配置,以使您快速启动并运行。 不仅如此,还有一些很棒的自定义生成器可用于创建特定类型的应用程序–我们将使用漂亮的AngularJS生成器。
Yeoman的最佳功能之一就是能够使用自定义生成器。 我们将安装AngularJS生成器,以帮助我们尽快启动并运行Angular。
运行以下命令安装AngularJS生成器:
npm install -g generator-angular
现在是时候生成一个闪亮的新AngularJS应用程序了。 在新的项目目录中,运行:
yo angular
生成器将询问您几个问题。 您可以回答yes,以包含Twitter的引导程序。 还回答yes包括ngResource。 剩下的我们暂时不需要了,所以回答“否”。
坐下来(几秒钟),观察发电机如何发挥作用。 Yeoman将创建您的文件和文件夹,然后将运行bower install(稍后对此进行详细介绍)和npm install以获取任何依赖关系,最后它将执行任何强制性配置。
盒子里装了什么?
让我们看一下Yeoman给我们的:
- .bowerrc
- .editorconfig
- .gitattributes
- .gitignore
- .jshintrc
- Gruntfile.js
- 应用/
- component.json
- 业力e2e.conf.js
- karma.conf.js
- node_modules /
- package.json
- 测试/
让我们来看一些在这里需要注意的更重要的事情:
应用程序/目录
app目录包含您的静态应用程序。 它包含您的html,css和javascript,并且您将在其中花费大部分时间进行开发。
package.json
package.json文件可帮助npm识别我们的项目以及管理其所有依赖项。 它还可以包含与项目相关的各种其他元数据。
node_modules
这是不言自明的。 这是项目依赖的所有节点模块的存储位置。
Gruntfile.js
Gruntfile是一个javascript文件,负责配置您的项目以及项目所需的任何任务或插件。 例如,您的gruntfile可能指定您的项目使用Uglify,并且希望它在构建时在特定目录上运行uglify。 稍后将进一步了解Grunt。
component.json
component.json文件用于通知Bower程序包管理器项目依赖项以及其他元数据。 在最新版本的Bower中,此文件称为bower.json-稍后对此进行更多介绍。
.bowerrc
.bowerrc文件用于将常规配置选项传递给Bower。
业力档案
业力是一个测试框架。 我们将使用它为Angular应用程序运行一些测试。
! 这将带来很多好处-但是,一旦您对yeoman生成器的输出更加熟悉,您将学会喜欢它可以为您处理所有这些的事实!
在开始进行实际开发之前,让我们在项目中添加一些内容。
Bower –网络包装经理
在使用Bower之前,我们需要自己做一些配置。 Bower最近将其component.json
文件的命名约定更改为bower.json
文件,因此我们需要使代码库与之一致。
我们需要做的第一件事是对.bowerrc
的Bower配置进行少量更改,因此将其打开并添加以下行:
{
"directory": "app/components",
"json": "bower.json" // Add this line
}
免费学习PHP!
全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
它的作用是告诉Bower使用软件包的bower.json
文件获取有关如何安装该软件包的说明。
由于我们将Bower用于我们自己项目的依赖项,因此我们也需要将项目根目录中的component.json
文件重命名为bower.json
。 使用这种尖端技术时会问一个小问题:)
凉亭
Bower是程序包经理。 这将帮助我们仅需几个简单的命令即可快速找到并安装我们最喜欢CSS框架,javascript库和插件。
好吧,让我们给Bower一个旋转。 Yeoman曾经用Bower为我们早些时候安装Bootstrap,但这只是Bootstrap CSS。 我们也需要所有漂亮的Javascript小部件。
由于我们正在构建AngularJS应用,因此我们需要可与Angular一起使用的Bootstrap javascript。
幸运的是, Angular UI团队已经将所有的Bootstrap Javascript移植到了Angular!中。 让我们使用Bower安装它们的库。
bower install angular-bootstrap --save
–save标志告诉Bower将此文件作为依赖项添加到bower.json文件中
太棒了! 那很容易不是吗? 现在,导航到您的app /目录,让我们看看需要使用什么。
我们的静态应用
看一下app /目录的内容。
- favicon.ico
- index.html
- robots.txt
- 组件/
- 脚本/
- 样式/
- 观看次数/
index.html
这对大多数人来说应该很熟悉,这是您应用程序的核心html页面。
组件/目录
组件目录类似于node_modules目录,但适用于Bower。 这是您通过Bower安装的所有软件包的保留位置。 例如,AngularUI Bootstrap就在那里。
脚本/目录
再次,对大多数人熟悉的领域。 这是您的应用javascript存储的地方。 请注意,例如AngularJS之类的库将存在于components目录中,因此scripts /用于您编写的文件!
样式/目录
所有的css / sass使您的应用看起来更漂亮。
观看次数
这个漂亮的文件夹是您的Angular模板所在的位置。
接下来,我们将仔细研究AngularJS文件
AngularJS
Yeoman Angular生成器为我们提供了基本的要素:一个模块,一个控制器和一个视图。 让我们看一下其中的每个:
模块:/app/scripts/app.js
'use strict';
// Here we set up an angular module. We'll attach controllers and
// other components to this module.
angular.module('testApp', [])
// Angular supports chaining, so here we chain the config function onto
// the module we're configuring.
.config(function ($routeProvider) {
// We use AngularJS dependency injection to fetch the route provider.
// The route provider is used to setup our app's routes.
// The config below simply says when you visit '/' it'll render
// the views/main.html template controlled by the MainCtrl controller.
// The otherwise method specifies what the app should do if it doesn't recognise
// the route entered by a user. In this case, redirect to home.
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
控制器:/app/scripts/controllers/main.js
'use strict';
// Here we attach this controller to our testApp module
angular.module('testApp')
// The controller function let's us give our controller a name: MainCtrl
// We'll then pass an anonymous function to serve as the controller itself.
.controller('MainCtrl', function ($scope) {
// Using AngularJS dependency injection, we've injected the $scope variable
// Anything we attach to scope will be available to us in the view.
// In this case, we're attaching a collection of Awesome Things to display
// in app/views/main.html
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
视图:app / views / main.html
<div class="hero-unit">
<h1>'Allo, 'Allo!</h1>
<p>You now have</p>
<ul>
<!-- Here we use the AngularJS directive: ng-repeat to loop through our awesomeThings
and print them out as list items using the {{}} bindings -->
<li ng-repeat="thing in awesomeThings">{{thing}}</li>
</ul>
<p>installed.</p>
<h3>Enjoy coding! - Yeoman</h3>
</div>
[/js]
<strong>The Index File: app/index.html</strong>
[html] <!doctype html>
<html>
<head>...</head>
<!-- The ng-app directive tells angular which module we'll use
for our app. In this case the one defined in scripts/app.js -->
<body ng-app="testApp">
...
<!-- The ng-view directive specifies that our templates
(such as views/main.html) will be loaded into this div. -->
<div class="container" ng-view></div>
<!-- Here we load AngularJS and the AngularJS resource component -->
<script src="components/angular/angular.js"></script>
<script src="components/angular-resource/angular-resource.js"></script>
<!-- Here we include our own angular scripts -->
<!-- build:js scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
...
</body>
</html>
让我们来看看它的作用!
我们准备首先看一下我们的应用程序。 导航回到应用程序的根目录并运行:
grunt server
咕unt声
Grunt是Java功能强大,功能丰富的任务运行程序。 简而言之,它使您可以自动执行重复性任务,例如编译coffeescript,最小化CSS,代码验证等。我们将使用它来完成所有这些工作,并为开发和部署准备代码。
Grunt将快速浏览我们的项目文件夹并为我们准备一切,例如将随附的Bootstrap SASS编译为CSS。
几秒钟后,将弹出一个浏览器窗口,其中您的应用程序正在运行,看起来很漂亮。
可以肯定的是,查看页面的源代码并查看其中包含的main.css
文件。 它应该充满Bootstrap代码-感谢Bower和Grunt的魔力。
让我们改变它
现在是时候尝试进行一些更改了。 由于这是Angular,因此我们将从AngularJS测试开始。
Yeoman非常友好,可以为我们的控制器生成示例测试,因此让我们从这里开始。
我们将在事物列表中添加另一件事,因此打开test/spec/controllers/main.js
,让我们更改测试以期望4个事物而不是3:
测试/规格/控制器/ main.js
'use strict';
describe('Controller: MainCtrl', function () {
// load the controller's module
beforeEach(module('testApp'));
var MainCtrl,
scope;
// Initialize the controller and a mock scope
beforeEach(inject(function ($controller, $rootScope) {
scope = $rootScope.$new();
MainCtrl = $controller('MainCtrl', {
$scope: scope
});
}));
it('should attach a list of awesomeThings to the scope', function () {
// Change this line
expect(scope.awesomeThings.length).toBe(3);
// To this
expect(scope.awesomeThings.length).toBe(4);
});
});
现在我们可以使用Grunt的另一个强大功能:
grunt test
这将运行我们的业力测试。 他们应该失败,因为测试期望有4个awesomeThings,而我们仍然只有3个。让我们修复该问题以使测试通过。
打开app/scripts/controllers/main.js
并将另一个很棒的东西添加到列表中:
/app/scripts/controllers/main.js
.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma',
'SitePoint'
];
});
保存文件并再次运行测试:
grunt test
这次他们应该通过。 现在,您可以在浏览器(grunt服务器)中启动该应用程序,并注意还有一个要点。 整洁吧?
使用我们的Bower随附包装
让我们使用之前包含的AngularUI Bootstrap库将awesomeThings列表转换为awesomeThings的下拉列表。
重要由于Bower只是一个程序包管理器,因此不负责将我们的文件添加到我们的index.html
文件中。 我们需要自己做。
因此,打开app/index.html
并添加以下行:
<script src="components/angular-bootstrap/ui-bootstrap.js"></script>
然后,根据AngularUI Bootstrap网站上的入门文档,我们需要将其模块作为依赖项添加到我们自己的Angular模块中
打开app/scripts/app.js
并添加ui.bootstrap
模块作为依赖项:
/app/scripts/app.js
'use strict';
angular.module('testApp', ['ui.bootstrap'])
...
好了,可以使用了。 现在我们需要对视图进行一些更改:
视图:app / views / main.html
<ul>
<li class="dropdown">
<a class="dropdown-toggle">
Click me to see some awesome things!
</a>
<ul class="dropdown-menu">
<li ng-repeat="thing in awesomeThings">
<a>{{thing}}</a>
</li>
</ul>
</li>
</ul>
我们使用了一些引导CSS类,并移动了ng-repeat来创建菜单项,而不仅仅是一个简单的旧列表。
AngularUI Bootstrap指令可在类上使用,因此只需将dropdown-toggle类添加到我们的 标签,我们将有一个功能全面的下拉菜单!
我们需要将Bootstrap UI模块添加到我们的测试中,否则它们将失败,因此请进行以下更改:
测试/规格/控制器/ main.js
'use strict';
describe('Controller: MainCtrl', function () {
// load the controller's module
beforeEach(module('testApp'));
// load the BootstrapUI module
beforeEach(module('ui.bootstrap')); // Add this line
...
});
/karma.conf.js
// Karma configuration
// base path, that will be used to resolve files and exclude
basePath = '';
// list of files / patterns to load in the browser
files = [
JASMINE,
JASMINE_ADAPTER,
'app/components/angular/angular.js',
'app/components/angular-mocks/angular-mocks.js',
'app/components/angular-bootstrap/ui-bootstrap.js', // Add this line
'app/scripts/*.js',
...
运行grunt测试以确保一切顺利
现在,您可以再次在浏览器( grunt server
)中打开您的应用程序,并查看您的便捷工作。
结论
好吧,你有它! 一个简单的Angular App,一个第三方JS库,一些测试,缩小以及其他所有功能,而且用最少的精力!
我们只是初步探讨了Yeoman及其同伴的一切可能性,但是我希望这会激发您下次有一个好主意时快速开发AngularJS应用程序!
寻找即将推出的有关AngularJS最佳实践的更多AnuglarJS教程和文章!
本文的评论已关闭。 有关于AngularJS的问题吗? 为什么不在我们的论坛上提问呢?
翻译自: https://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/
yeoman