基于ANGULAR.JS的下一代WEB应用开发-01-yeoman

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

时间: 2024-10-30 03:32:58

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

Express - 基于 Node.js 平台的 web 应用开发框架

Web 应用 Express 是一个基于 Node.js 平台的极简.灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用. API 丰富的 HTTP 快捷方法和任意排列组合的 Connect 中间件,让你创建健壮.友好的 API 变得既快速又简单. 性能 Express 不对 Node.js 已有的特性进行二次抽象,我们只是在它之上扩展了 Web 应用所需的基本功能. LoopBack 提供赞助 Develop model-driven apps wit

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

概述:  ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题, 特别各种APP万花齐放的今天,对API使用者身份角色验证是不能避免的(完全开发的API不需要对使用者身份角色进行管控,可以绕过),这篇文章就来谈谈基于令牌TOKEN身份验证的实现. 问题: 对于Web API的选择性的开放,使用者无论使用AJAX,还是HttpClient对接,总要对使用者的身份角色

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

概述:  ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特别各种APP万花齐放的今天,API的跨域请求是不能避免的. 在默认情况下,为了防止CSRF跨站的伪造攻击(或者是 javascript的同源策略(Same-Origin Policy)),一个网页从另外一个域获取数据时就会收到限制.有一些方法可以突破这个限制,那就是大家熟知的JSONP, 当然这只是

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

概述:  ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是项目,总有异常发生,本节就来谈谈API的异常的统一处理和写统一写log逻辑的解决方案. 问题: 在ASP.NET Web API编写时,如果每个API都写异常处理逻辑,不但加大了开发工作量,且每个开发人员处理异常返回的数据结构也不尽相同,在异常发生情况下,客户端处理异常的逻辑就不再通用,也同时加大了对接接口人员的工作量,好的API错误码和错误

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

概述:  ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.调用API过程中参数的传递是必须的,本节就来谈谈API使用过程中参数的传递方式. 各种参数传递方式的实现: ASP.NET Web API参数有两种传递方式,一种是请求时携带QueryString,对应API 开发中的FromUrlAttribute属性,也是参数传递默认属性,并且每个API可以含有多个此类型的参数,主要应对GET请求,但此种方式

通过Web Api 和 Angular.js 构建单页面的web 程序

在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的页面,比如说:用户通过一个连接导航到一个页面,会发送一个请求到服务器端,接下来服务器将会发送一个新的页面给浏览器. 但是在单页面应用程序中,整个页面只是在浏览器一开始请求的时候才会加载,接下来的请求,下来的交互请求都是通过ajax 来完成的,这就意味着只有部分的页面会更新,并不需要去加载整个的页面,这就减少了对用户操作的响应时间,从而使用户有一个更流畅的体验.但是在传统

开发Ionic应用前Angular js必备知识

Angular js是一个Web应用框架,它极其流行,已经成为目前使用最广泛的Javascript工具之一.Ionic基于AngularJS构建而成,所以学习一些AngularJS的知识很有必要.Ionic并没有独立开发一套完整的Web应用框架,而是对AngularJS进行了扩展,给它添加了大量界面组件和其他的移动端友好的特性. 本篇文章会带你了解AngularJS的核心知识并介绍一些基础知识.我们学会控制器,顾名思义,它会控制(control)你的数据.接着我们介绍作用于,它会连接控制器和用户

爱创课堂2016年Angular.JS前端开发从入门到上手企业开发视频教程(完整版)

资源网盘: 2016年Angular.JS从入门到上手企业开发 链接: https://pan.baidu.com/s/1dF2vBzV 密码: 3hbk 免费学习网站地址:http://www.icketang.com/ AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事.AngularJS试图成为WEB应用中的一种客户端的解决

Angular JS + Express JS入门搭建网站

3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外配合Bootstrap提供的很多控件以及JQuery,后台主要是Express JS搭建的Web Server,Express JS配合Nginx使用非常方便. 由此在项目不忙的时候,自己于是有时间和兴趣学习一下Angular JS与Express JS. 同时自己实现了一个最简单的Angular