yeoman_与Yeoman，Grunt和Bower一起启动AngularJS开发

最新推荐文章于 2024-05-03 16:12:22 发布

dingshi7798

最新推荐文章于 2024-05-03 16:12:22 发布

阅读量85

点赞数

文章标签： java python vue javascript 大数据 ViewUI

原文链接：https://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/

版权

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

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
yeoman_与Yeoman，Grunt和Bower一起启动AngularJS开发

yeoman 无论您是喜欢还是讨厌它，都不能否认AngularJS是每个开发人员都喜欢的框架。可能并不适合每个人，但AngularJS具有一个古怪，高效且强大的功能集。再加上一些有用的开发工具，如Yeoman，Grunt和Bower，您将获得一个非常快的快速原型制作过程。我们将介绍的内容此AngularJS教程将涵盖：用Yeoman生成裸露的AngularJS应用使用...
复制链接

扫一扫