`

用Yeoman创建一个angularjs项目

 
阅读更多
       好久没有用AngularJs了,由于最近要做分享,所以正好整理一下创建AngularJs项目的过程;
       AngularJS是一个用于开发动态Web应用的JavaScript框架。AngularJS能够操作HTML使之动态地发生改变,而不是一个单纯的静态文档,它提供了像数据绑定和依赖注入这样的高级特定来简化应用的开发。
       有人又会问Yeoman是什么?Yeoman是一个web应用开发部署的工具,但同时它也规范了现代web应用开发流程。它是一组工具(Yo,Grunt,Bower)的组合,也是一套让web开发过程更加规范轻松的最佳实践。其实Yeoman是由yo(脚手架),grunt(build工具)和bower(package管理):
      (1)yo新应用的脚手架,编写你自己的grunt配置文件,并且获取你项目build过程当中可能使用到的grunt tasks。
      (2)Grunt 主要用来build,预览和测试你的项目,已经内置了很多由Yeoman团队和grunt-contrib提供的task。
      (3)Bower 主要用于依赖管理,开发人员不需要手动去管理和下载相应的包,以及处理他们之间的依赖关系。

下面正式开始我们的项目
环境要求:
       在安装Yeoman之前要先安装NodeJs和npm;
安装Yeoman:
       安装Yeoman其实是安装yo,grunt和bower,在命令行输入
 $ npm install -g yo grunt-cli bower

       命令执行完毕在命令行输入
$ yo --version && bower --version && grunt --version
命令会输出工具包的版本,这样Yeoman就安装完毕了。
yo
       yo是用来生成项目的脚手架。它会迅速帮助我们创建基本的目录结构,配置文件等让你迅速有一个可用的项目基础。当然除了最基础的目录项目结构之外,还有一些非常强大的定制化的生成器,来为你搭建基于特定框架的项目结构。接下来我们会使用AngularJS的生成器来为我们生成AngularJS的项目结构。
       使用AngularJs生成器之前,需要先安装生成器,在命令行运行:
$ npm install -g generator-angular

       然后使用它来生成AngularJs项目的基本结构,下面创建一个AngularExe项目目录,进到项目下执行如下命令:
yo  angular

命令执行后生成器会以问问题的方式帮你设置项目中可能会使用的一些其他框架或者库,如sass,bootstrap等。回答完问题后AngularJs项目就已经生成完毕了
在浏览器中查看应用
       项目创建完毕可以执行grunt serve运行应用
grunt serve

       运行命令后本地会启动一个基于Node的http服务。通过浏览器访问http://localhost:9000就可以看到你的应用了。
分享到:
评论

相关推荐

    yeoman generator for Angularjs 前端开发神器

    而yeoman generator for Angularjs,就是这个强大的工具集中的一个重要组成部分,它是一个基于Yeoman工作流的生成器,专门针对AngularJS项目,旨在提升开发效率,减少重复性工作。 **Yeoman工作流简介** Yeoman是...

    项目中用Yeoman构建AngularJS

    在我们的案例中,"项目中用Yeoman构建AngularJS",意味着我们要使用一个专门针对AngularJS的Yeoman Generator。这个Generator通常会为你创建一个包含基本目录结构、配置文件和依赖的AngularJS项目。常见的AngularJS ...

    基于yeoman快速搭建AngularJS框架的HTML5 app.zip

    在“Angular-app-master”这个文件夹中,你将找到一个已经初始化好的AngularJS项目结构,包括以下几个关键部分: 1. `app`目录:包含应用程序的源代码,如控制器、服务、指令等。 2. `bower_components`或`node_...

    generator-angular-proxy:Yeoman生成器可创建AngularJS项目,并可能编写您的代理服务器并将远程服务器用作您的后端

    Yeoman生成器可以创建AngularJS项目,并可以编写代理服务器并将远程服务器用作后端。 大概的概念 如果您是前端开发人员,并且有人在编写后端,那么这就是您的生成器。 只编写前端代码并使用远程后端。 如果需要,您...

    FirstAngularJS:第一个使用 AngularJS 和 YEOMAN 的应用程序......

    2. **创建项目**:运行 `yo angular <项目名>`,这将生成一个包含基础目录结构的 AngularJS 项目。 3. **构建应用**:在项目根目录下,使用 `gulp serve` 或 `grunt serve`(根据项目配置)启动开发服务器并自动...

    widgetFactory:Yeoman AngularJS 示例

    "widgetFactory"项目是利用Yeoman工具创建的一个AngularJS应用示例。Yeoman是一款现代化的开发工作流工具,它通过提供脚手架生成器帮助开发者快速搭建项目结构。在这个例子中,项目使用的是版本0.11.1,意味着它遵循...

    mytodo:该演示演示了如何在Windows操作系统开发环境中使用Yeoman构建AngularJS应用程序Mytodo。

    mydodo 该演示演示了如何在Windows操作系统开发环境中使用Yeoman构建AngularJS应用程序Mytodo 。在Windows环境下用Yeoman生成的AngularJS项目Mytodo...中将介绍如何一步一步在Windows环境下用Yeoman创建AngularJS项目。

    yeoman构建的bootstrapgulp的单页项目

    【标题】:“yeoman构建的bootstrap gulp的单页项目”是指使用Yeoman工具,结合Bootstrap框架和Gulp工作流来创建的一个单页面应用程序(SPA)项目。 Yeoman是Web开发中的一个自动化工具,旨在帮助开发者快速搭建应用...

    simple-angularjs-project

    简单的 AngularJS 项目这是一个使用 Yeoman 创建的基本 AngularJS 项目。 它可用于使用 AngularJs 进行简单的测试。 该项目已经包括 Bootstrap 和 Sass。如何使用它只需在您想要的任何位置克隆此存储库并运行以下...

    meanjs-yeoman:使用 yeoman 创建的 MEAN.JS 应用程序

    使用 `meanjs-yeoman` 生成器,你可以简单地初始化一个新的MEAN.JS应用程序。首先,确保安装了Node.js和npm,这是Yeoman的基础。然后,通过命令行运行以下命令安装Yeoman和MEAN.JS生成器: ```bash npm install -g ...

    generator-ng-module:Yeoman angularjs-模块生成器

    `generator-ng-module` 是一个基于 Yeoman 的生成器,专为 AngularJS 开发者设计,用于快速创建和初始化 AngularJS 模块。这个工具旨在提高开发效率,通过自动化流程帮助开发者避免手动编写重复性的结构代码,从而将...

    angular1.x-datos:AngularJS 项目

    AngularJS 项目 Yeoman - 现代网络应用程序的脚手架工具 Bower - 使用 bower 进行包管理,加载外部库 咕噜声 运行 bower bower.json 加载所有外部包(angularJs、Jquery、bootstrap ...) 运行 grunt server 创建...

    yeoman-angular-tutorial:学习如何使用 Yeoman 生成 Angular 应用程序

    `Yeoman` 是一个自动化工作流工具,用于简化项目设置和结构,而 `AngularJS` 是一个强大的 JavaScript 框架,专注于构建动态单页应用(SPA)。让我们深入探讨这两个工具以及如何结合使用它们。 **一、Yeoman 简介**...

    ary:angularJs RequireJS Yeoman 生成器

    ARY 生成器代表 - - ,该项目的目标是与所有需要的东西共享一个 yeoman 生成器,以使用该技术创建一个简单的项目。 #包括什么 用于企业或小型项目的 AngularJS 不错的文件夹分发 使用 grunt 的 css 连接和缩小 ...

    基于AngularJS实现iOS8自带的计算器

    在创建项目后,我们得到一个名为main.js的文件,它通常是AngularJS项目的入口文件,主要的JavaScript代码都放在这里。在main.js中定义的模块是我们应用的主模块,它的代码如下: ```javascript angular.module('...

    AngularJS-Yeoman:Yeoman 工作流由三个核心工具组成,用于在构建 Web 应用程序时提高您的生产力和满意度

    通过安装不同的生成器,Yo可以帮助开发者快速创建AngularJS项目、Express后端服务器、React组件等。例如,对于AngularJS项目,Yo可以一键生成基础目录结构、配置文件、模块、控制器和服务,从而免去了手动编写这些...

    generator-japs:Yeoman Generator可以在几秒钟内创建Java(JAX-RS),AngularJS和PostgreSQL项目!

    您可以在几秒钟内创建一个简单的项目2.使用方法要从npm安装generator-japs,请运行: npm install -g yonpm install -g generator-japs 最后,启动生成器: yo japs 回答一些问题,就是这样! 您的项目已创建。我们...

Global site tag (gtag.js) - Google Analytics