├── core ├── __init__.py ├── migrations │ ├── __init__.py │ └── __pycache__ │ │ └── __init__.cpython-35.pyc ├── models.py ├── admin.py ├── tests.py ├── apps.py ├── __pycache__ │ ├── admin.cpython-35.pyc │ ├── models.cpython-35.pyc │ ├── views.cpython-35.pyc │ └── __init__.cpython-35.pyc ├── jinja2 │ └── template.html ├── views.py ├── templates │ └── index.html └── static │ └── css │ └── styles.css ├── project ├── __init__.py ├── __pycache__ │ ├── urls.cpython-35.pyc │ ├── wsgi.cpython-35.pyc │ ├── __init__.cpython-35.pyc │ └── settings.cpython-35.pyc ├── wsgi.py ├── urls.py └── settings.py ├── ngApp ├── .dockerignore ├── favicon.ico ├── app │ ├── component1.component.ts │ ├── component2.component.ts │ ├── django.component.ts │ ├── main.ts │ ├── app.route.ts │ ├── app.component.ts │ └── app.component.spec.ts ├── .gitignore ├── e2e │ └── app.e2e-spec.ts ├── tsconfig.json ├── typings.json ├── .editorconfig ├── .travis.yml ├── Dockerfile ├── LICENSE ├── karma-test-shim.js ├── systemjs.config.js ├── tslint.json ├── package.json ├── CHANGELOG.md ├── wallaby.js ├── karma.conf.js ├── protractor.config.js └── README.md ├── requirements.txt ├── db.sqlite3 ├── manage.py ├── README.md ├── LICENSE └── .gitignore /core/__init__.py: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project/__init__.py: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /core/migrations/__init__.py: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ngApp/.dockerignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | Django==1.10 2 | Jinja2==2.8 3 | MarkupSafe==0.23 4 | -------------------------------------------------------------------------------- /core/models.py: -------------------------------------------------------------------------------- 1 | from django.db import models 2 | 3 | # Create your models here. 4 | -------------------------------------------------------------------------------- /db.sqlite3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aswinkp/django-ng2-starter/HEAD/db.sqlite3 -------------------------------------------------------------------------------- /core/admin.py: -------------------------------------------------------------------------------- 1 | from django.contrib import admin 2 | 3 | # Register your models here. 4 | -------------------------------------------------------------------------------- /core/tests.py: -------------------------------------------------------------------------------- 1 | from django.test import TestCase 2 | 3 | # Create your tests here. 4 | -------------------------------------------------------------------------------- /ngApp/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aswinkp/django-ng2-starter/HEAD/ngApp/favicon.ico -------------------------------------------------------------------------------- /core/apps.py: -------------------------------------------------------------------------------- 1 | from django.apps import AppConfig 2 | 3 | 4 | class CoreConfig(AppConfig): 5 | name = 'core' 6 | -------------------------------------------------------------------------------- /core/__pycache__/admin.cpython-35.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aswinkp/django-ng2-starter/HEAD/core/__pycache__/admin.cpython-35.pyc -------------------------------------------------------------------------------- /core/__pycache__/models.cpython-35.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aswinkp/django-ng2-starter/HEAD/core/__pycache__/models.cpython-35.pyc -------------------------------------------------------------------------------- /core/__pycache__/views.cpython-35.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aswinkp/django-ng2-starter/HEAD/core/__pycache__/views.cpython-35.pyc -------------------------------------------------------------------------------- /core/__pycache__/__init__.cpython-35.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aswinkp/django-ng2-starter/HEAD/core/__pycache__/__init__.cpython-35.pyc -------------------------------------------------------------------------------- /project/__pycache__/urls.cpython-35.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aswinkp/django-ng2-starter/HEAD/project/__pycache__/urls.cpython-35.pyc -------------------------------------------------------------------------------- /project/__pycache__/wsgi.cpython-35.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aswinkp/django-ng2-starter/HEAD/project/__pycache__/wsgi.cpython-35.pyc -------------------------------------------------------------------------------- /project/__pycache__/__init__.cpython-35.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aswinkp/django-ng2-starter/HEAD/project/__pycache__/__init__.cpython-35.pyc -------------------------------------------------------------------------------- /project/__pycache__/settings.cpython-35.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aswinkp/django-ng2-starter/HEAD/project/__pycache__/settings.cpython-35.pyc -------------------------------------------------------------------------------- /core/jinja2/template.html: -------------------------------------------------------------------------------- 1 | 2 | Jinja2 Template with variales from django and angular. 3 |
4 | [{ django_variable }] 5 |
6 | {{ ngVariable }} -------------------------------------------------------------------------------- /core/migrations/__pycache__/__init__.cpython-35.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aswinkp/django-ng2-starter/HEAD/core/migrations/__pycache__/__init__.cpython-35.pyc -------------------------------------------------------------------------------- /ngApp/app/component1.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from "@angular/core"; 2 | @Component({ 3 | template: '

Component 1

' 4 | }) 5 | export class Component1Component{ 6 | 7 | } -------------------------------------------------------------------------------- /ngApp/app/component2.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from "@angular/core"; 2 | @Component({ 3 | template: '

Component 2

' 4 | }) 5 | export class Component2Component{ 6 | 7 | } -------------------------------------------------------------------------------- /ngApp/app/django.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from "@angular/core"; 2 | @Component({ 3 | templateUrl: '/sample/ng/' 4 | }) 5 | export class DjangoComponent{ 6 | ngVariable = "This is angular2 component property with interpolation"; 7 | 8 | } 9 | -------------------------------------------------------------------------------- /ngApp/.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | typings/** 3 | node_modules 4 | jspm_packages 5 | link-checker-results.txt 6 | **/*npm-debug.log.* 7 | *.js 8 | *.js.map 9 | e2e/**/*.js 10 | e2e/**/*.js.map 11 | _test-output 12 | _temp 13 | 14 | !karma*.js 15 | !protractor*.js 16 | !systemjs.config.js 17 | !typings/typings.d.ts 18 | !wallaby.js 19 | -------------------------------------------------------------------------------- /ngApp/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | 2 | describe('QuickStart E2E Tests', function () { 3 | 4 | let expectedMsg = 'My First Angular 2 App'; 5 | 6 | 7 | beforeEach(function () { 8 | browser.get(''); 9 | }); 10 | 11 | it('should display: ' + expectedMsg, function () { 12 | expect(element(by.css('h1')).getText()).toEqual(expectedMsg); 13 | }); 14 | 15 | }); 16 | -------------------------------------------------------------------------------- /ngApp/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "removeComments": false, 10 | "noImplicitAny": true, 11 | "suppressImplicitAnyIndexErrors": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /ngApp/typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "globalDependencies": { 3 | "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459", 4 | "core-js": "registry:dt/core-js#0.0.0+20160602141332", 5 | "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", 6 | "node": "registry:dt/node#6.0.0+20160621231320", 7 | "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /ngApp/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | end_of_line = lf 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | 12 | 13 | [*.md] 14 | max_line_length = 0 15 | trim_trailing_whitespace = false 16 | 17 | # Indentation override 18 | #[lib/**.js] 19 | #[{package.json,.travis.yml}] 20 | #[**/**.js] 21 | -------------------------------------------------------------------------------- /ngApp/.travis.yml: -------------------------------------------------------------------------------- 1 | dist: trusty 2 | sudo: required 3 | language: node_js 4 | node_js: 5 | - "5" 6 | os: 7 | - linux 8 | env: 9 | global: 10 | - DBUS_SESSION_BUS_ADDRESS=/dev/null 11 | - DISPLAY=:99.0 12 | - CHROME_BIN=chromium-browser 13 | before_script: 14 | - sh -e /etc/init.d/xvfb start 15 | install: 16 | - npm install 17 | script: 18 | - npm run lint 19 | - npm run test-once 20 | - npm run e2e 21 | -------------------------------------------------------------------------------- /ngApp/app/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrap } from '@angular/platform-browser-dynamic'; 2 | 3 | import { AppComponent } from './app.component'; 4 | import {appRouterProviders} from "./app.route"; 5 | import {HTTP_PROVIDERS} from "@angular/http"; 6 | import {enableProdMode} from '@angular/core'; 7 | 8 | enableProdMode(); 9 | bootstrap(AppComponent, [ 10 | appRouterProviders, 11 | HTTP_PROVIDERS 12 | ]) 13 | .catch(err => console.error(err)); -------------------------------------------------------------------------------- /project/wsgi.py: -------------------------------------------------------------------------------- 1 | """ 2 | WSGI config for project project. 3 | 4 | It exposes the WSGI callable as a module-level variable named ``application``. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/1.10/howto/deployment/wsgi/ 8 | """ 9 | 10 | import os 11 | 12 | from django.core.wsgi import get_wsgi_application 13 | 14 | os.environ.setdefault("DJANGO_SETTINGS_MODULE", "project.settings") 15 | 16 | application = get_wsgi_application() 17 | -------------------------------------------------------------------------------- /ngApp/Dockerfile: -------------------------------------------------------------------------------- 1 | # To build and run with Docker: 2 | # 3 | # $ docker build -t ng2-quickstart . 4 | # $ docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart 5 | # 6 | FROM node:latest 7 | 8 | RUN mkdir -p /quickstart /home/nodejs && \ 9 | groupadd -r nodejs && \ 10 | useradd -r -g nodejs -d /home/nodejs -s /sbin/nologin nodejs && \ 11 | chown -R nodejs:nodejs /home/nodejs 12 | 13 | WORKDIR /quickstart 14 | COPY package.json typings.json /quickstart/ 15 | RUN npm install --unsafe-perm=true 16 | 17 | COPY . /quickstart 18 | RUN chown -R nodejs:nodejs /quickstart 19 | USER nodejs 20 | 21 | CMD npm start 22 | -------------------------------------------------------------------------------- /ngApp/app/app.route.ts: -------------------------------------------------------------------------------- 1 | import { provideRouter, RouterConfig } from '@angular/router'; 2 | import {Component1Component} from "./component1.component"; 3 | import {Component2Component} from "./component2.component"; 4 | import {DjangoComponent} from "./django.component"; 5 | 6 | 7 | const routes: RouterConfig = [ 8 | {path: '',redirectTo: '/component1',pathMatch: 'full'}, 9 | { path: 'component1', component: Component1Component }, 10 | { path: 'component2', component: Component2Component }, 11 | { path: 'djcomponent', component: DjangoComponent }, 12 | ]; 13 | 14 | export const appRouterProviders = [ 15 | provideRouter(routes) 16 | ]; 17 | -------------------------------------------------------------------------------- /ngApp/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { ROUTER_DIRECTIVES } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'my-app', 6 | template: ` 7 |

My First Angular 2 App

8 | 13 | 14 | `, 15 | directives: [ROUTER_DIRECTIVES] 16 | }) 17 | export class AppComponent { } 18 | -------------------------------------------------------------------------------- /core/views.py: -------------------------------------------------------------------------------- 1 | from django.conf import settings 2 | from django.http import HttpResponse 3 | from django.shortcuts import render 4 | from django.views.generic import View, TemplateView 5 | 6 | # Create your views here. 7 | 8 | class AngularApp(TemplateView): 9 | template_name = 'index.html' 10 | 11 | def get_context_data(self, **kwargs): 12 | context = super(AngularApp, self).get_context_data(**kwargs) 13 | context['ANGULAR_URL'] = settings.ANGULAR_URL 14 | return context 15 | 16 | 17 | class SampleView(View): 18 | """View to render django template to angular""" 19 | def get(self, request): 20 | return HttpResponse("OK!") 21 | 22 | 23 | class NgTemplateView(View): 24 | """View to render django template to angular""" 25 | def get(self, request): 26 | return render(request, 'template.html', {"django_variable": "This is django context variable"}) -------------------------------------------------------------------------------- /manage.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python 2 | import os 3 | import sys 4 | 5 | if __name__ == "__main__": 6 | os.environ.setdefault("DJANGO_SETTINGS_MODULE", "project.settings") 7 | try: 8 | from django.core.management import execute_from_command_line 9 | except ImportError: 10 | # The above import may fail for some other reason. Ensure that the 11 | # issue is really that Django is missing to avoid masking other 12 | # exceptions on Python 2. 13 | try: 14 | import django 15 | except ImportError: 16 | raise ImportError( 17 | "Couldn't import Django. Are you sure it's installed and " 18 | "available on your PYTHONPATH environment variable? Did you " 19 | "forget to activate a virtual environment?" 20 | ) 21 | raise 22 | execute_from_command_line(sys.argv) 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # django-ng2-starter 2 | Boilerplate featuring Angular2 and Django. 3 | 4 | This repository is based on the following tutorial series. 5 | 6 | [Django and Angular2 Tutorial - Getting Staretd](https://4sw.in/blog/2016/django-angular2-tutorial/) 7 | 8 | and 9 | 10 | [Django and Angular2 Tutorial part 2 - Rendering Templates](https://4sw.in/blog/2016/django-angular2-tutorial-part-2/) 11 | 12 | 13 | 14 | 15 | ## Project Setup 16 | ```python 17 | #Create a new Virtual Environment. 18 | virtualenv ng2env 19 | cd ng2env 20 | 21 | #Install django 22 | pip install -r requirements.txt 23 | 24 | #Fork or clone this repo. 25 | git clone https://github.com/aswinkp/django-ng2-starter.git 26 | cd django-ng2-starter/ngApp/ 27 | 28 | #install NPM dependencies 29 | npm install 30 | #start npm 31 | npm start 32 | 33 | #Open a new terminal window 34 | cd ../ 35 | #Run Django Development Server 36 | python manage.py runserver 37 | ``` 38 | 39 | Though we use django server npm should be running behind to compile typescript to javascript instantly. -------------------------------------------------------------------------------- /core/templates/index.html: -------------------------------------------------------------------------------- 1 | {% load static %} 2 | 3 | 4 | 5 | Angular 2 QuickStart 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | {# Write your django logics here #} 19 | 25 | 26 | 27 | 28 | Loading... 29 | 30 | 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Aswin Kumar K P 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /ngApp/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2014-2016 Google, Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /project/urls.py: -------------------------------------------------------------------------------- 1 | """project URL Configuration 2 | 3 | The `urlpatterns` list routes URLs to views. For more information please see: 4 | https://docs.djangoproject.com/en/1.10/topics/http/urls/ 5 | Examples: 6 | Function views 7 | 1. Add an import: from my_app import views 8 | 2. Add a URL to urlpatterns: url(r'^$', views.home, name='home') 9 | Class-based views 10 | 1. Add an import: from other_app.views import Home 11 | 2. Add a URL to urlpatterns: url(r'^$', Home.as_view(), name='home') 12 | Including another URLconf 13 | 1. Import the include() function: from django.conf.urls import url, include 14 | 2. Add a URL to urlpatterns: url(r'^blog/', include('blog.urls')) 15 | """ 16 | from django.conf import settings 17 | from django.conf.urls import url, include 18 | from django.contrib import admin 19 | from django.conf.urls.static import static 20 | from core.views import SampleView, AngularApp, NgTemplateView 21 | 22 | ngurls = [ 23 | url(r'^$', SampleView.as_view(), name='sample'), 24 | url(r'^ng/$', NgTemplateView.as_view(), name='ngTemplate'), 25 | ] 26 | 27 | urlpatterns = [ 28 | url(r'^admin/', admin.site.urls), 29 | url(r'^sample/', include(ngurls)), 30 | url(r'^(?!ng/).*$', AngularApp.as_view(), name="angular_app"), 31 | ] + static(settings.ANGULAR_URL, document_root=settings.ANGULAR_ROOT) 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Python template 3 | # Byte-compiled / optimized / DLL files 4 | __pycache__/ 5 | *.py[cod] 6 | *$py.class 7 | 8 | # C extensions 9 | *.so 10 | 11 | # Distribution / packaging 12 | .Python 13 | env/ 14 | build/ 15 | develop-eggs/ 16 | dist/ 17 | downloads/ 18 | eggs/ 19 | .eggs/ 20 | lib/ 21 | lib64/ 22 | parts/ 23 | sdist/ 24 | var/ 25 | *.egg-info/ 26 | .installed.cfg 27 | *.egg 28 | 29 | # PyInstaller 30 | # Usually these files are written by a python script from a template 31 | # before PyInstaller builds the exe, so as to inject date/other infos into it. 32 | *.manifest 33 | *.spec 34 | 35 | # Installer logs 36 | pip-log.txt 37 | pip-delete-this-directory.txt 38 | 39 | # Unit test / coverage reports 40 | htmlcov/ 41 | .tox/ 42 | .coverage 43 | .coverage.* 44 | .cache 45 | nosetests.xml 46 | coverage.xml 47 | *,cover 48 | .hypothesis/ 49 | 50 | # Translations 51 | *.mo 52 | *.pot 53 | 54 | # Django stuff: 55 | *.log 56 | local_settings.py 57 | 58 | # Flask stuff: 59 | instance/ 60 | .webassets-cache 61 | 62 | # Scrapy stuff: 63 | .scrapy 64 | 65 | # Sphinx documentation 66 | docs/_build/ 67 | 68 | # PyBuilder 69 | target/ 70 | 71 | # IPython Notebook 72 | .ipynb_checkpoints 73 | 74 | # pyenv 75 | .python-version 76 | 77 | # celery beat schedule file 78 | celerybeat-schedule 79 | 80 | # dotenv 81 | .env 82 | 83 | # virtualenv 84 | venv/ 85 | ENV/ 86 | 87 | # Spyder project settings 88 | .spyderproject 89 | 90 | # Rope project settings 91 | .ropeproject 92 | 93 | -------------------------------------------------------------------------------- /ngApp/karma-test-shim.js: -------------------------------------------------------------------------------- 1 | // /*global jasmine, __karma__, window*/ 2 | Error.stackTraceLimit = Infinity; 3 | jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000; 4 | 5 | __karma__.loaded = function () { 6 | }; 7 | 8 | function isJsFile(path) { 9 | return path.slice(-3) == '.js'; 10 | } 11 | 12 | function isSpecFile(path) { 13 | return /\.spec\.js$/.test(path); 14 | } 15 | 16 | function isBuiltFile(path) { 17 | var builtPath = '/base/app/'; 18 | return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath); 19 | } 20 | 21 | var allSpecFiles = Object.keys(window.__karma__.files) 22 | .filter(isSpecFile) 23 | .filter(isBuiltFile); 24 | 25 | System.config({ 26 | baseURL: '/base', 27 | packageWithIndex: true // sadly, we can't use umd packages (yet?) 28 | }); 29 | 30 | System.import('systemjs.config.js') 31 | .then(function () { 32 | return Promise.all([ 33 | System.import('@angular/core/testing'), 34 | System.import('@angular/platform-browser-dynamic/testing') 35 | ]) 36 | }) 37 | .then(function (providers) { 38 | var testing = providers[0]; 39 | var testingBrowser = providers[1]; 40 | 41 | testing.setBaseTestProviders( 42 | testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, 43 | testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS); 44 | 45 | }) 46 | .then(function() { 47 | // Finally, load all spec files. 48 | // This will run the tests directly. 49 | return Promise.all( 50 | allSpecFiles.map(function (moduleName) { 51 | return System.import(moduleName); 52 | })); 53 | }) 54 | .then(__karma__.start, __karma__.error); 55 | -------------------------------------------------------------------------------- /ngApp/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable:no-unused-variable */ 2 | import { AppComponent } from './app.component'; 3 | 4 | import { async, inject } from '@angular/core/testing'; 5 | 6 | import { TestComponentBuilder } from '@angular/core/testing'; 7 | 8 | import { By } from '@angular/platform-browser'; 9 | import { provide } from '@angular/core'; 10 | import { ViewMetadata } from '@angular/core'; 11 | import { PromiseWrapper } from '@angular/core/src/facade/promise'; 12 | 13 | //////// SPECS ///////////// 14 | 15 | /// Delete this 16 | describe('Smoke test', () => { 17 | it('should run a passing test', () => { 18 | expect(true).toEqual(true, 'should pass'); 19 | }); 20 | }); 21 | 22 | describe('AppComponent with TCB', function () { 23 | 24 | it('should instantiate component', 25 | async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { 26 | 27 | tcb.createAsync(AppComponent).then(fixture => { 28 | expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent'); 29 | }); 30 | }))); 31 | 32 | it('should have expected

text', 33 | async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { 34 | 35 | tcb.createAsync(AppComponent).then(fixture => { 36 | // fixture.detectChanges(); // would need to resolve a binding but we don't have a binding 37 | 38 | let h1 = fixture.debugElement.query(el => el.name === 'h1').nativeElement; // it works 39 | 40 | h1 = fixture.debugElement.query(By.css('h1')).nativeElement; // preferred 41 | 42 | expect(h1.innerText).toMatch(/angular 2 app/i, '

should say something about "Angular 2 App"'); 43 | }); 44 | 45 | }))); 46 | }); 47 | -------------------------------------------------------------------------------- /ngApp/systemjs.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * System configuration for Angular 2 samples 3 | * Adjust as necessary for your application needs. 4 | */ 5 | (function(global) { 6 | 7 | // map tells the System loader where to look for things 8 | var map = { 9 | 'app': 'app', // 'dist', 10 | 11 | '@angular': 'node_modules/@angular', 12 | 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 13 | 'rxjs': 'node_modules/rxjs' 14 | }; 15 | 16 | // packages tells the System loader how to load when no filename and/or no extension 17 | var packages = { 18 | 'app': { main: 'main.js', defaultExtension: 'js' }, 19 | 'rxjs': { defaultExtension: 'js' }, 20 | 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, 21 | }; 22 | 23 | var ngPackageNames = [ 24 | 'common', 25 | 'compiler', 26 | 'core', 27 | 'forms', 28 | 'http', 29 | 'platform-browser', 30 | 'platform-browser-dynamic', 31 | 'router', 32 | 'router-deprecated', 33 | 'upgrade', 34 | ]; 35 | 36 | // Individual files (~300 requests): 37 | function packIndex(pkgName) { 38 | packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; 39 | } 40 | 41 | // Bundled (~40 requests): 42 | function packUmd(pkgName) { 43 | packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; 44 | } 45 | 46 | // Most environments should use UMD; some (Karma) need the individual index files 47 | var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; 48 | 49 | // Add package entries for angular packages 50 | ngPackageNames.forEach(setPackageConfig); 51 | 52 | // No umd for router yet 53 | packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' }; 54 | 55 | var config = { 56 | map: map, 57 | baseURL: '/ng/', 58 | packages: packages 59 | }; 60 | 61 | System.config(config); 62 | 63 | })(this); 64 | -------------------------------------------------------------------------------- /ngApp/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "class-name": true, 4 | "comment-format": [ 5 | true, 6 | "check-space" 7 | ], 8 | "curly": true, 9 | "eofline": true, 10 | "forin": true, 11 | "indent": [ 12 | true, 13 | "spaces" 14 | ], 15 | "label-position": true, 16 | "label-undefined": true, 17 | "max-line-length": [ 18 | true, 19 | 140 20 | ], 21 | "member-access": false, 22 | "member-ordering": [ 23 | true, 24 | "static-before-instance", 25 | "variables-before-functions" 26 | ], 27 | "no-arg": true, 28 | "no-bitwise": true, 29 | "no-console": [ 30 | true, 31 | "debug", 32 | "info", 33 | "time", 34 | "timeEnd", 35 | "trace" 36 | ], 37 | "no-construct": true, 38 | "no-debugger": true, 39 | "no-duplicate-key": true, 40 | "no-duplicate-variable": true, 41 | "no-empty": false, 42 | "no-eval": true, 43 | "no-inferrable-types": true, 44 | "no-shadowed-variable": true, 45 | "no-string-literal": false, 46 | "no-switch-case-fall-through": true, 47 | "no-trailing-whitespace": true, 48 | "no-unused-expression": true, 49 | "no-unused-variable": true, 50 | "no-unreachable": true, 51 | "no-use-before-declare": true, 52 | "no-var-keyword": true, 53 | "object-literal-sort-keys": false, 54 | "one-line": [ 55 | true, 56 | "check-open-brace", 57 | "check-catch", 58 | "check-else", 59 | "check-whitespace" 60 | ], 61 | "quotemark": [ 62 | true, 63 | "single" 64 | ], 65 | "radix": true, 66 | "semicolon": [ 67 | "always" 68 | ], 69 | "triple-equals": [ 70 | true, 71 | "allow-null-check" 72 | ], 73 | "typedef-whitespace": [ 74 | true, 75 | { 76 | "call-signature": "nospace", 77 | "index-signature": "nospace", 78 | "parameter": "nospace", 79 | "property-declaration": "nospace", 80 | "variable-declaration": "nospace" 81 | } 82 | ], 83 | "variable-name": false, 84 | "whitespace": [ 85 | true, 86 | "check-branch", 87 | "check-decl", 88 | "check-operator", 89 | "check-separator", 90 | "check-type" 91 | ] 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /ngApp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-quickstart", 3 | "version": "1.0.0", 4 | "description": "QuickStart package.json from the documentation, supplemented with testing support", 5 | "scripts": { 6 | "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", 7 | "docker-build": "docker build -t ng2-quickstart .", 8 | "docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart", 9 | "pree2e": "npm run webdriver:update", 10 | "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first", 11 | "lint": "tslint ./app/**/*.ts -t verbose", 12 | "lite": "lite-server", 13 | "postinstall": "typings install", 14 | "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"", 15 | "test-once": "tsc && karma start karma.conf.js --single-run", 16 | "tsc": "tsc", 17 | "tsc:w": "tsc -w", 18 | "typings": "typings", 19 | "webdriver:update": "webdriver-manager update" 20 | }, 21 | "keywords": [], 22 | "author": "", 23 | "license": "ISC", 24 | "dependencies": { 25 | "@angular/common": "2.0.0-rc.4", 26 | "@angular/compiler": "2.0.0-rc.4", 27 | "@angular/core": "2.0.0-rc.4", 28 | "@angular/forms": "0.2.0", 29 | "@angular/http": "2.0.0-rc.4", 30 | "@angular/platform-browser": "2.0.0-rc.4", 31 | "@angular/platform-browser-dynamic": "2.0.0-rc.4", 32 | "@angular/router": "3.0.0-beta.2", 33 | "@angular/router-deprecated": "2.0.0-rc.2", 34 | "@angular/upgrade": "2.0.0-rc.4", 35 | 36 | "systemjs": "0.19.27", 37 | "core-js": "^2.4.0", 38 | "reflect-metadata": "^0.1.3", 39 | "rxjs": "5.0.0-beta.6", 40 | "zone.js": "^0.6.12", 41 | 42 | "angular2-in-memory-web-api": "0.0.14", 43 | "bootstrap": "^3.3.6" 44 | }, 45 | "devDependencies": { 46 | "concurrently": "^2.2.0", 47 | "lite-server": "^2.2.0", 48 | "typescript": "^1.8.10", 49 | "typings": "^1.0.4", 50 | 51 | "canonical-path": "0.0.2", 52 | "http-server": "^0.9.0", 53 | "tslint": "^3.7.4", 54 | "lodash": "^4.11.1", 55 | "jasmine-core": "~2.4.1", 56 | "karma": "^0.13.22", 57 | "karma-chrome-launcher": "^0.2.3", 58 | "karma-cli": "^0.1.2", 59 | "karma-htmlfile-reporter": "^0.2.2", 60 | "karma-jasmine": "^0.3.8", 61 | "protractor": "^3.3.0", 62 | "rimraf": "^2.5.2" 63 | }, 64 | "repository": {} 65 | } 66 | -------------------------------------------------------------------------------- /ngApp/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 2 | # 0.2.5 (2016-06-30) 3 | * Angular 2 RC4 version 4 | * Updated new forms and router 5 | 6 | 7 | # 0.2.4 (2016-06-21) 8 | * Angular 2 RC3 version 9 | * Add new forms and router 10 | * Add support for TS e2e tests 11 | 12 | 13 | # 0.2.3 (2016-06-15) 14 | * Angular 2 RC2 version 15 | 16 | 17 | # 0.2.2 (2016-05-21) 18 | * Update to Typings 1.x 19 | 20 | 21 | # 0.2.1 (2016-05-03) 22 | * Angular 2 RC01 version 23 | 24 | 25 | # 0.2.0 (2016-05-02) 26 | * Angular 2 RC0 version 27 | 28 | 29 | # 0.1.17 (2016-04-29) 30 | * update packages 31 | * Angular 2 beta 17 32 | * RxJS 5.0.0-beta.6 33 | * a2-in-memory-web-api 0.1.17 34 | 35 | 36 | # 0.1.16 (2016-04-26) 37 | * update packages 38 | * Angular 2 beta 16 39 | * a2-in-memory-web-api 0.1.6 40 | * protractor 3.3.0 41 | * typings 0.8.1 42 | * zone.js 0.6.12 43 | 44 | * added favicon.ico 45 | 46 | * testing 47 | - updated wallaby.js and karma.conf.js 48 | - updated app.component.spec.ts 49 | 50 | 51 | 52 | # 0.1.15 (2016-04-13) 53 | * Add testing support 54 | * npm scripts 55 | * karma/jasmine 56 | * protractor 57 | 58 | * update packages 59 | * Angular 2 beta 15 60 | * lite-server 2.2.0 61 | * systemjs 0.19.26 62 | * typescript 1.8.10 63 | * typings 0.7.12 64 | 65 | * add run packages 66 | * a2-in-memory-web-api 67 | 68 | * add testing dev-dependency packages 69 | * canonical-path: 0.0.2, 70 | * http-server: ^0.9.0, 71 | * jasmine-core: ~2.4.1, 72 | * karma: ^0.13.22, 73 | * karma-chrome-launcher: ^0.2.3, 74 | * karma-cli: ^0.1.2, 75 | * karma-htmlfile-reporter: ^0.2.2, 76 | * karma-jasmine: ^0.3.8, 77 | * protractor: ^3.2.2, 78 | * rimraf: ^2.5.2 79 | 80 | 81 | # 0.1.14 (2016-04-07) 82 | * update packages 83 | * Angular 2 beta 14 84 | * lite-server 2.2.0 85 | * typings 0.7.12 86 | 87 | 88 | # 0.1.13 (2016-03-31) 89 | * update packages 90 | * Angular 2 beta 13 91 | 92 | 93 | # 0.1.12 (2016-03-23) 94 | * update packages 95 | * Angular 2 beta 12 96 | * zones 0.6.6 97 | * remove es6-promise because no longer needed. 98 | 99 | 100 | # 0.1.11 (2016-03-18) 101 | * update packages 102 | * Angular 2 beta 11 103 | * zones 0.6.4 104 | * typescript 1.8.9 105 | * typings 0.7.9 106 | -------------------------------------------------------------------------------- /ngApp/wallaby.js: -------------------------------------------------------------------------------- 1 | // Configuration for the Wallaby Visual Studio Code testing extension 2 | // https://marketplace.visualstudio.com/items?itemName=WallabyJs.wallaby-vscode 3 | // Note: Wallaby is not open source and costs money 4 | 5 | module.exports = function () { 6 | 7 | return { 8 | files: [ 9 | // System.js for module loading 10 | {pattern: 'node_modules/systemjs/dist/system.js', instrument: false}, 11 | {pattern: 'systemjs.config.js', instrument: false}, 12 | 13 | // Polyfills 14 | {pattern: 'node_modules/core-js/client/shim.min.js', instrument: false}, 15 | 16 | // Reflect, Zone.js, and test shims 17 | // Rx.js, Angular 2 itself, and the testing library not here because loaded by systemjs 18 | {pattern: 'node_modules/reflect-metadata/Reflect.js', instrument: false}, 19 | {pattern: 'node_modules/zone.js/dist/zone.js', instrument: false}, 20 | {pattern: 'node_modules/zone.js/dist/jasmine-patch.js', instrument: false}, 21 | {pattern: 'node_modules/zone.js/dist/async-test.js', instrument: false}, 22 | {pattern: 'node_modules/zone.js/dist/fake-async-test.js', instrument: false}, 23 | 24 | {pattern: 'app/**/*+(ts|html|css)', load: false}, 25 | {pattern: 'app/**/*.spec.ts', ignore: true} 26 | ], 27 | 28 | tests: [ 29 | {pattern: 'app/**/*.spec.ts', load: false} 30 | ], 31 | 32 | middleware: function (app, express) { 33 | app.use('/node_modules', express.static(require('path').join(__dirname, 'node_modules'))); 34 | }, 35 | 36 | testFramework: 'jasmine', 37 | 38 | debug: true, 39 | 40 | bootstrap: function (wallaby) { 41 | wallaby.delayStart(); 42 | 43 | System.config({ 44 | packageWithIndex: true // sadly, we can't use umd packages (yet?) 45 | }); 46 | 47 | System.import('systemjs.config.js') 48 | .then(function () { 49 | return Promise.all([ 50 | System.import('@angular/core/testing'), 51 | System.import('@angular/platform-browser-dynamic/testing') 52 | ]) 53 | }) 54 | .then(function (providers) { 55 | var testing = providers[0]; 56 | var testingBrowser = providers[1]; 57 | 58 | testing.setBaseTestProviders( 59 | testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, 60 | testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS); 61 | 62 | // Load all spec files 63 | return Promise.all(wallaby.tests.map(function (specFile) { 64 | return System.import(specFile); 65 | })); 66 | }) 67 | .then(function () { 68 | wallaby.start(); 69 | }) 70 | .catch(function (e) { 71 | setTimeout(function () { 72 | throw e; 73 | }, 0); 74 | }); 75 | } 76 | }; 77 | }; 78 | -------------------------------------------------------------------------------- /core/static/css/styles.css: -------------------------------------------------------------------------------- 1 | /* Master Styles */ 2 | h1 { 3 | color: #369; 4 | font-family: Arial, Helvetica, sans-serif; 5 | font-size: 250%; 6 | } 7 | h2, h3 { 8 | color: #444; 9 | font-family: Arial, Helvetica, sans-serif; 10 | font-weight: lighter; 11 | } 12 | body { 13 | margin: 2em; 14 | } 15 | body, input[text], button { 16 | color: #888; 17 | font-family: Cambria, Georgia; 18 | } 19 | a { 20 | cursor: pointer; 21 | cursor: hand; 22 | } 23 | button { 24 | font-family: Arial; 25 | background-color: #eee; 26 | border: none; 27 | padding: 5px 10px; 28 | border-radius: 4px; 29 | cursor: pointer; 30 | cursor: hand; 31 | } 32 | button:hover { 33 | background-color: #cfd8dc; 34 | } 35 | button:disabled { 36 | background-color: #eee; 37 | color: #aaa; 38 | cursor: auto; 39 | } 40 | 41 | /* Navigation link styles */ 42 | nav a { 43 | padding: 5px 10px; 44 | text-decoration: none; 45 | margin-top: 10px; 46 | display: inline-block; 47 | background-color: #eee; 48 | border-radius: 4px; 49 | } 50 | nav a:visited, a:link { 51 | color: #607D8B; 52 | } 53 | nav a:hover { 54 | color: #039be5; 55 | background-color: #CFD8DC; 56 | } 57 | nav a.router-link-active { 58 | color: #039be5; 59 | } 60 | 61 | /* items class */ 62 | .items { 63 | margin: 0 0 2em 0; 64 | list-style-type: none; 65 | padding: 0; 66 | width: 24em; 67 | } 68 | .items li { 69 | cursor: pointer; 70 | position: relative; 71 | left: 0; 72 | background-color: #EEE; 73 | margin: .5em; 74 | padding: .3em 0; 75 | height: 1.6em; 76 | border-radius: 4px; 77 | } 78 | .items li:hover { 79 | color: #607D8B; 80 | background-color: #DDD; 81 | left: .1em; 82 | } 83 | .items li.selected:hover { 84 | background-color: #BBD8DC; 85 | color: white; 86 | } 87 | .items .text { 88 | position: relative; 89 | top: -3px; 90 | } 91 | .items { 92 | margin: 0 0 2em 0; 93 | list-style-type: none; 94 | padding: 0; 95 | width: 24em; 96 | } 97 | .items li { 98 | cursor: pointer; 99 | position: relative; 100 | left: 0; 101 | background-color: #EEE; 102 | margin: .5em; 103 | padding: .3em 0; 104 | height: 1.6em; 105 | border-radius: 4px; 106 | } 107 | .items li:hover { 108 | color: #607D8B; 109 | background-color: #DDD; 110 | left: .1em; 111 | } 112 | .items li.selected { 113 | background-color: #CFD8DC; 114 | color: white; 115 | } 116 | 117 | .items li.selected:hover { 118 | background-color: #BBD8DC; 119 | } 120 | .items .text { 121 | position: relative; 122 | top: -3px; 123 | } 124 | .items .badge { 125 | display: inline-block; 126 | font-size: small; 127 | color: white; 128 | padding: 0.8em 0.7em 0 0.7em; 129 | background-color: #607D8B; 130 | line-height: 1em; 131 | position: relative; 132 | left: -1px; 133 | top: -4px; 134 | height: 1.8em; 135 | margin-right: .8em; 136 | border-radius: 4px 0 0 4px; 137 | } 138 | 139 | /* everywhere else */ 140 | * { 141 | font-family: Arial, Helvetica, sans-serif; 142 | } 143 | -------------------------------------------------------------------------------- /ngApp/karma.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = function(config) { 2 | 3 | var appBase = 'app/'; // transpiled app JS files 4 | var appAssets ='/base/app/'; // component assets fetched by Angular's compiler 5 | 6 | config.set({ 7 | basePath: '', 8 | frameworks: ['jasmine'], 9 | plugins: [ 10 | require('karma-jasmine'), 11 | require('karma-chrome-launcher'), 12 | require('karma-htmlfile-reporter') 13 | ], 14 | 15 | customLaunchers: { 16 | // From the CLI. Not used here but interesting 17 | // chrome setup for travis CI using chromium 18 | Chrome_travis_ci: { 19 | base: 'Chrome', 20 | flags: ['--no-sandbox'] 21 | } 22 | }, 23 | files: [ 24 | // System.js for module loading 25 | 'node_modules/systemjs/dist/system.src.js', 26 | 27 | // Polyfills 28 | 'node_modules/core-js/client/shim.js', 29 | 30 | // Reflect and Zone.js 31 | 'node_modules/reflect-metadata/Reflect.js', 32 | 'node_modules/zone.js/dist/zone.js', 33 | 'node_modules/zone.js/dist/jasmine-patch.js', 34 | 'node_modules/zone.js/dist/async-test.js', 35 | 'node_modules/zone.js/dist/fake-async-test.js', 36 | 37 | // RxJs. 38 | { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false }, 39 | { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false }, 40 | 41 | // Angular 2 itself and the testing library 42 | {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false}, 43 | {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false}, 44 | 45 | {pattern: 'systemjs.config.js', included: false, watched: false}, 46 | 'karma-test-shim.js', 47 | 48 | // transpiled application & spec code paths loaded via module imports 49 | {pattern: appBase + '**/*.js', included: false, watched: true}, 50 | 51 | // asset (HTML & CSS) paths loaded via Angular's component compiler 52 | // (these paths need to be rewritten, see proxies section) 53 | {pattern: appBase + '**/*.html', included: false, watched: true}, 54 | {pattern: appBase + '**/*.css', included: false, watched: true}, 55 | 56 | // paths for debugging with source maps in dev tools 57 | {pattern: appBase + '**/*.ts', included: false, watched: false}, 58 | {pattern: appBase + '**/*.js.map', included: false, watched: false} 59 | ], 60 | 61 | // proxied base paths for loading assets 62 | proxies: { 63 | // required for component assets fetched by Angular's compiler 64 | "/app/": appAssets 65 | }, 66 | 67 | exclude: [], 68 | preprocessors: {}, 69 | reporters: ['progress', 'html'], 70 | 71 | // HtmlReporter configuration 72 | htmlReporter: { 73 | // Open this file to see results in browser 74 | outputFile: '_test-output/tests.html', 75 | 76 | // Optional 77 | pageTitle: 'Unit Tests', 78 | subPageTitle: __dirname 79 | }, 80 | 81 | port: 9876, 82 | colors: true, 83 | logLevel: config.LOG_INFO, 84 | autoWatch: true, 85 | browsers: ['Chrome'], 86 | singleRun: false 87 | }) 88 | } 89 | -------------------------------------------------------------------------------- /project/settings.py: -------------------------------------------------------------------------------- 1 | """ 2 | Django settings for project project. 3 | 4 | Generated by 'django-admin startproject' using Django 1.10. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/1.10/topics/settings/ 8 | 9 | For the full list of settings and their values, see 10 | https://docs.djangoproject.com/en/1.10/ref/settings/ 11 | """ 12 | 13 | import os 14 | 15 | # Build paths inside the project like this: os.path.join(BASE_DIR, ...) 16 | BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 17 | 18 | 19 | # Quick-start development settings - unsuitable for production 20 | # See https://docs.djangoproject.com/en/1.10/howto/deployment/checklist/ 21 | 22 | # SECURITY WARNING: keep the secret key used in production secret! 23 | SECRET_KEY = 'm3@vm^t4jw3*i827_(@-lf_t0zlw1&r^@uf&@^8ak3)_sk4dpa' 24 | 25 | # SECURITY WARNING: don't run with debug turned on in production! 26 | DEBUG = True 27 | 28 | ALLOWED_HOSTS = [] 29 | 30 | 31 | # Application definition 32 | 33 | INSTALLED_APPS = [ 34 | 'django.contrib.admin', 35 | 'django.contrib.auth', 36 | 'django.contrib.contenttypes', 37 | 'django.contrib.sessions', 38 | 'django.contrib.messages', 39 | 'django.contrib.staticfiles', 40 | 'core', 41 | ] 42 | 43 | MIDDLEWARE = [ 44 | 'django.middleware.security.SecurityMiddleware', 45 | 'django.contrib.sessions.middleware.SessionMiddleware', 46 | 'django.middleware.common.CommonMiddleware', 47 | 'django.middleware.csrf.CsrfViewMiddleware', 48 | 'django.contrib.auth.middleware.AuthenticationMiddleware', 49 | 'django.contrib.messages.middleware.MessageMiddleware', 50 | 'django.middleware.clickjacking.XFrameOptionsMiddleware', 51 | ] 52 | 53 | ROOT_URLCONF = 'project.urls' 54 | 55 | TEMPLATES = [ 56 | { 57 | 'BACKEND': 'django.template.backends.jinja2.Jinja2', 58 | 'DIRS': ['jinja2'], 59 | 'APP_DIRS': True, 60 | 'OPTIONS': { 61 | 'variable_start_string': '[{', 62 | 'variable_end_string': '}]', 63 | }, 64 | }, 65 | { 66 | 'BACKEND': 'django.template.backends.django.DjangoTemplates', 67 | 'DIRS': [], 68 | 'APP_DIRS': True, 69 | 'OPTIONS': { 70 | 'context_processors': [ 71 | 'django.template.context_processors.debug', 72 | 'django.template.context_processors.request', 73 | 'django.contrib.auth.context_processors.auth', 74 | 'django.contrib.messages.context_processors.messages', 75 | ], 76 | }, 77 | }, 78 | ] 79 | 80 | WSGI_APPLICATION = 'project.wsgi.application' 81 | 82 | 83 | # Database 84 | # https://docs.djangoproject.com/en/1.10/ref/settings/#databases 85 | 86 | DATABASES = { 87 | 'default': { 88 | 'ENGINE': 'django.db.backends.sqlite3', 89 | 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), 90 | } 91 | } 92 | 93 | 94 | # Password validation 95 | # https://docs.djangoproject.com/en/1.10/ref/settings/#auth-password-validators 96 | 97 | AUTH_PASSWORD_VALIDATORS = [ 98 | { 99 | 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', 100 | }, 101 | { 102 | 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', 103 | }, 104 | { 105 | 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', 106 | }, 107 | { 108 | 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', 109 | }, 110 | ] 111 | 112 | 113 | # Internationalization 114 | # https://docs.djangoproject.com/en/1.10/topics/i18n/ 115 | 116 | LANGUAGE_CODE = 'en-us' 117 | 118 | TIME_ZONE = 'UTC' 119 | 120 | USE_I18N = True 121 | 122 | USE_L10N = True 123 | 124 | USE_TZ = True 125 | 126 | 127 | # Static files (CSS, JavaScript, Images) 128 | # https://docs.djangoproject.com/en/1.10/howto/static-files/ 129 | 130 | STATIC_URL = '/static/' 131 | 132 | ANGULAR_URL = '/ng/' 133 | ANGULAR_ROOT = os.path.join(BASE_DIR, 'ngApp/') -------------------------------------------------------------------------------- /ngApp/protractor.config.js: -------------------------------------------------------------------------------- 1 | // FIRST TIME ONLY- run: 2 | // ./node_modules/.bin/webdriver-manager update 3 | // 4 | // Try: `npm run webdriver:update` 5 | // 6 | // AND THEN EVERYTIME ... 7 | // 1. Compile with `tsc` 8 | // 2. Make sure the test server (e.g., http-server: localhost:8080) is running. 9 | // 3. ./node_modules/.bin/protractor protractor.config.js 10 | // 11 | // To do all steps, try: `npm run e2e` 12 | 13 | var fs = require('fs'); 14 | var path = require('canonical-path'); 15 | var _ = require('lodash'); 16 | 17 | 18 | exports.config = { 19 | directConnect: true, 20 | 21 | // Capabilities to be passed to the webdriver instance. 22 | capabilities: { 23 | 'browserName': 'chrome' 24 | }, 25 | 26 | // Framework to use. Jasmine is recommended. 27 | framework: 'jasmine', 28 | 29 | // Spec patterns are relative to this config file 30 | specs: ['**/*e2e-spec.js' ], 31 | 32 | 33 | // For angular2 tests 34 | useAllAngular2AppRoots: true, 35 | 36 | // Base URL for application server 37 | baseUrl: 'http://localhost:8080', 38 | 39 | // doesn't seem to work. 40 | // resultJsonOutputFile: "foo.json", 41 | 42 | onPrepare: function() { 43 | //// SpecReporter 44 | //var SpecReporter = require('jasmine-spec-reporter'); 45 | //jasmine.getEnv().addReporter(new SpecReporter({displayStacktrace: 'none'})); 46 | //// jasmine.getEnv().addReporter(new SpecReporter({displayStacktrace: 'all'})); 47 | 48 | // debugging 49 | // console.log('browser.params:' + JSON.stringify(browser.params)); 50 | jasmine.getEnv().addReporter(new Reporter( browser.params )) ; 51 | 52 | global.sendKeys = sendKeys; 53 | 54 | // Allow changing bootstrap mode to NG1 for upgrade tests 55 | global.setProtractorToNg1Mode = function() { 56 | browser.useAllAngular2AppRoots = false; 57 | browser.rootEl = 'body'; 58 | }; 59 | }, 60 | 61 | jasmineNodeOpts: { 62 | // defaultTimeoutInterval: 60000, 63 | defaultTimeoutInterval: 10000, 64 | showTiming: true, 65 | print: function() {} 66 | } 67 | }; 68 | 69 | // Hack - because of bug with protractor send keys 70 | function sendKeys(element, str) { 71 | return str.split('').reduce(function (promise, char) { 72 | return promise.then(function () { 73 | return element.sendKeys(char); 74 | }); 75 | }, element.getAttribute('value')); 76 | // better to create a resolved promise here but ... don't know how with protractor; 77 | } 78 | 79 | // Custom reporter 80 | function Reporter(options) { 81 | var _defaultOutputFile = path.resolve(process.cwd(), './_test-output', 'protractor-results.txt'); 82 | options.outputFile = options.outputFile || _defaultOutputFile; 83 | 84 | initOutputFile(options.outputFile); 85 | options.appDir = options.appDir || './'; 86 | var _root = { appDir: options.appDir, suites: [] }; 87 | log('AppDir: ' + options.appDir, +1); 88 | var _currentSuite; 89 | 90 | this.suiteStarted = function(suite) { 91 | _currentSuite = { description: suite.description, status: null, specs: [] }; 92 | _root.suites.push(_currentSuite); 93 | log('Suite: ' + suite.description, +1); 94 | }; 95 | 96 | this.suiteDone = function(suite) { 97 | var statuses = _currentSuite.specs.map(function(spec) { 98 | return spec.status; 99 | }); 100 | statuses = _.uniq(statuses); 101 | var status = statuses.indexOf('failed') >= 0 ? 'failed' : statuses.join(', '); 102 | _currentSuite.status = status; 103 | log('Suite ' + _currentSuite.status + ': ' + suite.description, -1); 104 | }; 105 | 106 | this.specStarted = function(spec) { 107 | 108 | }; 109 | 110 | this.specDone = function(spec) { 111 | var currentSpec = { 112 | description: spec.description, 113 | status: spec.status 114 | }; 115 | if (spec.failedExpectations.length > 0) { 116 | currentSpec.failedExpectations = spec.failedExpectations; 117 | } 118 | 119 | _currentSuite.specs.push(currentSpec); 120 | log(spec.status + ' - ' + spec.description); 121 | }; 122 | 123 | this.jasmineDone = function() { 124 | outputFile = options.outputFile; 125 | //// Alternate approach - just stringify the _root - not as pretty 126 | //// but might be more useful for automation. 127 | // var output = JSON.stringify(_root, null, 2); 128 | var output = formatOutput(_root); 129 | fs.appendFileSync(outputFile, output); 130 | }; 131 | 132 | function initOutputFile(outputFile) { 133 | var header = "Protractor results for: " + (new Date()).toLocaleString() + "\n\n"; 134 | fs.writeFileSync(outputFile, header); 135 | } 136 | 137 | // for output file output 138 | function formatOutput(output) { 139 | var indent = ' '; 140 | var pad = ' '; 141 | var results = []; 142 | results.push('AppDir:' + output.appDir); 143 | output.suites.forEach(function(suite) { 144 | results.push(pad + 'Suite: ' + suite.description + ' -- ' + suite.status); 145 | pad+=indent; 146 | suite.specs.forEach(function(spec) { 147 | results.push(pad + spec.status + ' - ' + spec.description); 148 | if (spec.failedExpectations) { 149 | pad+=indent; 150 | spec.failedExpectations.forEach(function (fe) { 151 | results.push(pad + 'message: ' + fe.message); 152 | }); 153 | pad=pad.substr(2); 154 | } 155 | }); 156 | pad = pad.substr(2); 157 | results.push(''); 158 | }); 159 | results.push(''); 160 | return results.join('\n'); 161 | } 162 | 163 | // for console output 164 | var _pad; 165 | function log(str, indent) { 166 | _pad = _pad || ''; 167 | if (indent == -1) { 168 | _pad = _pad.substr(2); 169 | } 170 | console.log(_pad + str); 171 | if (indent == 1) { 172 | _pad = _pad + ' '; 173 | } 174 | } 175 | 176 | } 177 | -------------------------------------------------------------------------------- /ngApp/README.md: -------------------------------------------------------------------------------- 1 | # Angular 2 QuickStart Source 2 | [![Build Status][travis-badge]][travis-badge-url] 3 | 4 | This repository holds the TypeScript source code of the [angular.io quickstart](https://angular.io/docs/ts/latest/quickstart.html), 5 | the foundation for most of the documentation samples and potentially a good starting point for your application. 6 | 7 | It's been extended with testing support so you can start writing tests immediately. 8 | 9 | **This is not the perfect arrangement for your application. It is not designed for production. 10 | It exists primarily to get you started quickly with learning and prototyping in Angular 2** 11 | 12 | We are unlikely to accept suggestions about how to grow this QuickStart into something it is not. 13 | Please keep that in mind before posting issues and PRs. 14 | 15 | ## Prerequisites 16 | 17 | Node.js and npm are essential to Angular 2 development. 18 | 19 | 20 | Get it now if it's not already installed on your machine. 21 | 22 | **Verify that you are running at least node `v5.x.x` and npm `3.x.x`** 23 | by running `node -v` and `npm -v` in a terminal/console window. 24 | Older versions produce errors. 25 | 26 | We recommend [nvm](https://github.com/creationix/nvm) for managing multiple versions of node and npm. 27 | 28 | ## Create a new project based on the QuickStart 29 | 30 | Clone this repo into new project folder (e.g., `my-proj`). 31 | ```bash 32 | git clone https://github.com/angular/quickstart my-proj 33 | cd my-proj 34 | ``` 35 | 36 | We have no intention of updating the source on `angular/quickstart`. 37 | Discard everything "git-like" by deleting the `.git` folder. 38 | ```bash 39 | rm -rf .git // non-Windows 40 | rd .git /S/Q // windows 41 | ``` 42 | 43 | ### Create a new git repo 44 | You could [start writing code](#start-development) now and throw it all away when you're done. 45 | If you'd rather preserve your work under source control, consider taking the following steps. 46 | 47 | Initialize this project as a *local git repo* and make the first commit: 48 | ```bash 49 | git init 50 | git add . 51 | git commit -m "Initial commit" 52 | ``` 53 | 54 | Create a *remote repository* for this project on the service of your choice. 55 | 56 | Grab its address (e.g. *`https://github.com//my-proj.git`*) and push the *local repo* to the *remote*. 57 | ```bash 58 | git remote add origin 59 | git push -u origin master 60 | ``` 61 | ## Install npm packages 62 | 63 | > See npm and nvm version notes above 64 | 65 | Install the npm packages described in the `package.json` and verify that it works: 66 | 67 | **Attention Windows Developers: You must run all of these commands in administrator mode**. 68 | 69 | ```bash 70 | npm install 71 | npm start 72 | ``` 73 | 74 | > If the `typings` folder doesn't show up after `npm install` please install them manually with: 75 | 76 | > `npm run typings -- install` 77 | 78 | The `npm start` command first compiles the application, 79 | then simultaneously re-compiles and runs the `lite-server`. 80 | Both the compiler and the server watch for file changes. 81 | 82 | Shut it down manually with Ctrl-C. 83 | 84 | You're ready to write your application. 85 | 86 | ### npm scripts 87 | 88 | We've captured many of the most useful commands in npm scripts defined in the `package.json`: 89 | 90 | * `npm start` - runs the compiler and a server at the same time, both in "watch mode". 91 | * `npm run tsc` - runs the TypeScript compiler once. 92 | * `npm run tsc:w` - runs the TypeScript compiler in watch mode; the process keeps running, awaiting changes to TypeScript files and re-compiling when it sees them. 93 | * `npm run lite` - runs the [lite-server](https://www.npmjs.com/package/lite-server), a light-weight, static file server, written and maintained by 94 | [John Papa](https://github.com/johnpapa) and 95 | [Christopher Martin](https://github.com/cgmartin) 96 | with excellent support for Angular apps that use routing. 97 | * `npm run typings` - runs the typings tool. 98 | * `npm run postinstall` - called by *npm* automatically *after* it successfully completes package installation. This script installs the TypeScript definition files this app requires. 99 | Here are the test related scripts: 100 | * `npm test` - compiles, runs and watches the karma unit tests 101 | * `npm run e2e` - run protractor e2e tests, written in JavaScript (*e2e-spec.js) 102 | 103 | ## Testing 104 | 105 | The QuickStart documentation doesn't discuss testing. 106 | This repo adds both karma/jasmine unit test and protractor end-to-end testing support. 107 | 108 | These tools are configured for specific conventions described below. 109 | 110 | *It is unwise and rarely possible to run the application, the unit tests, and the e2e tests at the same time. 111 | We recommend that you shut down one before starting another.* 112 | 113 | ### Unit Tests 114 | TypeScript unit-tests are usually in the `app` folder. Their filenames must end in `.spec`. 115 | 116 | Look for the example `app/app.component.spec.ts`. 117 | Add more `.spec.ts` files as you wish; we configured karma to find them. 118 | 119 | Run it with `npm test` 120 | 121 | That command first compiles the application, then simultaneously re-compiles and runs the karma test-runner. 122 | Both the compiler and the karma watch for (different) file changes. 123 | 124 | Shut it down manually with Ctrl-C. 125 | 126 | Test-runner output appears in the terminal window. 127 | We can update our app and our tests in real-time, keeping a weather eye on the console for broken tests. 128 | Karma is occasionally confused and it is often necessary to shut down its browser or even shut the command down (Ctrl-C) and 129 | restart it. No worries; it's pretty quick. 130 | 131 | The `HTML-Reporter` is also wired in. That produces a prettier output; look for it in `~_test-output/tests.html`. 132 | 133 | ### End-to-end (E2E) Tests 134 | 135 | E2E tests are in the `e2e` directory, side by side with the `app` folder. 136 | Their filenames must end in `.e2e-spec.ts`. 137 | 138 | Look for the example `e2e/app.e2e-spec.ts`. 139 | Add more `.e2e-spec.js` files as you wish (although one usually suffices for small projects); 140 | we configured protractor to find them. 141 | 142 | Thereafter, run them with `npm run e2e`. 143 | 144 | That command first compiles, then simultaneously starts the Http-Server at `localhost:8080` 145 | and launches protractor. 146 | 147 | The pass/fail test results appear at the bottom of the terminal window. 148 | A custom reporter (see `protractor.config.js`) generates a `./_test-output/protractor-results.txt` file 149 | which is easier to read; this file is excluded from source control. 150 | 151 | Shut it down manually with Ctrl-C. 152 | 153 | [travis-badge]: https://travis-ci.org/angular/quickstart.svg?branch=master 154 | [travis-badge-url]: https://travis-ci.org/angular/quickstart 155 | --------------------------------------------------------------------------------