文档章节

使用Yeoman快速构建基于angular的web应用

snakelxc
 snakelxc
发布于 2013/08/25 16:08
字数 763
阅读 747
收藏 10

前言

最近在学习使用安哥拉(angular.js)编写web应用,看了一些网友实践了解到yeoman,这个工具实在太好用了,必须在这里介绍一下。

angular

首先简单介绍一下angular,它是由google开源的一套js框架,能够在前端实现MVC,再加上后台实现的rest服务就能构成一个完整的web应用了。在这里就不重点讲angular的优势了,想了解可以参考一下这里: angularjs最佳实践

Yeoman

yeoman可以方便web开发者快速构建出一个标准化结构的web项目流程。它不只是一个工具,是一个工作流程,这个工作流程包含了3个工具。

1. Yo  它就是一个脚手架的工具,用于构建一个新的项目框架

2. Grunt  项目的构建工具

3. Bower 包管理,不再需要手动去下载scripts了,呵呵

构建过程

好,那现在来介绍一下如何快速构建一个基于angular的web用于

1) 安装nodejs

yum -y install openssl-devel
cd /tmp
wget http://nodejs.org/dist/node-latest.tar.gz
tar -zxvf node-latest.tar.gz 
cd node-v0.10.17/
./configure 
make && make install

2) 安装generator-angular

使用npm安装generator-angular,会自动把yeoman的3个工具装上。(npm就是nodejs的包管理工具,类似的python的pip,ruby的gem)

npm install -g generator-angular

3) 开始创建项目

先创建目录

mkdir /opt/Myapp && cd $_

创建一个应用叫kisapp,这时候会出现交互,是否使用bootstrap , include哪些angular扩展之类的。

yo angular kisapp

使用包管理,把js下载下来.(默认是不允许root执行的,可以加这样的参数解决 –allow-root)

bower install --allow-root

现在已经把一个基础的环境初始化了,我们加一个web服务,看一下效果吧

#安装nginx

 yum –y install nginx

#修改配置文件

cat > /etc/nginx/nginx.conf << _editnginx

user  nobody nobody; # 出于安全,无特别要求禁止使用root
worker_processes  8; # 推荐配置为CPU核数
error_log  /data/log/error.log  error;
pid        /var/run/nginx.pid; # 此路径不建议更改 

events {
 use epoll;
 worker_connections  81920;
} 

http {
 include       /etc/nginx/mime.types;
 default_type  text/plain;
 access_log  off;
 sendfile        on;
 server_tokens off; # 关闭版本号显示
 keepalive_timeout  120; 

 server {
         listen      80 backlog=8192; # backlog代表此端口允许同时打开(tcp_syn)的最大数量
         server_name  _; # _代表默认域名
         charset utf-8; 

         location / { # 定义首页目录
                 root /opt/Myapp/app; # 指定根目录
                 index  index.html; # 设定默认打开的文档
         } 

         location /status { # 打印Tengine状态页  localhost/status
                stub_status on; # 开启状态页,依赖 http_stub_status_module 模块
                access_log  off; #访问过程不记日志
         } 

} 

}

_editnginx

#这里有个bug, 默认的css文件竟然名字错了

mv /opt/Myapp/app/styles/main.scss  /opt/Myapp/app/styles/main.css

#启动

nginx

4) 浏览器看一下。成功了!

image

后续

整个angular的开发过程都是可以使用yeoman构建的。譬如以下的命令。以coffescript形式生成angular的各个组件

yo angular:route myroute  --coffee

yo angular:controller user --coffee

yo angular:directive myDirective  --coffee

yo angular:filter myFilter  --coffee

yo angular:view user --coffee

yo angular:service myService --coffee

yo angular:decorator serviceName --coffee

© 著作权归作者所有

共有 人打赏支持
snakelxc

snakelxc

粉丝 54
博文 8
码字总数 8513
作品 0
珠海
系统管理员
使用Yeoman快速构建基于angular的web应用

前言 最近在学习使用安哥拉(angular.js)编写web应用,看了一些网友实践了解到yeoman,这个工具实在太好用了,必须在这里介绍一下。 angular 首先简单介绍一下angular,它是由google开源的一套...

kisops
2013/08/25
0
0
AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/miniboo...

liaolzy2
2015/05/31
0
0
使用AngularJS构建大型Web应用

AngularJS是由Google创建的一种JS框架,使用它可以扩展应用程序中的HTML词汇,从而在web应用程序中使用HTML声明动态内容。在该团队工作的软件工程师Brian Ford近日撰写了一篇blog,分享了如何...

吴小编
2013/10/08
0
0
HTML5来了,7个混合式移动开发框架

Posted 周二, 12/30/2014 - 12:18 by admin 在这个时间开始学习移动开发真是最好不过了,每个人应该都有一些移动应用的创意,而且你并不需要任何的原生应用编程经验,你只需要一些HTML的相关...

程序袁_绪龙
2015/01/29
0
0
Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh
05/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

使用rancher界面化管理docker并部署springCloud项目的其中一个服务

一、先来个简单的 1.安装docker 2.安装eureka——运行docker命令安装 3.安装eureka——运行dokcer镜像安装 (1)构建eureka的镜像,网易云的docker镜像比较全一些,也可以去https://hub.docke...

monroeCode
29分钟前
3
0
理论与实践:如何从Hadoop迁移到MaxCompute

摘要:MaxCompute大数据计算服务,能提供快速、完全托管的PB级数据仓库解决方案,能够使用户经济且高效地分析处理海量数据。而用户往往之前使用了Hadoop实现大数据计算任务,在选择了阿里云大...

阿里云云栖社区
29分钟前
2
0
mysql: utf8 && utf8mb4

https://mathiasbynens.be/notes/mysql-utf8mb4 临时收藏

阿dai
41分钟前
2
0
面试宝典系列-nginx限流

Nginx自身有的请求限制模块ngx_http_limit_req_module、流量限制模块ngx_stream_limit_conn_module基于令牌桶算法,可以方便的控制令牌速率,自定义调节限流,实现基本的限流控制。 如何Ngi...

suyain
41分钟前
3
0
下拉框选择数据过滤?

需求:下拉框数据新增一条数据,已选择的不能再重新被选择 数据:存放表格数据的数组 scoreTable 下拉框数据 catorgaryArr 定义一个已经选择了的id数组 catorgaryIds 实现: arr 使用来保存每...

西园里的猫
46分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部