文档章节

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

snakelxc
 snakelxc
发布于 2013/08/25 16:08
字数 763
阅读 764
收藏 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
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

oschina
2015/03/05
67.5K
19
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
为 Web 开发者准备的 15 最棒 AngularJS 工具

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

oschina
2015/05/08
6.2K
25
全 Javascript 的 Web 开发架构:MEAN

引言 最近在Angular社区的原型开发者间,一种全Javascript的开发架构MEAN正突然流行起来。其首字母分别代表的是:(M)ongoDB——NoSQL的文档数据库,使用JSON风格来存储数据,甚至也是使用JS来...

疯狂的流浪
2014/04/02
4.5K
5

没有更多内容

加载失败,请刷新页面

加载更多

Linux Wireshark普通用户启动使用方案

当系统安装好Wireshark后请正常启动是否可以进行正常使用,如果不行请参考下列指导 向系统添加一个用户组 sudo groupadd wireshark //如提示此组存在可跳过 将指定用户添加到这个组中 sudo...

CHONGCHEN
今天
1
0
CSS 选择器参考手册

CSS 选择器参考手册 选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。...

Jack088
今天
2
0
数据库篇一

数据库篇 第1章 数据库介绍 1.1 数据库概述  什么是数据库(DB:DataBase) 数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以对数据库中的数据...

stars永恒
今天
4
0
Intellij IDEA中设置了jsp页面,但是在访问页面时却提示404

在Intellij IDEA中设置了spring boot的jsp页面,但是在访问时,却出现404,Not Found,经过查找资料后解决,步骤如下: 在Run/Debug Configurations面板中设置该程序的Working Directory选项...

uknow8692
昨天
4
0
day24:文档第五行增内容|每月1号压缩/etc/目录|过滤文本重复次数多的10个单词|人员分组|

1、在文本文档1.txt里第五行下面增加如下内容;两个方法; # This is a test file.# Test insert line into this file. 分析:给文档后增加内容,可以用sed 来搞定;也可以用while do done...

芬野de博客
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部