AngularJS -- 使用AngularJS进行开发 liujj@golden-tech liujj@golden-tech.

Presentation on theme: "AngularJS -- 使用AngularJS进行开发 liujj@golden-tech liujj@golden-tech."— Presentation transcript:

1 AngularJS -- 使用AngularJS进行开发

2 Yeoman 推荐使用Yeoman（http://yeoman.io/）开发项目，它可以创建所有必需的文件以便启动你的AngularJS应用
window下如何安装Yeoman参照另外一份文档

3 项目结构 JS源文件 HTML型的Angular模板文件 JS库依赖 静态资源 单元测试 集成测试 配置文件 app/scripts
first_angular │ bower.json │ Gruntfile.js │ package.json │ ・・・ │ ├─.tmp │ └─styles │ main.css ├─app │ │ .buildignore │ │ .htaccess │ │ 404.html │ │ favicon.ico │ │ index.html │ │ robots.txt │ │ │ ├─images │ │ yeoman.png │ ├─scripts │ │ │ app.js │ │ │ │ │ └─controllers │ │ about.js │ │ main.js │ ├─styles │ │ main.css │ └─views │ about.html │ main.html 项目结构 JS源文件 app/scripts app/scripts/controllers HTML型的Angular模板文件 app\views JS库依赖 app/scripts/vendor 静态资源 app/style app/images 单元测试 test/spec 集成测试 test/e2e（默认不创建） 配置文件 karma.conf.js karma.e2e.conf.js（默认不创建） ├─bower_components │ ├─angular │ ├─bootstrap │ ├─jquery │ └─・・・ ├─node_modules │ ├─grunt └─test │ .jshintrc │ karma.conf.js └─spec └─controllers about.js main.js

4 IDE WebStorm \\liujj\GT.NET\AngularJS\install\WebStorm 支持AngularJS

5 新建AngularJS项目 创建目录 进入目录 使用Angular生成器生成项目文件 启动web服务 mkdir project_name
cd project_name 使用Angular生成器生成项目文件 yo angular 启动web服务 grunt serve

6 Karma 能让基于测试驱动开发（test-driven development,TDD）的流程变得更加简单、快速、并且有趣
它使用NodeJS和SocketIO来运行代码，并且可以在多种浏览器中及其快速地进行测试工作 安装Karma npm install -g karma npm install -g karma-cli npm install -g phantomjs cd到项目目录下执行下面命令 npm install -g phantomjs npm install grunt-karma karma-ng-html2js-preprocessor karma-ng-scenario --save-dev

7 单元测试 describe('MyController:', function () { it('to work correctly', function () { var a = 12; var b = a; expect(a).toBe(b); expect(a).not.toBe(null); }); });

8 执行测试 grunt test 未启动成功，一直有下面的错误，还未解决
PhantomJS (Windows Vista): Executed 0 of 0 ERROR (0.001 secs / 0 secs) Warning: Task "karma:unit" failed. Use --force to continue.

9 端到端/集成测试 describe('Search Results:', function () { beforeEach(function() { browser().navigateTo(' }); it('should filter results', function () { input('searchBox').enter('jacksparrow'); element(':button').click(); expect(repeater('ul li').count()).toEqual(10); input('filterText').enter('Bees'); expect(repeater('ul li').count()).toEqual(1); }); });

10