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 fouber/blog#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.css can 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-update first
- make sure a local mock server is running

Check the Unit test coverage report.

Check the E2E test 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

resolve problem

不好意思，又来麻烦了，请教一个问题：我没有使用你封装好的RouterHelper，而是采用普通的在config中配置自己的项目，但是在需要登录的界面使用一个resolve:{ Login: ['LoginResolve', function(LoginResolve){return LoginResolve.login();}]}这样的resolve，相比你的{loginResolve: self.Resolve.login}确实很丑，但是angular.config的resolve要注入service没有办法，结果竟然无法工作。

发现是ResolveService.prototype.login.$inject = ['UserAPI', '$q'];这个UserAPI和$q都没有注入进来。我修改了一下这个LoginResolve类，可以正常工作了：

class LoginResolve {
	constructor (UserAPI, $q){
		Object.assign(this, {UserAPI, $q});
	}
	login () {
		const self = this;
		if (self.UserAPI.isLoggedIn() !== true) {
			return self.UserAPI.checkLoggedInStatus()
				 .catch(_error);
		}

		function _error () {
			return self.$q.reject('requireLogin');
		}
	}
}
LoginResolve.$inject = ['UserAPI', '$q'];

为什么你采用self.Resolve.login就可以使用login的inject，而我采用LoginResolve.login()则必须将注入放到LoginResolve再通过login来使用，LoginResolve.login()不会触发login的依赖注入工作吗？非常感谢！

pinkyjie / angular1-webpack-starter Goto Github PK