Angularjs 个人认为这是一款很好的框架!它将我们从AJAX应用的开发中解救了出来!嗯。。。。废话就说道这里下面我们开始把!

  

  首先我们必须了解一些核心的概念:

  1. 客户端模版
  2. MVC
  3. 数据绑定
  4. 依赖注入
  5. 指令

  

  先不要着急,了解这些词语的意思和含义,万丈高楼平地起我们慢慢来构建一个属于我们自己的小应用。

  

  

  • 确定我们的目标

   首先我们必须确定自己要做什么?做个什么呢?YOUKU TUDOU那样的视频网站,哦,拜托杀了我把,我只想了解下这个东西,嗯!那就写个简单的博客吧!你还是杀了我把,由于本人太懒,所以就做个登录注册的应用好了,对啊因为登录注册到哪里都需          要,所以我决定把他写成一个基于ANGULAR的小框架!

  • 我们需要准备什么

   好的确定了目标我们需要准备些什么呢?扳手啊!锤子啊!钉子啊!。。。。乱七八糟的一大堆,头已经晕掉了!

   确实在现实生活中,如果我们要做一个应用需要至少列个清单准备这样或者那样的东西,这真是令人头疼的一件事情,对于这么懒的我来说,你还是杀了我把!

   所以我决定寻找一款项目构建工具,在GOOGLE一段时间后!呵呵,YEOMAN 出现在了我的视野当中,这完全就是为我们前端开发者量身打造的啊!

  

  • 了解 配置 YEOMAN

唉懒得打字了 所以我决定COPY一段别人的介绍

   

Yeoman是Google的团队和外部贡献者团队合作开发的,他的目标是通过Grunt(一个用于开发任务自动化的命令行工具)和Bower(一个HTML、CSS、Javascript和图片等前端资源的  包管理器)的包装为开发者创建一个易用的  工作流。

 
Yeoman的目的不仅是要为新项目建立工作流,同时还是为了解决前端开发所面临的诸多严重问题,例如零散的依赖关系。
 
Yeoman主要有三部分组成:yo(脚手架工具)、grunt(构建工具)、bower(包管理器)。这三个工具是分别独立开发的,但是需要配合使用,来实现我们高效的工作流模式。
 
下面这幅图很形象的表明了他们三者之间的协作关系。
YOMAN的特性
 
闪电般的初始化:项目开始阶段,可以基于现有的模板框架(例如:HTML5 Bolierplate、Twitter Bootstrap)进行项目初始化的快速构建。
了不起的构建流程:不仅仅包括JS、CSS代码的压缩、合并,还可以对图片和HTML文件进行优化,同时对CoffeScript和Compass的文件进行编译。
自动编译CoffeScript和Compass:通过LiveReload进程可以对源文件发生的改动自动编译,完成后刷新浏览器。
自动Lint代码:对于JS代码会自动进行JSLint测试,确保代码符合最佳编程实践。
内置的预览服务器:不再需要自己配置服务器了,使用内置的就可以快速预览。
惊人的图片优化:通过使用OptiPNG和JPEGTran来优化图片,减少下载损耗。
杀手级包管理:通过bower search jQuery,可以快速安装和更新相关的文件,不再需要打开浏览器自己搜索了。
PhantomJS单元测试:可以非常方便的使用PhantomJS进行单元测试,一切在项目初始的时候都准备好了
 
