Angular 1.x Styleguide Sample App

├── .gitignore ├── .travis.yml ├── README.md ├── app ├── app.component.js ├── app.js ├── common │ ├── footer │ │ ├── footer.component.js │ │ ├── footer.spec.js │ │ └── index.js │ ├── header │ │ ├── header.component.js │ │ ├── header.spec.js │ │ └── index.js │ ├── index.js │ └── nav │ │ ├── index.js │ │ ├── nav.component.js │ │ ├── nav.service.js │ │ └── nav.spec.js ├── components │ ├── calendar │ │ ├── calendar-new │ │ │ ├── calendar-new.component.js │ │ │ └── index.js │ │ ├── calendar.component.js │ │ ├── calendar.controller.js │ │ ├── calendar.service.js │ │ ├── calendar.spec.js │ │ └── index.js │ ├── index.js │ └── todo │ │ ├── index.js │ │ ├── todo-form │ │ ├── index.js │ │ ├── todo-form.component.js │ │ └── todo-form.controller.js │ │ ├── todo-list │ │ ├── index.js │ │ ├── todo-list.component.js │ │ └── todo-list.controller.js │ │ ├── todo.component.js │ │ ├── todo.controller.js │ │ ├── todo.service.js │ │ └── todo.spec.js └── index.js ├── index.html ├── package.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - '5.0' 5 | 6 | install: 7 | - npm install 8 | - npm run build 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular 1.x styleguide (ES2015) Sample App 2 | 3 | [![Build Status](https://travis-ci.org/chihab/angular-styleguide-sample.svg?branch=master)](https://travis-ci.org/chihab/angular-styleguide-sample.svg?branch=master) 4 | 5 | This sample app follows Architecture, file structure, components, one-way dataflow and best practices suggested by [@toddmotto](//twitter.com/toddmotto) on this repo [angular-styleguide](//github.com/toddmotto/angular-styleguide) 6 | 7 | The app is really really simple, it is supposed to be a starting point to building an Angular 1.x app using es2015. 8 | 9 | It is also a good companion to reading the Style Guide. 10 | 11 | ## Install 12 | 13 | ``` 14 | 15 | git clone https://github.com/chihab/angular-styleguide-sample 16 | cd angular-styleguide-sample 17 | npm install 18 | npm run build 19 | npm start 20 | 21 | ``` 22 | 23 | Go to http://localhost:8080/ 24 | 25 | I am working on a more eye friendly version (using angular-ui). 26 | 27 | [Chihab Otmani](//chihab.github.io/2016/07/29/angular-styleguide-sample/) 28 | -------------------------------------------------------------------------------- /app/app.component.js: -------------------------------------------------------------------------------- 1 | const AppComponent = { 2 | template: ` 3 |

4 | 5 |

6 |

7 |

8 | 9 | ` 10 | }; 11 | 12 | export default AppComponent; -------------------------------------------------------------------------------- /app/app.js: -------------------------------------------------------------------------------- 1 | // Vendor 2 | import angular from 'angular'; 3 | import uiRouter from 'angular-ui-router'; 4 | 5 | // App 6 | import AppComponent from './app.component'; 7 | import Components from './components'; 8 | import Common from './common'; 9 | 10 | const app = angular 11 | .module('app', [ 12 | Components, 13 | Common, 14 | uiRouter 15 | ]) 16 | .component('app', AppComponent) 17 | .name; 18 | 19 | export default app; -------------------------------------------------------------------------------- /app/common/footer/footer.component.js: -------------------------------------------------------------------------------- 1 | const FooterComponent = { 2 | template: ` 3 |

Copyright - Angular 1.x Styleguide Sample App

4 | ` 5 | }; 6 | 7 | export default FooterComponent; -------------------------------------------------------------------------------- /app/common/footer/footer.spec.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chihab/angularjs-styleguide-sample/34193ed2ec45410bc96838a3924bd74f5434e1b6/app/common/footer/footer.spec.js -------------------------------------------------------------------------------- /app/common/footer/index.js: -------------------------------------------------------------------------------- 1 | import FooterComponent from './footer.component'; 2 | 3 | const footer = angular 4 | .module('footer', []) 5 | .component('footer', FooterComponent) 6 | .name; 7 | 8 | export default footer; -------------------------------------------------------------------------------- /app/common/header/header.component.js: -------------------------------------------------------------------------------- 1 | const HeaderComponent = { 2 | template: ` 3 |

Angular 1.x Styleguide Sample App

4 | ` 5 | }; 6 | export default HeaderComponent; -------------------------------------------------------------------------------- /app/common/header/header.spec.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chihab/angularjs-styleguide-sample/34193ed2ec45410bc96838a3924bd74f5434e1b6/app/common/header/header.spec.js -------------------------------------------------------------------------------- /app/common/header/index.js: -------------------------------------------------------------------------------- 1 | import HeaderComponent from './header.component'; 2 | 3 | const header = angular 4 | .module('header', []) 5 | .component('header', HeaderComponent) 6 | .name; 7 | 8 | export default header; -------------------------------------------------------------------------------- /app/common/index.js: -------------------------------------------------------------------------------- 1 | import angular from 'angular'; 2 | import Nav from './nav'; 3 | import Header from './header'; 4 | import Footer from './footer'; 5 | 6 | const common = angular 7 | .module('app.common', [ 8 | Nav, 9 | Header, 10 | Footer 11 | ]) 12 | .name; 13 | 14 | export default common; -------------------------------------------------------------------------------- /app/common/nav/index.js: -------------------------------------------------------------------------------- 1 | import NavComponent from './nav.component'; 2 | 3 | const nav = angular 4 | .module('nav', []) 5 | .component('nav', NavComponent) 6 | .name; 7 | 8 | export default nav; -------------------------------------------------------------------------------- /app/common/nav/nav.component.js: -------------------------------------------------------------------------------- 1 | const NavComponent = { 2 | template: ` 3 | Todos 4 | Calendar 5 | ` 6 | }; 7 | 8 | export default NavComponent; -------------------------------------------------------------------------------- /app/common/nav/nav.service.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chihab/angularjs-styleguide-sample/34193ed2ec45410bc96838a3924bd74f5434e1b6/app/common/nav/nav.service.js -------------------------------------------------------------------------------- /app/common/nav/nav.spec.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chihab/angularjs-styleguide-sample/34193ed2ec45410bc96838a3924bd74f5434e1b6/app/common/nav/nav.spec.js -------------------------------------------------------------------------------- /app/components/calendar/calendar-new/calendar-new.component.js: -------------------------------------------------------------------------------- 1 | const CalendarNewComponent = { 2 | template: ` 3 | New Calendar Component 4 | ` 5 | }; 6 | 7 | export default CalendarNewComponent; -------------------------------------------------------------------------------- /app/components/calendar/calendar-new/index.js: -------------------------------------------------------------------------------- 1 | import CalendarNewComponent from './calendar-new.component'; 2 | 3 | const calendar = angular 4 | .module('calendar.new', []) 5 | .component('calendarn', CalendarNewComponent) -------------------------------------------------------------------------------- /app/components/calendar/calendar.component.js: -------------------------------------------------------------------------------- 1 | const CalendarComponent = { 2 | template: ` 3 | New Calendar 4 |

5 | ` 6 | }; 7 | 8 | export default CalendarComponent; -------------------------------------------------------------------------------- /app/components/calendar/calendar.controller.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chihab/angularjs-styleguide-sample/34193ed2ec45410bc96838a3924bd74f5434e1b6/app/components/calendar/calendar.controller.js -------------------------------------------------------------------------------- /app/components/calendar/calendar.service.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chihab/angularjs-styleguide-sample/34193ed2ec45410bc96838a3924bd74f5434e1b6/app/components/calendar/calendar.service.js -------------------------------------------------------------------------------- /app/components/calendar/calendar.spec.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chihab/angularjs-styleguide-sample/34193ed2ec45410bc96838a3924bd74f5434e1b6/app/components/calendar/calendar.spec.js -------------------------------------------------------------------------------- /app/components/calendar/index.js: -------------------------------------------------------------------------------- 1 | import angular from 'angular'; 2 | import uiRouter from 'angular-ui-router'; 3 | import CalendarComponent from './calendar.component'; 4 | import CalendarNew from './calendar-new'; 5 | 6 | const calendar = angular 7 | .module('calendar', [ 8 | uiRouter, 'calendar.new' 9 | ]) 10 | .component('calendar', CalendarComponent) 11 | .config(($stateProvider, $urlRouterProvider) => { 12 | $stateProvider 13 | .state('calendar', { 14 | url: '/calendar', 15 | component: 'calendar' 16 | }) 17 | .state('calendar.new', { 18 | component: 'calendarn' 19 | }); 20 | $urlRouterProvider.otherwise('/'); 21 | }) 22 | .name; 23 | 24 | export default calendar; -------------------------------------------------------------------------------- /app/components/index.js: -------------------------------------------------------------------------------- 1 | import angular from 'angular'; 2 | import Calendar from './calendar'; 3 | import Todo from './todo'; 4 | 5 | const components = angular 6 | .module('app.components', [ 7 | Calendar, 8 | Todo 9 | ]) 10 | .name; 11 | 12 | export default components; -------------------------------------------------------------------------------- /app/components/todo/index.js: -------------------------------------------------------------------------------- 1 | import angular from 'angular'; 2 | import uiRouter from 'angular-ui-router'; 3 | import TodoComponent from './todo.component'; 4 | import TodoService from './todo.service'; 5 | import TodoForm from './todo-form'; 6 | import TodoList from './todo-list'; 7 | 8 | const todo = angular 9 | .module('todo', [ 10 | uiRouter, 11 | TodoForm, 12 | TodoList 13 | ]) 14 | .component('todo', TodoComponent) 15 | .service('TodoService', TodoService) 16 | .config(($stateProvider, $urlRouterProvider) => { 17 | $stateProvider 18 | .state('todos', { 19 | url: '/todos', 20 | component: 'todo', 21 | resolve: { 22 | todoData: TodoService => TodoService.getTodos() 23 | } 24 | }) 25 | $urlRouterProvider.otherwise('/'); 26 | }) 27 | .name; 28 | 29 | export default todo; -------------------------------------------------------------------------------- /app/components/todo/todo-form/index.js: -------------------------------------------------------------------------------- 1 | /* ----- todo/todo-form/index.js ----- */ 2 | import angular from 'angular'; 3 | import TodoFormComponent from './todo-form.component'; 4 | 5 | const todoForm = angular 6 | .module('todo.form', []) 7 | .component('todoForm', TodoFormComponent) 8 | .value('EventEmitter', payload => ({ $event: payload})) 9 | .name; 10 | 11 | export default todoForm; -------------------------------------------------------------------------------- /app/components/todo/todo-form/todo-form.component.js: -------------------------------------------------------------------------------- 1 | import controller from './todo-form.controller'; 2 | 3 | const TodoFormComponent = { 4 | bindings: { 5 | todo: '<', 6 | onAddTodo: '&' 7 | }, 8 | controller, 9 | template: ` 10 | 14 | ` 15 | }; 16 | 17 | export default TodoFormComponent; -------------------------------------------------------------------------------- /app/components/todo/todo-form/todo-form.controller.js: -------------------------------------------------------------------------------- 1 | class TodoFormController { 2 | constructor(EventEmitter) { 3 | this.EventEmitter = EventEmitter; 4 | } 5 | $onChanges(changes) { 6 | if (changes.todo) { 7 | this.todo = Object.assign({}, this.todo); 8 | } 9 | } 10 | onSubmit() { 11 | if (!this.todo.title) return; 12 | // with EventEmitter wrapper 13 | this.onAddTodo( 14 | this.EventEmitter({ 15 | todo: this.todo 16 | }) 17 | ); 18 | // without EventEmitter wrapper 19 | /*this.onAddTodo({ 20 | $event: { 21 | todo: this.todo 22 | } 23 | });*/ 24 | } 25 | } 26 | 27 | TodoFormController.$inject = ['EventEmitter']; 28 | 29 | export default TodoFormController; -------------------------------------------------------------------------------- /app/components/todo/todo-list/index.js: -------------------------------------------------------------------------------- 1 | /* ----- todo/todo-list/index.js ----- */ 2 | import angular from 'angular'; 3 | import TodoListComponent from './todo-list.component'; 4 | 5 | const todoList = angular 6 | .module('todo.list', []) 7 | .component('todoList', TodoListComponent) 8 | .name; 9 | 10 | export default todoList; -------------------------------------------------------------------------------- /app/components/todo/todo-list/todo-list.component.js: -------------------------------------------------------------------------------- 1 | const TodoListComponent = { 2 | bindings: { 3 | todos: '<', 4 | }, 5 | template: ` 6 |

{{$ctrl.todos|json}}

7 | ` 8 | }; 9 | 10 | export default TodoListComponent; -------------------------------------------------------------------------------- /app/components/todo/todo-list/todo-list.controller.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chihab/angularjs-styleguide-sample/34193ed2ec45410bc96838a3924bd74f5434e1b6/app/components/todo/todo-list/todo-list.controller.js -------------------------------------------------------------------------------- /app/components/todo/todo.component.js: -------------------------------------------------------------------------------- 1 | import controller from './todo.controller'; 2 | 3 | const TodoComponent = { 4 | bindings: { 5 | todoData: '<' 6 | }, 7 | controller, 8 | template: ` 9 |

10 | 13 | 14 | 16 |

17 | ` 18 | }; 19 | 20 | export default TodoComponent; -------------------------------------------------------------------------------- /app/components/todo/todo.controller.js: -------------------------------------------------------------------------------- 1 | class TodoController { 2 | constructor(TodoService) { 3 | this.todoService = TodoService; 4 | } 5 | $onInit() { 6 | this.newTodo = { 7 | title: '', 8 | selected: false 9 | }; 10 | this.todos = []; 11 | this.todoService.getTodos().then(response => { 12 | console.log(response); 13 | this.todos = response 14 | }); 15 | } 16 | $onChanges(changes) { 17 | if (changes.todoData) { 18 | this.todos = Object.assign({}, this.todoData); 19 | } 20 | } 21 | addTodo({ todo }) { 22 | if (!todo) return; 23 | this.todos.unshift(todo); 24 | console.log(this.todos); 25 | this.newTodo = { 26 | title: '', 27 | selected: false 28 | }; 29 | } 30 | } 31 | 32 | TodoController.$inject = ['TodoService']; 33 | 34 | export default TodoController; -------------------------------------------------------------------------------- /app/components/todo/todo.service.js: -------------------------------------------------------------------------------- 1 | class TodoService { 2 | constructor($q) { 3 | this.$q = $q; 4 | } 5 | getTodos() { 6 | return this.$q.when([{ 7 | title: 'Default', 8 | selected: false 9 | }]); 10 | } 11 | } 12 | 13 | TodoService.$inject = ['$q']; 14 | 15 | export default TodoService; -------------------------------------------------------------------------------- /app/components/todo/todo.spec.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chihab/angularjs-styleguide-sample/34193ed2ec45410bc96838a3924bd74f5434e1b6/app/components/todo/todo.spec.js -------------------------------------------------------------------------------- /app/index.js: -------------------------------------------------------------------------------- 1 | import App from './app'; 2 | angular.bootstrap(document, [App]); 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Angular 1.x Styleguide Sample App 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-styleguide-sample", 3 | "version": "0.1.0", 4 | "description": "Angular 1.x styleguide (ES2015) Sample App", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "node node_modules/webpack-dev-server/bin/webpack-dev-server.js", 8 | "build": "node node_modules/webpack/bin/webpack.js", 9 | "test": " [ -f dist/bundle.js ] " 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/chihab/angular-styleguide-sample.git" 14 | }, 15 | "keywords": [ 16 | "Angular", 17 | "styleguide", 18 | "(ES2015)", 19 | "Sample", 20 | "App", 21 | "Todd", 22 | "Motto", 23 | "ToddMotto" 24 | ], 25 | "author": "Chihab Otmani", 26 | "license": "ISC", 27 | "bugs": { 28 | "url": "https://github.com/chihab/angular-styleguide-sample/issues" 29 | }, 30 | "homepage": "https://github.com/chihab/angular-styleguide-sample", 31 | "devDependencies": { 32 | "babel": "^4.0.2", 33 | "babel-core": "^6.4.5", 34 | "babel-loader": "^6.2.1", 35 | "babel-preset-es2015": "^6.3.13", 36 | "babelify": "^5.0.3", 37 | "html-loader": "^0.4.3", 38 | "ngtemplate-loader": "^1.3.1", 39 | "webpack": "^1.12.11", 40 | "webpack-dev-server": "^1.14.1", 41 | "webpack-stream": "^3.1.0" 42 | }, 43 | "dependencies": { 44 | "angular-ui-router": "^1.0.0-beta.1", 45 | "angular": "^1.5.8" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | module.exports = { 3 | module: { 4 | loaders: [ 5 | { 6 | test: /\.html$/, 7 | loader: 'ngtemplate?relativeTo=' + (path.resolve(__dirname)) + '/app/!html' 8 | }, 9 | { 10 | test: /\.js?$/, 11 | exclude: /(node_modules|bower_components)/, 12 | loader: 'babel', // 'babel-loader' is also a legal name to reference 13 | query: { 14 | presets: ['es2015'], 15 | cacheDirectory: true 16 | } 17 | } 18 | ] 19 | }, 20 | context: __dirname, 21 | entry: "./app/index.js", 22 | output: { 23 | path: path.join(__dirname, "dist"), 24 | filename: "bundle.js" 25 | }, 26 | devtool: "source-map" 27 | } 28 | --------------------------------------------------------------------------------