AngularJS -- 使用AngularJS进行开发 liujj@golden-tech liujj@golden-tech
Yeoman 推荐使用Yeoman(http://yeoman.io/)开发项目,它可以创建所有必需的文件以便启动你的AngularJS应用 window下如何安装Yeoman参照另外一份文档 liujj@golden-tech
项目结构 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
IDE WebStorm \\liujj\GT.NET\AngularJS\install\WebStorm 支持AngularJS liujj@golden-tech
新建AngularJS项目 创建目录 进入目录 使用Angular生成器生成项目文件 启动web服务 mkdir project_name cd project_name 使用Angular生成器生成项目文件 yo angular 启动web服务 grunt serve liujj@golden-tech
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 liujj@golden-tech
单元测试 describe('MyController:', function () { it('to work correctly', function () { var a = 12; var b = a; expect(a).toBe(b); expect(a).not.toBe(null); }); }); liujj@golden-tech
执行测试 grunt test 未启动成功,一直有下面的错误,还未解决 PhantomJS 1.9.8 (Windows Vista): Executed 0 of 0 ERROR (0.001 secs / 0 secs) Warning: Task "karma:unit" failed. Use --force to continue. liujj@golden-tech
端到端/集成测试 describe('Search Results:', function () { beforeEach(function() { browser().navigateTo('http://localhost:8000/app/index.html'); }); 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); }); }); liujj@golden-tech
liujj@golden-tech