提示：最多150个字符
8 | 9 |发布
10 |
5 |
23 |
24 |
8 |
20 |
21 |
22 | 
3 |
2 |
6 | Awesome chihu2 web DEMO created with Angular4.x 7 |
8 | 9 |
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 
17 |
20 | 
21 |
Live Demo: https://chihu-team.github.io/
24 | -------------------------------------------------------------------------------- /doc/chihu2-web.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chihu-team/chihu-web-angular/e455d45298cba02da67dfd3923b9a2e1c3254439/doc/chihu2-web.gif -------------------------------------------------------------------------------- /e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { ChihuWebAngularPage } from './app.po'; 2 | 3 | describe('chihu-web-angular App', () => { 4 | let page: ChihuWebAngularPage; 5 | 6 | beforeEach(() => { 7 | page = new ChihuWebAngularPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to app!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class ChihuWebAngularPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": [ 9 | "jasmine", 10 | "jasminewd2", 11 | "node" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/0.13/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular/cli'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular/cli/plugins/karma') 14 | ], 15 | client:{ 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | reports: [ 'html', 'lcovonly' ], 20 | fixWebpackSourcePaths: true 21 | }, 22 | angularCli: { 23 | environment: 'dev' 24 | }, 25 | reporters: ['progress', 'kjhtml'], 26 | port: 9876, 27 | colors: true, 28 | logLevel: config.LOG_INFO, 29 | autoWatch: true, 30 | browsers: ['Chrome'], 31 | singleRun: false 32 | }); 33 | }; 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chihu-web-angular", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build", 9 | "test": "ng test", 10 | "lint": "ng lint", 11 | "e2e": "ng e2e" 12 | }, 13 | "private": true, 14 | "dependencies": { 15 | "@angular/animations": "^4.0.0", 16 | "@angular/common": "^4.0.0", 17 | "@angular/compiler": "^4.0.0", 18 | "@angular/core": "^4.0.0", 19 | "@angular/forms": "^4.0.0", 20 | "@angular/http": "^4.0.0", 21 | "@angular/platform-browser": "^4.0.0", 22 | "@angular/platform-browser-dynamic": "^4.0.0", 23 | "@angular/router": "^4.0.0", 24 | "core-js": "^2.4.1", 25 | "ng2-file-upload": "^1.2.1", 26 | "rxjs": "^5.4.1", 27 | "zone.js": "^0.8.14" 28 | }, 29 | "devDependencies": { 30 | "@angular/cli": "1.2.5", 31 | "@angular/compiler-cli": "^4.0.0", 32 | "@angular/language-service": "^4.0.0", 33 | "@types/jasmine": "~2.5.53", 34 | "@types/jasminewd2": "~2.0.2", 35 | "@types/node": "~6.0.60", 36 | "codelyzer": "~3.0.1", 37 | "jasmine-core": "~2.6.2", 38 | "jasmine-spec-reporter": "~4.1.0", 39 | "karma": "~1.7.0", 40 | "karma-chrome-launcher": "~2.1.1", 41 | "karma-cli": "~1.0.1", 42 | "karma-coverage-istanbul-reporter": "^1.2.1", 43 | "karma-jasmine": "~1.1.0", 44 | "karma-jasmine-html-reporter": "^0.2.2", 45 | "protractor": "~5.1.2", 46 | "ts-node": "~3.0.4", 47 | "tslint": "~5.3.2", 48 | "typescript": "~2.3.3" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './e2e/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: 'e2e/tsconfig.e2e.json' 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /src/app/app,component.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | export default StyleSheet.create({ 4 | 'app-root': { 5 | 'width': [{ 'unit': '%H', 'value': 1 }], 6 | 'height': [{ 'unit': '%V', 'value': 1 }], 7 | 'background': '#f7f8fa' 8 | } 9 | }); 10 | -------------------------------------------------------------------------------- /src/app/app-routes/app-routes.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterModule, Routes } from '@angular/router'; 4 | import { CanActivateService } from './can-activate.service'; 5 | 6 | const appRoutes: Routes = [ 7 | // { path: 'text', component: Test1Component } 8 | { 9 | path: 'login', 10 | loadChildren: 'app/home/login/login.module#LoginModule' 11 | }, 12 | { 13 | path: 'index', 14 | loadChildren: 'app/home/index/index.module#IndexModule', 15 | canActivate: [CanActivateService] 16 | }, 17 | { 18 | path: '', 19 | loadChildren: 'app/home/index/index.module#IndexModule', 20 | canActivate: [CanActivateService] 21 | }, 22 | { 23 | path: 'people/:id', 24 | loadChildren: 'app/home/people/people.module#PeopleModule', 25 | canActivate: [CanActivateService] 26 | }, 27 | { 28 | path: '404', loadChildren: 'app/home/nofound/nofound.module#NofoundModule' 29 | }, 30 | { 31 | path: '**', redirectTo: '/404' 32 | } 33 | ] 34 | 35 | @NgModule({ 36 | imports: [ 37 | CommonModule, 38 | RouterModule.forRoot(appRoutes, { useHash: true }) 39 | ], 40 | exports: [ 41 | RouterModule 42 | ], 43 | declarations: [] 44 | }) 45 | export class AppRoutesModule { } 46 | -------------------------------------------------------------------------------- /src/app/app-routes/can-activate.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { CanActivateService } from './can-activate.service'; 4 | 5 | describe('CanActivateService', () => { 6 | beforeEach(() => { 7 | TestBed.configureTestingModule({ 8 | providers: [CanActivateService] 9 | }); 10 | }); 11 | 12 | it('should be created', inject([CanActivateService], (service: CanActivateService) => { 13 | expect(service).toBeTruthy(); 14 | })); 15 | }); 16 | -------------------------------------------------------------------------------- /src/app/app-routes/can-activate.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { CanActivate } from '@angular/router'; 3 | import { Router } from '@angular/router'; 4 | 5 | @Injectable() 6 | export class CanActivateService { 7 | 8 | constructor( public router: Router ) { } 9 | 10 | canActivate(){ 11 | if( !localStorage.user ){ 12 | this.router.navigate(['login/signup']); 13 | } 14 | return true; 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /src/app/app-routes/resolve-article.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { ResolveArticleService } from './resolve-article.service'; 4 | 5 | describe('ResolveArticleService', () => { 6 | beforeEach(() => { 7 | TestBed.configureTestingModule({ 8 | providers: [ResolveArticleService] 9 | }); 10 | }); 11 | 12 | it('should be created', inject([ResolveArticleService], (service: ResolveArticleService) => { 13 | expect(service).toBeTruthy(); 14 | })); 15 | }); 16 | -------------------------------------------------------------------------------- /src/app/app-routes/resolve-article.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Router, Resolve, ActivatedRouteSnapshot } from '@angular/router'; 3 | import { Headers, Http } from '@angular/http'; 4 | import { Observable } from 'rxjs/Rx'; 5 | import 'rxjs/add/operator/map'; 6 | 7 | @Injectable() 8 | export class ResolveArticleService implements Resolve:{{data.time 10 | | date}}
11 |{{data.dec}}
14 | 25 |{{data.name}}
7 |{{data.len}}
8 |没有任何内容
5 |提示：最多150个字符
8 | 9 |:{{data.time 9 | | date}}
10 |{{data.text}}
16 | 27 |{{i+1}}：{{data.text}}
9 |:{{data.time 9 | | date}}
10 |:{{data.time 8 | | date}}
9 |{{data.text}}
11 |添加菜谱名：
3 | 4 | 7 |菜谱的描述：
8 | 9 |用料：
10 |步骤：
28 |提示：
38 | 39 |无法登陆？
-------------------------------------------------------------------------------- /src/app/home/login/signin/signin.component.scss: -------------------------------------------------------------------------------- 1 | .group-inputs { 2 | width: 100%; 3 | background: #fff; 4 | border: 1px solid #eee; 5 | border-radius: 6px; 6 | margin-bottom: 18px; 7 | overflow: hidden; 8 | .input-wrapper { 9 | width: 100%; 10 | border-bottom: 1px solid #eee; 11 | input { 12 | display: block; 13 | width: calc(100% - 1.6rem); 14 | border: none; 15 | box-shadow: none; 16 | border-radius: 0; 17 | padding: 1rem 0.8rem; 18 | background: #fff; 19 | line-height: 19px; 20 | color: #555; 21 | outline: none; 22 | } 23 | input:focus { 24 | outline: none; 25 | } 26 | } 27 | } 28 | 29 | .btm { 30 | width: 100%; 31 | height: 41px; 32 | background: #0f88eb; 33 | line-height: 41px; 34 | color: #fff; 35 | text-align: center; 36 | border-radius: 4px; 37 | cursor: pointer; 38 | } 39 | 40 | .agreement-tip { 41 | font-size: 13px; 42 | color: #999; 43 | margin-top: 21px; 44 | text-align: right; 45 | } -------------------------------------------------------------------------------- /src/app/home/login/signin/signin.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SigninComponent } from './signin.component'; 4 | 5 | describe('SigninComponent', () => { 6 | let component: SigninComponent; 7 | let fixture: ComponentFixture点击「注册」按钮，即代表你同意《吃乎协议》
-------------------------------------------------------------------------------- /src/app/home/login/signup/signup.component.scss: -------------------------------------------------------------------------------- 1 | .group-inputs { 2 | width: 100%; 3 | background: #fff; 4 | border: 1px solid #eee; 5 | border-radius: 6px; 6 | margin-bottom: 18px; 7 | overflow: hidden; 8 | .input-wrapper { 9 | width: 100%; 10 | border-bottom: 1px solid #eee; 11 | input { 12 | display: block; 13 | width: calc(100% - 1.6rem); 14 | border: none; 15 | box-shadow: none; 16 | border-radius: 0; 17 | padding: 1rem 0.8rem; 18 | background: #fff; 19 | line-height: 19px; 20 | color: #555; 21 | outline: none; 22 | } 23 | input:focus { 24 | outline: none; 25 | } 26 | } 27 | } 28 | 29 | .btm { 30 | width: 100%; 31 | height: 41px; 32 | background: #0f88eb; 33 | line-height: 41px; 34 | color: #fff; 35 | text-align: center; 36 | border-radius: 4px; 37 | cursor: pointer; 38 | } 39 | 40 | .agreement-tip { 41 | font-size: 13px; 42 | color: #999; 43 | margin-top: 21px; 44 | text-align: center; 45 | } -------------------------------------------------------------------------------- /src/app/home/login/signup/signup.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SignupComponent } from './signup.component'; 4 | 5 | describe('SignupComponent', () => { 6 | let component: SignupComponent; 7 | let fixture: ComponentFixture