angular1-webpack-starter
A starter project using Angular 1.x with Webpack. A Webpack + ES6 re-implementation of the generator-aio-angular project.
Still wanna use Gulp + ES5? Check the generator-aio-angular project.
Pure front-end implementation, all API interaction are mocked using angular-mocks.
Preview
Check out the demo site.
The dome site is a pure front-end implementation, so you can use any email/password to login, see mock file for detail. It is hosted on Github pages, no back-end support, so we use
#style URL.
Features
- ES6
- Component based structure proposed in https://github.com/fouber/blog/issues/10
- Lazy load resources(js/css/images/templates...) for each page
- Material Design using MaterializeCSS
- Flex Layout
- Responsive Design
- Support multiple devices with different screen size.
- Easy responsive implementation, very convenient to support small screen devices. (see responsive.styl)
- Animation
- Using animate.css.
- All the animation defined by
animate.csscan be used directly as keyframe animation. (see animation.styl)
- More understandable router design
- Easy implementation for Sidebar Navigation and Breadcrumb
Get Started
git clone https://github.com/PinkyJie/angular1-webpack-starter.git
cd angular1-webpack-starter
npm install
npm start
Then open your browser with URL http://localhost:8080/webpack-dev-server/.
Tests
- Unit Test:
npm test - Unit Test with auto watch:
npm run test:watch - E2E Test:
npm run e2e- run
npm run webdriver-updatefirst - make sure a local mock server is running
- run
Check the Unit test coverage report.
Building
npm run build
The optimized files will be generated in build folder.
CI
Proudly use Travis to do Continuous Integration.
Every push will trigger a build on Travis, it will automatically:
- run unit test.
- run build script, deploy website and test coverage report to Github pages.
- run E2E test on different browsers using Sauce Labs.
Check .travis.yml and publish-to-gh-pages.sh for detail implementation.
Check Travis build log for build results.
Blog series
http://pinkyjie.com/tags/angular1-webpack-starter/
License
MIT
-
https://github.com/AngularClass/angular-starter/wiki/How-to-include-SCSS-in-components https://github.com/lmk123/blog/issues/28 转载于:https://www.cnblogs.com/XIE7654/p/6817076.html
-
这里讲讲，angular2在生产模式下用webpack2进行打包的方法： //使用rollup打包还是比较坑的，功能及插件上都不如webpack, 关键不支持代码分离，导致angular里的lazy loader将无法使用。 具体步骤： angular=>aot=>webpack(Tree shaking&& Uglify) angular=>aot:
-
AngularJS 数字 <div ng-app="" ng-init="quantity=1;cost=5"> <p>总价： {{ quantity * cost }}</p> </div> <div ng-app="" ng-init="quantity=1;cost=5"> <p>总价： <span ng-bind="quantity * cost"></span></p> </div>
-
redux 文档地址 redux是对数据的状态管理，是react不可缺少的一部分，具体的概念这里就不进行详细的介绍。本文主要是介绍怎么引入redux和使用redux。 单向数据流：从父组件流向子组件，兄弟组件无法共享数据， state：react中的状态，是只读对象，不可直接修改。 reducer：基本函数，用于对state的业务处理。 action：描述事件行为改变state 安装 npm in
-
本文向大家介绍详解webpack+es6+angular1.x项目构建，包括了详解webpack+es6+angular1.x项目构建的使用技巧和注意事项，需要的朋友参考一下 技术栈概述 ES2015(ES6) 大名ES2015，顾名思义是 ECMAScript 在2015年6月正式发布的一套标准。小名ES6，意为ECMAScript第六次变更。（JavaScript 是 ECMAScript 规
-
⚠️ Unmaintained This project has been archived and is considered outdated and unmaintained. With the massive rise of the CLI tools by each major JavaScript Web frameworks, it was become irrelevant to
-
Figure: Great Migration by gekkodigitalmedia licensed under Public Domain ()
-
本文向大家介绍Angular1.x复杂指令实例详解，包括了Angular1.x复杂指令实例详解的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了Angular1.x复杂指令。分享给大家供大家参考，具体如下： 名称 描述 compile 指定一个编译函数 controller 为指令创建一个控制器函数 link 为指令指定链接函数 replace 指定模板内容是否替换指令所应用到的元素 req
-
Webpack Frontend Starterkit A lightweight foundation for your next webpack based frontend project. Installation npm install Start Dev Server npm start Build Prod Version npm run build Features: ES6 Su
-
更改历史 * 2017-11-12 王莹 webpack内容更新 第一章 webpack介绍 1.1 概述 Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs