好久没有用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生成器可以创建AngularJS项目,并可以编写代理服务器并将远程服务器用作后端。 大概的概念 如果您是前端开发人员,并且有人在编写后端,那么这就是您的生成器。 只编写前端代码并使用远程后端。 如果需要,您...
mydodo 该演示演示了如何在Windows操作系统开发环境中使用Yeoman构建AngularJS应用程序Mytodo 。在Windows环境下用Yeoman生成的AngularJS项目Mytodo...中将介绍如何一步一步在Windows环境下用Yeoman创建AngularJS项目。
简单的 AngularJS 项目这是一个使用 Yeoman 创建的基本 AngularJS 项目。 它可用于使用 AngularJs 进行简单的测试。 该项目已经包括 Bootstrap 和 Sass。如何使用它只需在您想要的任何位置克隆此存储库并运行以下...
AngularJS 项目 Yeoman - 现代网络应用程序的脚手架工具 Bower - 使用 bower 进行包管理,加载外部库 咕噜声 运行 bower bower.json 加载所有外部包(angularJs、Jquery、bootstrap ...) 运行 grunt server 创建...
ARY 生成器代表 - - ,该项目的目标是与所有需要的东西共享一个 yeoman 生成器,以使用该技术创建一个简单的项目。 #包括什么 用于企业或小型项目的 AngularJS 不错的文件夹分发 使用 grunt 的 css 连接和缩小 ...
您可以在几秒钟内创建一个简单的项目2.使用方法要从npm安装generator-japs,请运行: npm install -g yonpm install -g generator-japs 最后,启动生成器: yo japs 回答一些问题,就是这样! 您的项目已创建。我们...
首先使用一个命令获取 、 和这个生成器: $ npm install -g yo generator-ui-prototype 然后新建一个项目: mkdir my-cool-project && cd $_ yo ui-prototype 启动你的引擎... grunt 最后一个命令应该在...
arcular 新建一个目录$ mkdir my-angular-project && cd $_ 启动生成器$ yo arcular [app-name]用法要构建项目,请使用 Grunt: $ grunt 要设置本地预览: $ grunt serve环境这个生成器使用 constant 在你的 ...
为您的项目创建一个新文件夹: mkdir my-angular-app 从新文件夹中运行生成器:注意名称是可选的 cd my-angular-app slush yangular name 任务 生成额外的脚本和文件。 基于 Yeoman 的 AngularJS 生成器: slush...
:face_blowing_a_kiss:用法中的更多信息,选项和参数安装安装所需的工具yo , gulp和bower : npm install -g yo gulp bower安装generator-gulp-angular : npm install -g generator-gulp-angular跑创建一个新目录...
generator-angular, AngularJS的文书生成器 AngularJS发生器 用于AngularJS的文书生成器- 允许你快速设置具有合理默认值和最佳实践的项目。创建新的Angular 单页应用程序有许多起点,除这里之外。 你可以在 Yeoman....
创建一个目录,然后cd进入它: mkdir my-project && cd $_ 如果要使用数据库选项,请确保已安装并在路径中包含psql 。 运行yo angular-express ,可选择传递应用程序名称: yo angular-express [app-name] 你...
BatAngularJs | 约曼发电机 Generator-BatAngularJs是一个很棒的AngularJs生成器,它可以为您的AngularJs应用程序提供支持,并为您提供具有子生成器,webpack,eslint,sass和ES2015功能的出色开发工具包!...
这个 yeoman 生成器通过创建 Telosys 工具配置来初始化一个空项目。 您只需回答问题,您就可以在具有 Telosys Tools 插件的 eclipse 中导入此项目。 您将能够使用 Telosys 工具生成您的应用程序。教程安装 yeoman ...
[Jhipster] ( ) 是一个 Yeoman Generator,用于创建 Spring + AngularJS 项目。测试使用 repo [metrics-spark-receiver] ( ) 进行测试以向 Spark Streaming 测试报告。 使用 Maven 命令运行 Jhipster 应用程序: $ ...
发电机角摇杆这个项目是来自Yeoman生成器的AngularJS + Gulp的一个分支。 使您可以使用以下命令快速设置项目: 您最喜欢的技术网络最佳实践。 Gulp提供快速反馈的快速工作空间。用法中的更多信息,选项和参数安装...
app/--- css/--- index.html--- js/----- main.js--- lib/- bower.json- bower_components/- node_modules/- package.json发展在您的文件夹项目中,我们只有一个任务要运行,即Grunt默认值,您可以运行: grunt , ...
用于 AngularJS 的种子项目 为您提供 Yeoman 生成器以使用以下工作流程启动 Web 应用程序: 目的 该项目种子中使用的侧重于按功能(主页、关于、视频播放器等)而不是按类型(控制器、服务、指令等)组织 Angular ...
你可以把发电机想象成一个插件。 您可以选择要创建的应用程序类型,例如 Backbone 应用程序甚至 Chrome 扩展程序。 要从 npm 安装 generator-nutsweb-angular,请运行: npm install -g generator-nutsweb-angular...
首先创建angularjs的基本项目就不说了,最好是利用yeoman这个脚手架工具直接生成,如果没有该环境的,当然也可以通过自行下载angularjs的文件引入项目。 实例详解 main.js是项目的主要js文件,所有的js都写在这个文件...