呵呵多好(http://www.cnblogs.com/cocowool/archive/2013/03/09/2952003.html) 感谢这位博友吧!
 
下面我简单说下应该怎么安装YEOMAN 在WINDOWS下面
 

打开 cmd.exe

  1. 安装Chocolatey NuGet
  2. 安装 node.js and ruby
    1. cinst ruby1.9 (the "ruby" package installs ruby 2.0, which might not work)
  3. 重启 cmd.exe
  4. gem install compass --pre  (这个我觉得无所谓可以不装)
  5. npm install -g yo grunt-cli bower  这个命令必须执行
  6. 需要安装GIT 自己去下吧
  7. 重启CMD运行 yeoman
  8. 这个英文原版是https://gist.github.com/jaromero/9964937这里,大家可以自己去看哦!

  

  额!我还忘了一点,WINDOWS用户需要配置好YEOMAN 的环境变量哦!要不然CMD 命令是会找不到的

  

  嗯!今天就这样吃饭去了,下一节我们来构建应用骨架。

基于ANGULAR.JS的下一代WEB应用开发-01-yeoman的更多相关文章

  1. App.js – 用于移动 Web App 开发的 JS 界面库

    App.js 是一个轻量级的 JavaScript UI 库,用于创建像本地应用程序的移动 Web 应用而不牺牲性能和体验.它是跨平台的,特定的UI设计,配置类似原生的过渡效果.App.js 的目的是 ...

  2. Angular JS | Closure | Google Web Toolkit | Dart | Polymer 概要汇集

    AngularJS | Closure | Google Web Toolkit | Dart | Polymer GWT https://code.google.com/p/google-web-t ...

  3. Angular-chart.js 使用说明(基于angular.js工程)

    Angular-chart.js是基于Chart.js的angular组件,引入项目后直接操作数据即可. 引用方法:    分别将Chart.js.angular-chart.js.angular-c ...

  4. 基于.Net Framework 4.0 Web API开发(4):ASP.NET Web APIs 基于令牌TOKEN验证的实现

    概述:  ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题, ...

  5. Node.js学习(12)----Web应用开发

    1.使用http模块 Node.js 由于不需要另外的 HTTP 服务器,因此减少了一层抽象,给性能带来不少提升, 但同时也因此而提高了开发难度.举例来说,我们要实现一个 POST 数据的表单,例如: ...

  6. 基于.Net Framework 4.0 Web API开发(2):ASP.NET Web APIs 参数传递方式详解

    概述:  ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.调用API过程中参数的传递是必须的,本节就来谈谈 ...

  7. 基于.Net Framework 4.0 Web API开发(3):ASP.NET Web APIs 异常的统一处理Attribute 和统一写Log 的Attribute的实现

    概述:  ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是项目,总有异常发生,本节就来谈谈API的异常 ...

  8. 基于.Net Framework 4.0 Web API开发(5):ASP.NET Web APIs AJAX 跨域请求解决办法(CORS实现)

    概述:  ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特 ...

  9. 基于 Node.js 平台的web开发框架-----express

    express官网:---->传送门  express express框架有许多功能,比如路由配置,中间件,对于想配置服务器的前端来说,非常便捷 自从node发展之后,基于nodejs的开发框架 ...

随机推荐

  1. 借助ltp 逐步程序化实现规则库 文本生成引擎基于规则库和业务词库 去生成文本

    [哪个地方做什么的哪家靠谱?地名词库行业.业务词库]苏州做网络推广的公司哪家靠谱?苏州镭射机维修哪家最专业?昆山做账的公司哪家比较好广州称重灌装机生产厂家哪家口碑比较好 [含有专家知识]郑州律师哪个好 ...

  2. Responsive Nav

    引入文件 <!-- 引入这些文件至 <head> 中 --> <link rel="stylesheet" href="responsive ...

  3. how to use datatables editor

    Basic initialisation Editor is a Create, Read, Update and Delete (CRUD) extension forDataTables that ...

  4. js常用操作事件

    触发描述 方法 用法 点击 onclick="method();"   变换 onchange="testChange();"   双击 ondblclick= ...

  5. get the page name from url

    https://stackoverflow.com/questions/1874532/better-way-to-get-page-name The way I interpret the ques ...

  6. 初识Spring Boot框架和快速入门

    前面的铺垫文章已经连着写了六篇了,主要是介绍了spring和SpringMVC框架,小伙伴们在学习的过程中大概也发现了这两个框架需要我们手动配置的地方非常多,不过做JavaEE开发的小伙伴们肯定也听说 ...

  7. leetcode 戳气球

    有 n 个气球,编号为0 到 n-1,每个气球上都标有一个数字,这些数字存在数组 nums 中. 现在要求你戳破所有的气球.每当你戳破一个气球 i 时,你可以获得 nums[left] * nums[ ...

  8. MySql LOAD DATA 使用

    load的语法 LOAD DATA [LOW_PRIORITY | CONCURRENT] [LOCAL] INFILE 'file_name.txt' [REPLACE | IGNORE] INTO ...

  9. Windows Hadoop安装

    由于hadoop版本2.7.1对其他相关工具兼容较好,本文以此版本为例. 一.下载解压 各镜像站现已没有这个版本,所以去Apache官网下载 http://www.apache.org/dyn/clo ...

  10. html5 canvas+js实现ps钢笔抠图(速抠图 www.sukoutu.com)

    html5 canvas+js实现ps钢笔抠图(速抠图 www.sukoutu.com)   根据html5 canvas+js实现ps钢笔抠图的实现,aiaito 开发者开发了一套在线抠图工具,速抠 ...