angularjs sill 创建项目_AngularJS从构建项目开始

AngularJS体验式编程系列文章，将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，angularjs能脱颖而出，从架构设计上就高人一等，双向数据绑定，依赖注入，指令，MVC，模板。Angular.js创新地把后台技术融入前端开发，扫去jQuery一度的光芒。用angularjs就像写后台代码，更规范，更结构化，更可控。

关于作者

张丹(Conan), 程序员Java,R,PHP,Javascript

weibo：@Conan_Z

email: bsspirit@gmail.com

转载请注明出处：

前言

随着AngularJS被越来越多的开发人员所了解，AngularJS的应用受到市场的好评。AngularJS是一种新型的以Javascript为基础的框架，以后台的编程思路影响着web前端的开发。在扎根细节之前，让我们先了解AngularJS项目构架。自顶向下的开始，就是不一样的开发。Angular体验式编程从此开始。

目录

AngularJS介绍

构建AngularJS项目(Yeoman，angular-seed)

AngularJS项目结构(Yeoman)

AngularJS必备基础

启动项目

1. AngularJS介绍

AngularJS是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言，通过扩展HTML的语法，让你能更清楚、简洁地构建你的应用组件。它的创新点在于，利用 数据绑定 和 依赖注入，它使你不用再写大量的代码了。这些全都是通过浏览器端的Javascript实现，这也使得它能够完美地和任何服务器端技术结合。

AngularJS介绍，摘自：http://angularjs.cn/A00n

2. 构建AngularJS项目(Yeoman，angular-seed)

说到构建项目，目前我了解的有三种：

手工项目: 自己建目录，下载类库，写html,js,css，自己实现引用关系

angular-seed项目: 下载github的angular-seed，在别人的基础之上开发

Yeoman项目：通过Yeoman下载一个标准Yeoman项目，已经内置了grunt及各种工具包

1). 手工项目

构建手工项目是我们平时用的最多的一种方式了，适用于小型或demo项目。我不在解释，参照angularjs一步一步操作就行了。

2). angular-seed项目

一般把这个项目称为angular的“种子项目”，构建方法是去github下载项目源代码，基于已有项目结构再做开发。这种项目都融入了前人的经验，会以一种比较合理的结构，帮我们构建出项目的原型。适合于有一定规模项目开发，同时更适合geek的扩展。

下载演示一下构建过程

~ D:\workspace\javascript>git clone https://github.com/bsspirit/angular-seed.git

Cloning into 'angular-seed'...

remote: Counting objects: 1007, done.

remote: Compressing objects: 100% (497/497), done.

emote: Total 1007 (delta 521), reused 847 (delta 412)

Receiving objects: 100% (1007/1007), 6.30 MiB | 164 KiB/s, done.

Resolving deltas: 100% (521/521), done.

~ D:\workspace\javascript>cd angular-seed

~ D:\workspace\javascript\angular-seed>node scripts\web-server.js

Http Server running at http://localhost:8000/

打开浏览器：http://localhost:8000/app/index.html

通过阅读READMD.md，我们可以了解这个”种子项目”如何使用。

项目目录及介绍

## Directory Layout

app/ --> all of the files to be used in production

css/ --> css files

app.css --> default stylesheet

img/ --> image files

index.html --> app layout file (the main html template file of the app)

index-async.html --> just like index.html, but loads js files asynchronously

js/ --> javascript files

app.js --> application

controllers.js --> application controllers

directives.js --> application directives

filters.js --> custom angular filters

services.js --> custom angular services

lib/ --> angular and 3rd party javascript libraries

angular/

angular.js --> the latest angular js

angular.min.js --> the latest minified angular js

angular-*.js --> angular add-on modules

version.txt --> version number

partials/ --> angular view partials (partial html templates)

partial1.html

partial2.html

config/karma.conf.js --> config file for running unit tests with Karma

config/karma-e2e.conf.js --> config file for running e2e tests with Karma

scripts/ --> handy shell/js/ruby scripts

e2e-test.sh --> runs end-to-end tests with Karma (*nix)

e2e-test.bat --> runs end-to-end tests with Karma (windows)