├── .gitignore ├── History.md ├── LICENSE ├── README.md ├── app ├── app.html ├── app.scss ├── app.ts ├── config.ts ├── models │ ├── article.model.ts │ ├── auth.model.ts │ ├── comment.model.ts │ ├── index.ts │ └── tag.model.ts ├── pages │ ├── article │ │ ├── article.html │ │ ├── article.scss │ │ └── article.ts │ ├── home │ │ ├── home.html │ │ ├── home.scss │ │ └── home.ts │ ├── login │ │ ├── login.html │ │ ├── login.scss │ │ └── login.ts │ └── settings │ │ ├── settings.html │ │ ├── settings.scss │ │ └── settings.ts ├── providers │ ├── article-service.ts │ ├── auth-service.ts │ ├── comment-service.ts │ ├── pipes.ts │ ├── resource-service.ts │ └── tag-service.ts ├── theme │ ├── app.core.scss │ ├── app.ios.scss │ ├── app.md.scss │ ├── app.variables.scss │ └── app.wp.scss └── utils │ └── validator.ts ├── config.xml ├── declare └── toast.d.ts ├── gulpfile.js ├── hooks ├── README.md └── after_prepare │ └── 010_add_platform_class.js ├── ionic.config.json ├── package.json ├── resources ├── android │ ├── icon │ │ ├── drawable-hdpi-icon.png │ │ ├── drawable-ldpi-icon.png │ │ ├── drawable-mdpi-icon.png │ │ ├── drawable-xhdpi-icon.png │ │ ├── drawable-xxhdpi-icon.png │ │ └── drawable-xxxhdpi-icon.png │ └── splash │ │ ├── drawable-land-hdpi-screen.png │ │ ├── drawable-land-ldpi-screen.png │ │ ├── drawable-land-mdpi-screen.png │ │ ├── drawable-land-xhdpi-screen.png │ │ ├── drawable-land-xxhdpi-screen.png │ │ ├── drawable-land-xxxhdpi-screen.png │ │ ├── drawable-port-hdpi-screen.png │ │ ├── drawable-port-ldpi-screen.png │ │ ├── drawable-port-mdpi-screen.png │ │ ├── drawable-port-xhdpi-screen.png │ │ ├── drawable-port-xxhdpi-screen.png │ │ └── drawable-port-xxxhdpi-screen.png ├── icon.png ├── ios │ ├── icon │ │ ├── icon-40.png │ │ ├── icon-40@2x.png │ │ ├── icon-50.png │ │ ├── icon-50@2x.png │ │ ├── icon-60.png │ │ ├── icon-60@2x.png │ │ ├── icon-60@3x.png │ │ ├── icon-72.png │ │ ├── icon-72@2x.png │ │ ├── icon-76.png │ │ ├── icon-76@2x.png │ │ ├── icon-small.png │ │ ├── icon-small@2x.png │ │ ├── icon-small@3x.png │ │ ├── icon.png │ │ └── icon@2x.png │ └── splash │ │ ├── Default-568h@2x~iphone.png │ │ ├── Default-667h.png │ │ ├── Default-736h.png │ │ ├── Default-Landscape-736h.png │ │ ├── Default-Landscape@2x~ipad.png │ │ ├── Default-Landscape~ipad.png │ │ ├── Default-Portrait@2x~ipad.png │ │ ├── Default-Portrait~ipad.png │ │ ├── Default@2x~iphone.png │ │ └── Default~iphone.png ├── preview │ ├── 01.png │ ├── 02.png │ ├── 03.png │ └── 04.png └── splash.png ├── tsconfig.json ├── typings.json └── www ├── img ├── avatar.png └── shanghai.jpg └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies files to intentionally ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | node_modules/ 5 | www/build/ 6 | platforms/ 7 | plugins/ 8 | typings/ 9 | *.swp 10 | .DS_Store 11 | Thumbs.db 12 | -------------------------------------------------------------------------------- /History.md: -------------------------------------------------------------------------------- 1 | [查看Releases](https://github.com/jackhutu/jackblog-ionic2/releases) 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Jack Hu 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Jackblog App ionic2.0 版 3 | [![alt text](http://upload.jackhu.top/icons/android.png "download jackblog app")](http://upload.jackhu.top/downloads/Jackblog-ionic2-1.0.0.apk) 4 | 5 | Jackblog 是使用 Node.js + MongoDB + 其它客户端框架开发的个人博客系统,前后端分离,仿简书模板. 6 | 服务端有: [express 版](https://github.com/jackhutu/jackblog-api-express) , [koa 版](https://github.com/jackhutu/jackblog-api-koa) 7 | 客户端有: [angular1.x 版](https://github.com/jackhutu/jackblog-angular1) , [angular2.x 版](https://github.com/jackhutu/jackblog-angular2) , [react redux 版](https://github.com/jackhutu/jackblog-react-redux) , [vue 版](https://github.com/jackhutu/jackblog-vue) 8 | 移动端有: [react native 版](https://github.com/jackhutu/jackblog-react-native-redux), [ionic2.0 版](https://github.com/jackhutu/jackblog-ionic2) 9 | 10 | > API可参考服务端koa版 11 | > 试用账号: test001@test.com 密码: test001 12 | > 支持平台 IOS 7+, Android 4.4.4+ 13 | 14 | ### 开发 15 | 16 | ``` 17 | $ npm install -g ionic@beta 18 | $ git clone git@github.com:jackhutu/jackblog-ionic2 19 | $ cd jackblog-ionic2 20 | $ npm install 21 | $ ionic platform add ios 22 | $ ionic platform add android 23 | ``` 24 | 25 | ##### 浏览器调试 26 | ``` 27 | $ ionic serve 28 | ``` 29 | > http://localhost:8100/?ionicplatform=android 调试android样式, 默认是ios样式 30 | 31 | ##### 模拟器或者真机调试 32 | ``` 33 | $ ionic emulate ios || ionic emulate ios -lc || ionic run ios 34 | $ ionic emulate android || ionic run android 35 | ``` 36 | 37 | ### 打包 38 | 39 | ``` 40 | $ ionic build || ionic build ios || ionic build android 41 | ``` 42 | 43 | ### 生成apk文件 44 | [http://ionicframework.com/docs/guide/publishing.html](http://ionicframework.com/docs/guide/publishing.html) 45 | 46 | 47 | ### App 预览 48 | 49 | jackblog ionic2 50 | jackblog ionic2 51 | jackblog ionic2 52 | jackblog ionic2 53 | 54 | 55 | ### 目录结构 56 | 57 | ``` 58 | . 59 | ├── README.md 60 | ├── app // 生产目录 61 | │ ├── models // 数据结构文件 62 | │ ├── pages // 组件 63 | │ ├── providers // 可注入的service 64 | │ ├── theme // 主要scss样式文件 65 | │ ├── utils // 工具函数 66 | │ └── config.ts // api url配置文件 67 | │ └── app.html // app模板文件 68 | │ └── app.ts // 项目入口文件 69 | ├── declare // ts项目cordova插件自定义声明文件 70 | ├── hooks // cordova hooks文件 71 | ├── platforms // cordova 生成各平台文件 72 | ├── plugins // cordova 插件目录 73 | ├── resources // icon, splash图片, 可使用ionic生成各种尺寸 74 | ├── typings // ts声明文件 75 | ├── www // 项目build文件存放目录 76 | ├── config.xml // cordova 配置文件 77 | ├── tsconfig.json // typescript 配置文件 78 | ├── typings.json // typings 安装文件列表 79 | . 80 | ``` 81 | 82 | ### ionic2使用注意事项 83 | > 环境: ionic2 beta.3, 时间: 2016.4.7 84 | 85 | 一, 初始化ts 项目方法 86 | ``` 87 | $ ionic start projectName --v2 --ts 88 | ``` 89 | 二. 需要升级部分依赖包,否则会有警告. 90 | ``` 91 | angular2.beta6升级到beta7, 92 | rxjs升级到5.0.0-beta.2, 93 | zone.js升级到0.5.14 94 | ``` 95 | 三. ts项目安装cordova plugins之后还需要使用typings安装相应的声明文件. 96 | 目前只有部分插件, 地址[https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/cordova/plugins](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/cordova/plugins). 97 | 安装方法如下: 98 | ``` 99 | $ typings install -SA cordova 100 | $ typings install -SA cordova/plugins/pluginName 101 | ``` 102 | 四. 目前还如法集成crosswalk 103 | 104 | 105 | ### License 106 | MIT -------------------------------------------------------------------------------- /app/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 | 6 |
7 |
{{user && user.nickname || '未登录'}}
8 |
9 | 10 | 13 | 16 |
17 | 20 | 23 |
24 | 25 | 26 |
27 |

Jack Hu

28 |

有朋自远方来

29 |

不亦乐乎

30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /app/app.scss: -------------------------------------------------------------------------------- 1 | .jackblog-nav{ 2 | ion-navbar>button{ 3 | color:$navbar-button-text-color; 4 | } 5 | } 6 | .side-box{ 7 | background-position: center; 8 | background-size: cover; 9 | .nav-list{ 10 | display: flex; 11 | align-items: left; 12 | flex-direction: column; 13 | justify-content: flex-start; 14 | } 15 | .nav-item{ 16 | flex:1; 17 | margin: 0; 18 | padding-right: 0; 19 | width: 100%; 20 | font-size: 1.2em; 21 | color: $link-color; 22 | .button-inner{ 23 | justify-content: flex-start; 24 | ion-icon{ 25 | width: 1.4em; 26 | } 27 | } 28 | } 29 | .bottom-block { 30 | position: absolute; 31 | bottom: 0; 32 | padding: 30px; 33 | color: white; 34 | } 35 | } 36 | .menu-header{ 37 | width:100%; 38 | display: flex; 39 | flex-direction: column; 40 | align-items: center; 41 | justify-content: center; 42 | padding: 20px 0; 43 | .avatar{ 44 | flex:1; 45 | width: 100px; 46 | height: 100px; 47 | img{ 48 | width: 100%; 49 | height: 100%; 50 | border: 2px solid transparent; 51 | border-radius: 50%; 52 | box-sizing:border-box; 53 | } 54 | } 55 | .username{ 56 | flex:1; 57 | color: white; 58 | margin-top: 10px; 59 | font-size: 1.2em; 60 | height: 40px; 61 | line-height: 40px; 62 | } 63 | } 64 | 65 | //表单 66 | ion-input.ng-invalid.ng-dirty { 67 | color: $bd-warning; 68 | } 69 | 70 | ion-input.ng-valid.ng-dirty { 71 | color: $bd-success; 72 | } 73 | -------------------------------------------------------------------------------- /app/app.ts: -------------------------------------------------------------------------------- 1 | import 'es6-shim' 2 | import {Type} from 'angular2/core' 3 | import {App, Platform, Events, MenuController, IonicApp} from 'ionic-angular' 4 | import {StatusBar} from 'ionic-native' 5 | import {HomePage} from './pages/home/home' 6 | import {SettingsPage} from './pages/settings/settings' 7 | import {LoginPage} from './pages/login/login' 8 | import {ResourceService} from './providers/resource-service' 9 | import {ArticleService} from './providers/article-service' 10 | import {AuthService} from './providers/auth-service' 11 | import {TagService} from './providers/tag-service' 12 | import {CustomTimePipe, FormatDatePipe} from './providers/pipes' 13 | import {Toast} from 'ionic-native' 14 | 15 | @App({ 16 | templateUrl: 'build/app.html', 17 | pipes: [CustomTimePipe,FormatDatePipe], 18 | config: {}, 19 | prodMode: false, 20 | providers: [ResourceService, TagService, AuthService, ArticleService] 21 | }) 22 | export class MyApp { 23 | rootPage: Type = HomePage 24 | loginPage: Type = LoginPage 25 | settingsPage: Type = SettingsPage 26 | user: Object 27 | token: string 28 | defaultAvatar: string = 'img/avatar.png' 29 | 30 | constructor( 31 | public platform: Platform, 32 | public app: IonicApp, 33 | public events: Events, 34 | public menu: MenuController, 35 | public authService: AuthService) { 36 | platform.ready().then(() => { 37 | StatusBar.styleDefault() 38 | }) 39 | this.authService.tokenSubject.subscribe((token:string)=>{ 40 | this.token = token 41 | }) 42 | this.authService.userSubject.subscribe((user:Object)=>{ 43 | this.user = user 44 | }) 45 | this.listenToLoginEvents() 46 | } 47 | 48 | onPageLoaded(){} 49 | 50 | openPage(page){ 51 | this.menu.close() 52 | let nav = this.app.getComponent('nav') 53 | nav.setRoot(page) 54 | } 55 | 56 | logout(){ 57 | this.authService.logout() 58 | } 59 | 60 | listenToLoginEvents() { 61 | this.events.subscribe('user:login', () => { 62 | this.openPage(this.rootPage) 63 | }); 64 | 65 | this.events.subscribe('user:logout', () => { 66 | this.openPage(this.rootPage) 67 | }); 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /app/config.ts: -------------------------------------------------------------------------------- 1 | export const API_ROOT = 'http://api.jackhu.top/' 2 | //export const API_ROOT = 'http://localhost:9000/' -------------------------------------------------------------------------------- /app/models/article.model.ts: -------------------------------------------------------------------------------- 1 | export class ArticleList { 2 | isFetching: boolean 3 | isMore: boolean 4 | items: any[] 5 | constructor(isFetching?: boolean, isMore?: boolean, items?: any[]) { 6 | this.isFetching = isFetching || false 7 | this.isMore = isMore || true 8 | this.items = items || [] 9 | } 10 | } 11 | 12 | export class ArticleDetailModel { 13 | isLike:boolean 14 | like_count:number 15 | title:string 16 | visit_count:number 17 | comment_count:number 18 | content:string 19 | constructor(obj?: any) { 20 | this.isLike = obj && obj.isLike || false 21 | this.like_count = obj && obj.like_count || 0 22 | this.title = obj && obj.title || '' 23 | this.visit_count = obj && obj.visit_count || 0 24 | this.comment_count = obj && obj.comment_count || 0 25 | this.content = obj && obj.content || '' 26 | } 27 | } 28 | 29 | export class PrenextArticleModel { 30 | next: Object 31 | prev: Object 32 | constructor(next?: Object, prev?: Object) { 33 | this.prev = prev || {} 34 | this.next = next || {} 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /app/models/auth.model.ts: -------------------------------------------------------------------------------- 1 | import {Page, Storage, LocalStorage} from 'ionic-angular'; 2 | 3 | export class AuthModel { 4 | token: string 5 | user: Object 6 | constructor(token?: string, user?: Object) { 7 | this.token = token || window.localStorage.getItem('token') || '' 8 | this.user = user || null 9 | } 10 | } -------------------------------------------------------------------------------- /app/models/comment.model.ts: -------------------------------------------------------------------------------- 1 | export class ReplyModel { 2 | user_info: any 3 | created: string 4 | content: string 5 | constructor(obj?: any) { 6 | this.user_info = obj && obj.user_info || {} 7 | this.created = obj && obj.created || '' 8 | this.content = obj && obj.content || '' 9 | } 10 | } 11 | 12 | export class CommentModel { 13 | _id:string 14 | replys: ReplyModel[] 15 | user_id: any 16 | created: string 17 | content: string 18 | constructor(obj?: any) { 19 | this.replys = obj && obj.replys || [new ReplyModel()] 20 | this.user_id = obj && obj.user_id || {} 21 | this.created = obj && obj.created || '' 22 | this.content = obj && obj.content || '' 23 | this._id = obj && obj._id || '' 24 | } 25 | } 26 | 27 | -------------------------------------------------------------------------------- /app/models/index.ts: -------------------------------------------------------------------------------- 1 | export * from './auth.model' 2 | export * from './tag.model' 3 | export * from './article.model' 4 | export * from './comment.model' -------------------------------------------------------------------------------- /app/models/tag.model.ts: -------------------------------------------------------------------------------- 1 | export class TagListModel { 2 | tags: any[] 3 | constructor(tags?: any[]) { 4 | this.tags = tags || [] 5 | } 6 | } 7 | 8 | export class OptionsModel { 9 | currentPage: number 10 | itemsPerPage: number 11 | sortName: string 12 | tagId: string 13 | constructor(currentPage?: number, 14 | itemsPerPage?: number, 15 | sortName?: string, 16 | tagId?: string) { 17 | this.currentPage = currentPage || 1 18 | this.itemsPerPage = itemsPerPage || 10 19 | this.sortName = sortName || 'publish_time' 20 | this.tagId = tagId || '' 21 | } 22 | } -------------------------------------------------------------------------------- /app/pages/article/article.html: -------------------------------------------------------------------------------- 1 | 2 | article 3 | 4 | 5 | 6 |
{{articleDetail.title}}
7 |
8 | 9 | -------------------------------------------------------------------------------- /app/pages/article/article.scss: -------------------------------------------------------------------------------- 1 | .article-details { 2 | .title{ 3 | font-size: 26px; 4 | line-height: 36px; 5 | font-weight: bold; 6 | text-align: center; 7 | margin-bottom: 16px; 8 | } 9 | .markdown-content{ 10 | font-size: 16px; 11 | font-weight: normal; 12 | line-height: 1.7; 13 | a{ 14 | text-decoration: none; 15 | } 16 | h1{ 17 | font-size: 26px; 18 | } 19 | p,ul,ol{ 20 | //单词不截断换行,两端对齐,美化页面 21 | text-align: justify; 22 | text-justify: inter-ideograph; 23 | word-break: break-word; 24 | } 25 | p{ 26 | margin-bottom:25px; 27 | } 28 | blockquote{ 29 | position: relative; 30 | padding: 10px 15px; 31 | margin-bottom: 20px; 32 | border-left:{ 33 | width:4px; 34 | style:solid; 35 | }; 36 | word-break: break-word; 37 | font-size: 15px; 38 | font-weight: 100; 39 | line-height: 30px; 40 | p{ 41 | font-size: 15px; 42 | font-weight: normal; 43 | line-height: 1.7; 44 | } 45 | p:last-child{ 46 | margin: 0; 47 | } 48 | } 49 | ul{ 50 | margin-bottom: 20px; 51 | li{ 52 | line-height: 30px; 53 | } 54 | } 55 | img{ 56 | max-width:100%; 57 | display:block;margin:0 auto; 58 | } 59 | pre{ 60 | word-wrap: normal; 61 | word-break: normal; 62 | overflow: auto; 63 | margin-bottom: 20px; 64 | border: 1px solid rgba(0,0,0,0.15); 65 | padding: 10px 5px; 66 | background-color: #fae5e2; 67 | color: #d96f5d; 68 | code{ 69 | padding: 0; 70 | } 71 | } 72 | code{ 73 | background-color: #fae5e2; 74 | color: #d96f5d; 75 | padding: 2px 4px; 76 | border: none; 77 | white-space: pre; 78 | } 79 | } 80 | } -------------------------------------------------------------------------------- /app/pages/article/article.ts: -------------------------------------------------------------------------------- 1 | import {Page, NavController, NavParams} from 'ionic-angular' 2 | import {HomePage} from '../home/home' 3 | import {ArticleService} from '../../providers/article-service' 4 | import {ArticleDetailModel } from '../../models' 5 | 6 | import {AuthService} from '../../providers/auth-service' 7 | 8 | 9 | @Page({ 10 | templateUrl: 'build/pages/article/article.html', 11 | }) 12 | export class ArticleDetailPage { 13 | aid:string 14 | articleDetail: ArticleDetailModel 15 | user: Object 16 | 17 | constructor( 18 | private nav: NavController, 19 | private params: NavParams, 20 | private articleService: ArticleService, 21 | private authService: AuthService) { 22 | this.aid = params.data.aid 23 | this.articleService.ArticleDetailSubject.subscribe((articleDetail:ArticleDetailModel)=>{ 24 | this.articleDetail = articleDetail 25 | }) 26 | } 27 | 28 | goBack(){ 29 | this.nav.pop(); 30 | } 31 | 32 | onPageLoaded() { 33 | if(!this.aid){ 34 | //this.nav.setRoot(HomePage) 35 | this.nav.setPages([{ page: HomePage }]); 36 | } 37 | this.authService.userSubject.subscribe((user:Object)=>{ 38 | this.user = user 39 | this.articleService.getArticleDetail(this.aid, this.user) 40 | }) 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /app/pages/home/home.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | Jackblog 6 | 7 | 8 | 9 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | {{item.publish_time | customTime}} 22 |
23 |
24 | {{item.title}} 25 |
26 |
27 | 阅读 {{item.visit_count}} · 评论 {{item.comment_count}}· 喜欢 {{item.like_count}} 28 |
29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |

没有更多文章了...

37 | 38 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /app/pages/home/home.scss: -------------------------------------------------------------------------------- 1 | .article-list{ 2 | margin-bottom: 10px; 3 | .article-item{ 4 | padding-left: 0; 5 | } 6 | .article-left{ 7 | display: flex; 8 | flex-direction: column; 9 | height: 100px; 10 | .article-span{ 11 | flex:1; 12 | padding-right: 5px; 13 | } 14 | .article-title{ 15 | overflow:hidden !important; 16 | white-space:nowrap !important; 17 | text-overflow:ellipsis !important; 18 | font-size: 16px; 19 | line-height: 20px; 20 | font-weight: bold; 21 | color: black; 22 | } 23 | } 24 | 25 | .article-right{ 26 | min-width: 100px; 27 | padding: 0; 28 | text-align: right; 29 | img{ 30 | width: 100px !important; 31 | height: 100px !important; 32 | } 33 | } 34 | } 35 | 36 | .noMore{ 37 | font-size:16; 38 | text-align: center; 39 | } -------------------------------------------------------------------------------- /app/pages/home/home.ts: -------------------------------------------------------------------------------- 1 | import {Page, IonicApp, NavController } from 'ionic-angular'; 2 | import { TagListModel, OptionsModel, ArticleList } from '../../models' 3 | import { TagService } from '../../providers/tag-service' 4 | import {ResourceService} from '../../providers/resource-service' 5 | import {CustomTimePipe, FormatDatePipe} from '../../providers/pipes' 6 | import { ArticleDetailPage } from '../article/article' 7 | 8 | @Page({ 9 | templateUrl: 'build/pages/home/home.html', 10 | pipes: [CustomTimePipe,FormatDatePipe] 11 | }) 12 | export class HomePage { 13 | tagList: TagListModel 14 | options: OptionsModel 15 | articleList: any[] 16 | isFetching: boolean 17 | isMore: boolean 18 | 19 | constructor(public tagService: TagService, public app: IonicApp, private nav: NavController) { 20 | tagService.optionSubject.subscribe((options:OptionsModel)=>{ 21 | this.options = options 22 | }) 23 | 24 | tagService.isFetchingSubject.subscribe((isFetching:boolean)=>{ 25 | this.isFetching = isFetching 26 | }) 27 | tagService.isMoreSubject.subscribe((isMore: boolean) => { 28 | this.isMore = isMore 29 | }) 30 | tagService.articleListSubject.subscribe((articleList:any[])=>{ 31 | this.articleList = articleList 32 | }) 33 | } 34 | 35 | doRefresh(refresher) { 36 | this.tagService.changeOptions() 37 | this.tagService.getArticleList() 38 | setTimeout(() => { 39 | refresher.complete() 40 | let infiniteScroll = this.app.getComponent('infinite') 41 | infiniteScroll.enable(true) 42 | }, 500); 43 | } 44 | 45 | doInfinite(infiniteScroll) { 46 | let currentPage = this.options.currentPage 47 | let newOptions = new OptionsModel( 48 | ++currentPage, 49 | this.options.itemsPerPage, 50 | this.options.sortName, 51 | this.options.tagId) 52 | this.tagService.getArticleList(newOptions, true, this.articleList) 53 | this.tagService.changeOptions(newOptions) 54 | 55 | setTimeout(() => { 56 | infiniteScroll.complete() 57 | if(!this.isMore){ 58 | infiniteScroll.enable(false) 59 | } 60 | }, 500); 61 | } 62 | 63 | pushPage(aid) { 64 | this.nav.push(ArticleDetailPage, { aid: aid }); 65 | } 66 | 67 | } 68 | -------------------------------------------------------------------------------- /app/pages/login/login.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | login 6 | 7 | 8 | 9 |
12 | 13 | 16 | 17 | 20 | 21 | 22 |
23 | 24 |
25 |
26 | 27 | -------------------------------------------------------------------------------- /app/pages/login/login.scss: -------------------------------------------------------------------------------- 1 | .signin-item{ 2 | padding: 0; 3 | border-top: none !important; 4 | font-size: 1.6rem; 5 | } 6 | 7 | .signin-captcha{ 8 | border-bottom: 1px solid #c8c7cc; 9 | .captcha-input{ 10 | padding: 0; 11 | } 12 | } -------------------------------------------------------------------------------- /app/pages/login/login.ts: -------------------------------------------------------------------------------- 1 | import {Page, NavController} from 'ionic-angular' 2 | import { 3 | CORE_DIRECTIVES, 4 | FORM_DIRECTIVES, 5 | FormBuilder, 6 | ControlGroup, 7 | Control, 8 | Validators, 9 | AbstractControl } from 'angular2/common' 10 | import {AuthService} from '../../providers/auth-service' 11 | import {emailValidator} from '../../utils/validator' 12 | import {HomePage} from '../home/home' 13 | 14 | @Page({ 15 | templateUrl: 'build/pages/login/login.html', 16 | }) 17 | export class LoginPage { 18 | signinForm: ControlGroup 19 | email: AbstractControl 20 | password: AbstractControl 21 | constructor( 22 | fb: FormBuilder, 23 | public authService: AuthService, 24 | public nav: NavController) { 25 | this.signinForm = fb.group({ 26 | 'email': ['', Validators.compose([ 27 | Validators.minLength(3), 28 | Validators.maxLength(30), 29 | Validators.required, 30 | emailValidator 31 | ])], 32 | 'password': ['', Validators.required] 33 | }) 34 | this.email = this.signinForm.controls['email'] 35 | this.password = this.signinForm.controls['password'] 36 | } 37 | onSubmit(user: Object): void { 38 | //提交登录 39 | this.authService.localLogin(user) 40 | } 41 | } -------------------------------------------------------------------------------- /app/pages/settings/settings.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | settings 6 | 7 | 8 | 9 |
12 | 13 | 20 | 21 |
22 | 23 |
24 |
25 | 26 | -------------------------------------------------------------------------------- /app/pages/settings/settings.scss: -------------------------------------------------------------------------------- 1 | .settings { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /app/pages/settings/settings.ts: -------------------------------------------------------------------------------- 1 | import {Page, NavController} from 'ionic-angular' 2 | import { 3 | CORE_DIRECTIVES, 4 | FORM_DIRECTIVES, 5 | FormBuilder, 6 | ControlGroup, 7 | Control, 8 | Validators, 9 | AbstractControl } from 'angular2/common' 10 | import {AuthService} from '../../providers/auth-service' 11 | import {nicknameValidator} from '../../utils/validator' 12 | import {HomePage} from '../home/home' 13 | 14 | @Page({ 15 | templateUrl: 'build/pages/settings/settings.html', 16 | }) 17 | export class SettingsPage { 18 | settingsForm: ControlGroup 19 | nickname: AbstractControl 20 | userNickname:string = '' 21 | 22 | constructor( 23 | fb: FormBuilder, 24 | public nav: NavController, 25 | private authService: AuthService) { 26 | this.settingsForm = fb.group({ 27 | 'nickname': ['', Validators.compose([ 28 | Validators.minLength(2), 29 | Validators.maxLength(15), 30 | Validators.required, 31 | nicknameValidator 32 | ])] 33 | }) 34 | this.nickname = this.settingsForm.controls['nickname'] 35 | this.authService.userSubject.subscribe((user:any)=>{ 36 | this.userNickname = user && user.nickname || '' 37 | }) 38 | } 39 | onPageLoaded(){ 40 | if (!this.authService.getToken()) { 41 | this.nav.setRoot(HomePage) 42 | } 43 | } 44 | 45 | onSubmit(user: Object): void { 46 | //提交登录 47 | this.authService.updateUser(user) 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /app/providers/article-service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, bind } from 'angular2/core' 2 | import { Subject, BehaviorSubject, Observable, ReplaySubject } from 'rxjs' 3 | import { Response } from 'angular2/http' 4 | import { ArticleDetailModel,PrenextArticleModel,OptionsModel } from '../models' 5 | import { ResourceService } from './resource-service' 6 | import { AuthService } from './auth-service' 7 | 8 | @Injectable() 9 | export class ArticleService { 10 | articleDetailInitialState: ArticleDetailModel = new ArticleDetailModel 11 | prenextInitialState: PrenextArticleModel = new PrenextArticleModel 12 | ArticleDetailSubject: Subject = new BehaviorSubject(this.articleDetailInitialState) 13 | prenextSubject: Subject = new BehaviorSubject(this.prenextInitialState) 14 | constructor(public rs: ResourceService, public authService: AuthService) { } 15 | 16 | getArticleDetail(id: string, user?: any) { 17 | this.rs.getFrontArticle(id) 18 | .map((res: Response) => { 19 | let isLike = false 20 | let article = res.json().data 21 | if(user && user.likes){ 22 | user.likes.map(item=>{ 23 | if(item.toString() === article._id){ 24 | isLike = true 25 | } 26 | }) 27 | } 28 | article.isLike = isLike 29 | return article 30 | }) 31 | .subscribe((article: ArticleDetailModel) => { 32 | this.ArticleDetailSubject.next(article) 33 | }, (err: Response) => { 34 | this.ArticleDetailSubject.next(this.articleDetailInitialState) 35 | }) 36 | } 37 | toggleLike(id:string,articleDetail:ArticleDetailModel){ 38 | this.rs.toggleLike(id) 39 | .map((res: Response) => { 40 | let like_count = res.json().count 41 | let isLike = res.json().isLike 42 | articleDetail.isLike = isLike 43 | articleDetail.like_count = like_count 44 | return articleDetail 45 | }) 46 | .subscribe((articleDetail: any) => { 47 | this.authService.getUserInfo() 48 | this.ArticleDetailSubject.next(articleDetail) 49 | }) 50 | } 51 | 52 | getPrenext(id: string, options: OptionsModel) { 53 | this.rs.getPrenext(id,options) 54 | .subscribe((res:Response)=>{ 55 | this.prenextSubject.next(res.json().data) 56 | },(err:Response)=>{ 57 | this.prenextSubject.next(this.prenextInitialState) 58 | }) 59 | } 60 | } -------------------------------------------------------------------------------- /app/providers/auth-service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, bind } from 'angular2/core' 2 | import { Http, Response, Headers, RequestOptions } from 'angular2/http' 3 | import {Subject, BehaviorSubject, ReplaySubject, Observable} from 'rxjs' 4 | import {Page, Storage, LocalStorage, Events} from 'ionic-angular' 5 | import { ResourceService } from './resource-service' 6 | import { AuthModel } from '../models' 7 | import { API_ROOT } from '../config' 8 | import {Dialogs} from 'ionic-native' 9 | 10 | @Injectable() 11 | export class AuthService { 12 | authInitialState: AuthModel = new AuthModel() 13 | tokenSubject: Subject = new BehaviorSubject(this.authInitialState.token) 14 | userSubject: Subject = new ReplaySubject(1) 15 | snsLoginsSubject: Subject = new ReplaySubject(1) 16 | storage:any 17 | 18 | constructor( 19 | public http: Http, 20 | public rs: ResourceService, 21 | public events: Events 22 | ) { 23 | this.storage = new Storage(LocalStorage) 24 | //token, 如果cookie存在, 则 25 | if (this.authInitialState.token !== ''){ 26 | this.getUserInfo() 27 | }else{ 28 | this.userSubject.next(this.authInitialState.user) 29 | } 30 | this.getSnsLogins() 31 | } 32 | 33 | saveToken(value: string): void { 34 | this.storage.set('token', value) 35 | } 36 | getToken() { 37 | return this.storage.get('token') 38 | } 39 | delToken():void { 40 | this.storage.remove('token') 41 | } 42 | //登录请求. 43 | localLogin(data: Object):void { 44 | this.rs.localLogin(data) 45 | .subscribe((res: Response) => { 46 | //成功 47 | let token = res.json().token 48 | this.saveToken(token) 49 | this.tokenSubject.next(token) 50 | this.getUserInfo() 51 | this.events.publish('user:login') 52 | window.plugins && window.plugins.toast.showShortCenter('登录成功, 欢迎光临!') 53 | },(err:any)=>{ 54 | Dialogs.alert(err.json() && err.json().error_msg || '登录失败') 55 | }) 56 | 57 | } 58 | getUserInfo():void{ 59 | this.rs.getMe().subscribe((res:Response)=>{ 60 | this.userSubject.next(res.json()) 61 | }) 62 | } 63 | logout():void{ 64 | this.delToken() 65 | this.tokenSubject.next('') 66 | this.userSubject.next(this.authInitialState.user) 67 | this.events.publish('user:logout') 68 | } 69 | 70 | updateUser(data:Object):void{ 71 | this.rs.mdUser(data).subscribe((res:Response)=>{ 72 | this.userSubject.next(res.json().data) 73 | window.plugins && window.plugins.toast.showShortCenter('更新用户成功!') 74 | },(err:any)=>{ 75 | Dialogs.alert(err.json() && err.json().error_msg || '更新用户资料失败') 76 | }) 77 | } 78 | getSnsLogins(){ 79 | this.rs.getSnsLogins() 80 | .subscribe((res:Response)=>{ 81 | this.snsLoginsSubject.next(res.json().data) 82 | },(err)=>{ 83 | this.snsLoginsSubject.next([]) 84 | }) 85 | } 86 | 87 | } -------------------------------------------------------------------------------- /app/providers/comment-service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, bind } from 'angular2/core' 2 | import { Subject, BehaviorSubject, Observable, ReplaySubject } from 'rxjs' 3 | import { Response } from 'angular2/http' 4 | import { CommentModel,ReplyModel } from '../models' 5 | import { ResourceService } from './resource-service' 6 | 7 | @Injectable() 8 | export class CommentService { 9 | commentListInitialState: CommentModel[] = [ 10 | new CommentModel() 11 | ] 12 | commentListSubject: Subject = new BehaviorSubject(this.commentListInitialState) 13 | constructor(public rs: ResourceService) {} 14 | 15 | getCommentList(id: string) { 16 | this.rs.getFrontCommentList(id) 17 | .subscribe((res:Response) => { 18 | this.commentListSubject.next(res.json().data) 19 | }, (err: Response) => { 20 | this.commentListSubject.next(this.commentListInitialState) 21 | }) 22 | } 23 | 24 | addComment(data:any,comments:CommentModel[]) { 25 | this.rs.addNewComment(data) 26 | .subscribe((res:Response) => { 27 | comments.push(res.json().data) 28 | this.commentListSubject.next(comments) 29 | }, (err: Response) => { 30 | this.commentListSubject.next(comments) 31 | }) 32 | } 33 | 34 | addReply(cid: string, data: any, comments: CommentModel[]): void { 35 | this.rs.addNewReply(cid,data) 36 | .map((res: Response) => { 37 | let replys = res.json().data 38 | let newComment = comments.map((item)=>{ 39 | if(item._id === cid){ 40 | item.replys = replys 41 | } 42 | return item 43 | }) 44 | return newComment 45 | }) 46 | .subscribe((newComment: CommentModel[]) => { 47 | this.commentListSubject.next(newComment) 48 | }, (err) => { 49 | this.commentListSubject.next(comments) 50 | }) 51 | } 52 | } -------------------------------------------------------------------------------- /app/providers/pipes.ts: -------------------------------------------------------------------------------- 1 | import {Injectable, Inject, Pipe} from 'angular2/core' 2 | 3 | @Pipe({ name: 'customTime' }) 4 | export class CustomTimePipe { 5 | minuteTime: number = 60 * 1000 6 | hourTime: number = 60 * this.minuteTime 7 | dayTime: number = 24 * this.hourTime 8 | monthTime: number = this.dayTime * 30 9 | yearTime: number = this.monthTime * 12 10 | nowTime:number = new Date().getTime() 11 | transform(item: string): string { 12 | let publishTime:number = new Date(item).getTime(); 13 | let historyTime:number = this.nowTime - publishTime 14 | let descTime:string 15 | if(historyTime >= this.yearTime){ 16 | //按年算 17 | descTime = Math.floor(historyTime / this.yearTime) + '年前' 18 | }else if(historyTime< this.yearTime && historyTime >= this.monthTime){ 19 | //按月算 20 | descTime = Math.floor(historyTime / this.monthTime) + '月前' 21 | }else if(historyTime< this.monthTime && historyTime>= this.dayTime){ 22 | //按天算 23 | descTime = Math.floor(historyTime / this.dayTime) + '天前' 24 | }else if(historyTime< this.dayTime && historyTime>= this.hourTime){ 25 | //按小时算 26 | descTime = Math.floor(historyTime / this.hourTime) + '小时前' 27 | }else if(historyTime< this.hourTime && historyTime>= this.minuteTime){ 28 | //按分钟算 29 | descTime = Math.floor(historyTime / this.minuteTime) + '分钟前' 30 | }else{ 31 | descTime = '刚刚' 32 | } 33 | return descTime 34 | } 35 | } 36 | 37 | @Pipe({ name: 'formatDate' }) 38 | export class FormatDatePipe { 39 | transform(time: string): string { 40 | let tmpDate = new Date(time) 41 | let year = tmpDate.getFullYear() 42 | let mathon = tmpDate.getMonth() + 1 43 | let day = tmpDate.getDate() 44 | let hours = tmpDate.getHours() 45 | let minutes = tmpDate.getMinutes() 46 | return year + '.' + mathon + '.' + day + ' ' + hours + ':' + minutes 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /app/providers/resource-service.ts: -------------------------------------------------------------------------------- 1 | import {Injectable, Inject} from 'angular2/core' 2 | import { Http, Response, Headers, RequestOptions, URLSearchParams } from 'angular2/http' 3 | import {Page, Storage, LocalStorage} from 'ionic-angular' 4 | import {Subject, BehaviorSubject, Observable} from 'rxjs' 5 | import * as querystring from 'querystring' 6 | import { API_ROOT } from '../config' 7 | 8 | 9 | @Injectable() 10 | export class ResourceService { 11 | headers:Headers = new Headers() 12 | 13 | constructor(public http: Http) { 14 | this.headers.append('Content-Type', 'application/json') 15 | this.headers.append('jackblog', 'ionic2') 16 | } 17 | interceptor():RequestOptions{ 18 | const opts:RequestOptions = new RequestOptions() 19 | opts.headers = this.headers 20 | const token = window.localStorage.getItem('token') 21 | if (token && !opts.headers.get('Authorization')) { 22 | opts.headers.append('Authorization', 23 | 'Bearer ' + token.replace(/(^\")|(\"$)/g, '')) 24 | } 25 | return opts 26 | } 27 | //登录请求. 28 | localLogin(data: Object): Observable { 29 | return this.http.post(API_ROOT + 'auth/local', JSON.stringify(data), this.interceptor()) 30 | } 31 | getSnsLogins(): Observable { 32 | return this.http.get(API_ROOT + 'users/snsLogins', this.interceptor()) 33 | } 34 | getMe(): Observable { 35 | return this.http.get(API_ROOT + 'users/me', this.interceptor()) 36 | } 37 | mdUser(data: Object): Observable { 38 | return this.http.put(API_ROOT + 'users/mdUser', JSON.stringify(data), this.interceptor()) 39 | } 40 | 41 | getTagList(): Observable { 42 | return this.http.get(API_ROOT + 'tags/getFrontTagList', this.interceptor()) 43 | } 44 | getApps(): Observable { 45 | return this.http.get(API_ROOT + 'mobile/getApps', this.interceptor()) 46 | } 47 | //article 48 | getIndexImage(): Observable { 49 | return this.http.get(API_ROOT + 'article/getIndexImage', this.interceptor()) 50 | } 51 | getFrontArticleList(options:Object): Observable { 52 | let params: RequestOptions = this.interceptor() 53 | params.search = new URLSearchParams(querystring.stringify(options)) 54 | return this.http.get(API_ROOT + 'article/getFrontArticleList', params) 55 | } 56 | getFrontArticleCount(): Observable { 57 | return this.http.get(API_ROOT + 'article/getFrontArticleCount', this.interceptor()) 58 | } 59 | getFrontArticle(id: string): Observable { 60 | return this.http.get(API_ROOT + 'article/' + id + '/getFrontArticle', this.interceptor()) 61 | } 62 | toggleLike(id: string): Observable { 63 | return this.http.put(API_ROOT + 'article/' + id + '/toggleLike', '', this.interceptor()) 64 | } 65 | getPrenext(id:string, options:Object): Observable { 66 | let params: RequestOptions = this.interceptor() 67 | params.search = new URLSearchParams(querystring.stringify(options)) 68 | return this.http.get(API_ROOT + 'article/' + id + '/getPrenext', params) 69 | } 70 | //comment 71 | getFrontCommentList(id:string): Observable { 72 | return this.http.get(API_ROOT + 'comment/' + id + '/getFrontCommentList', this.interceptor()) 73 | } 74 | addNewComment(data: Object): Observable { 75 | return this.http.post(API_ROOT + 'comment/addNewComment', JSON.stringify(data), this.interceptor()) 76 | } 77 | addNewReply(id:string,data:Object):Observable { 78 | return this.http.post(API_ROOT + 'comment/'+ id +'/addNewReply', 79 | JSON.stringify(data), this.interceptor()) 80 | } 81 | } 82 | 83 | -------------------------------------------------------------------------------- /app/providers/tag-service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, bind } from 'angular2/core' 2 | import {Subject, BehaviorSubject, Observable, ReplaySubject} from 'rxjs' 3 | import { Response } from 'angular2/http' 4 | import { TagListModel, OptionsModel, ArticleList } from '../models' 5 | import { ResourceService } from './resource-service' 6 | 7 | let initialArticleList: any[] = [] 8 | 9 | @Injectable() 10 | export class TagService { 11 | articleListInitialState:ArticleList = new ArticleList() 12 | optionsInitialState: OptionsModel = new OptionsModel() 13 | articleListSubject: Subject = new ReplaySubject(1) 14 | tagListSubject: Subject = new ReplaySubject(1) 15 | optionSubject: Subject = new BehaviorSubject(this.optionsInitialState) 16 | isFetchingSubject: Subject = new BehaviorSubject(this.articleListInitialState.isFetching) 17 | isMoreSubject: Subject = new BehaviorSubject(this.articleListInitialState.isMore) 18 | 19 | constructor(public rs: ResourceService) { 20 | this.getTagList() 21 | this.getArticleList(new OptionsModel()) 22 | } 23 | 24 | getTagList():void{ 25 | this.rs.getTagList() 26 | .subscribe((res:Response)=>{ 27 | this.tagListSubject.next(res.json().data) 28 | }, (err: Response) => { 29 | this.tagListSubject.next(new TagListModel()) 30 | }) 31 | } 32 | changeOptions(options: OptionsModel = this.optionsInitialState) { 33 | this.optionSubject.next(options) 34 | } 35 | getArticleList(options: OptionsModel = this.optionsInitialState, isAdd = false, prevArtilcles = initialArticleList): void { 36 | this.rs.getFrontArticleList(options) 37 | .do(() => this.isFetchingSubject.next(true)) 38 | .map((res:Response)=>{ 39 | let artricles = res.json().data 40 | if(artricles.length < options.itemsPerPage){ 41 | this.isMoreSubject.next(false) 42 | }else{ 43 | this.isMoreSubject.next(true) 44 | } 45 | return artricles 46 | }) 47 | .reduce((acc, currentValue) => { 48 | if(isAdd){ 49 | return [...acc, ...currentValue] 50 | }else{ 51 | return [...currentValue] 52 | } 53 | }, prevArtilcles) 54 | .subscribe((artricles:any[])=>{ 55 | this.isFetchingSubject.next(false) 56 | this.articleListSubject.next(artricles) 57 | },(err)=>{ 58 | this.isFetchingSubject.next(false) 59 | },()=>{ 60 | this.isFetchingSubject.next(false) 61 | }) 62 | } 63 | 64 | } -------------------------------------------------------------------------------- /app/theme/app.core.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/v2/theming/ 2 | 3 | 4 | // App Shared Imports 5 | // -------------------------------------------------- 6 | // These are the imports which make up the design of this app. 7 | // By default each design mode includes these shared imports. 8 | // App Shared Sass variables belong in app.variables.scss. 9 | 10 | @import "../app"; 11 | @import "../pages/home/home"; 12 | @import "../pages/settings/settings"; 13 | @import "../pages/login/login"; 14 | @import "../pages/article/article"; 15 | -------------------------------------------------------------------------------- /app/theme/app.ios.scss: -------------------------------------------------------------------------------- 1 | 2 | // http://ionicframework.com/docs/v2/theming/ 3 | 4 | 5 | // App Shared Variables 6 | // -------------------------------------------------- 7 | // Shared Sass variables go in the app.variables.scss file 8 | @import 'app.variables'; 9 | 10 | 11 | // App iOS Variables 12 | // -------------------------------------------------- 13 | // iOS only Sass variables can go here 14 | 15 | 16 | // Ionic iOS Sass 17 | // -------------------------------------------------- 18 | // Custom App variables must be declared before importing Ionic. 19 | // Ionic will use its default values when a custom variable isn't provided. 20 | @import 'ionic.ios'; 21 | 22 | 23 | // App Shared Sass 24 | // -------------------------------------------------- 25 | // All Sass files that make up this app goes into the app.core.scss file. 26 | // For simpler CSS overrides, custom app CSS must come after Ionic's CSS. 27 | @import 'app.core'; 28 | 29 | 30 | // App iOS Only Sass 31 | // -------------------------------------------------- 32 | // CSS that should only apply to the iOS app 33 | -------------------------------------------------------------------------------- /app/theme/app.md.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/v2/theming/ 2 | 3 | 4 | // App Shared Variables 5 | // -------------------------------------------------- 6 | // Shared Sass variables go in the app.variables.scss file 7 | @import 'app.variables'; 8 | 9 | 10 | // App Material Design Variables 11 | // -------------------------------------------------- 12 | // Material Design only Sass variables can go here 13 | 14 | 15 | // Ionic Material Design Sass 16 | // -------------------------------------------------- 17 | // Custom App variables must be declared before importing Ionic. 18 | // Ionic will use its default values when a custom variable isn't provided. 19 | @import 'ionic.md'; 20 | 21 | 22 | // App Shared Sass 23 | // -------------------------------------------------- 24 | // All Sass files that make up this app goes into the app.core.scss file. 25 | // For simpler CSS overrides, custom app CSS must come after Ionic's CSS. 26 | @import 'app.core'; 27 | 28 | 29 | // App Material Design Only Sass 30 | // -------------------------------------------------- 31 | // CSS that should only apply to the Material Design app 32 | -------------------------------------------------------------------------------- /app/theme/app.variables.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/v2/theming/ 2 | 3 | 4 | // App Shared Variables 5 | // -------------------------------------------------- 6 | // To customize the look and feel of this app, you can override 7 | // the Sass variables found in Ionic's source scss files. Setting 8 | // variables before Ionic's Sass will use these variables rather than 9 | // Ionic's default Sass variable values. App Shared Sass imports belong 10 | // in the app.core.scss file and not this file. Sass variables specific 11 | // to the mode belong in either the app.ios.scss or app.md.scss files. 12 | 13 | 14 | // App Shared Color Variables 15 | // -------------------------------------------------- 16 | // It's highly recommended to change the default colors 17 | // to match your app's branding. Ionic uses a Sass map of 18 | // colors so you can add, rename and remove colors as needed. 19 | // The "primary" color is the only required color in the map. 20 | // Both iOS and MD colors can be further customized if colors 21 | // are different per mode. 22 | 23 | $colors: ( 24 | primary: #387ef5, 25 | secondary: #32db64, 26 | danger: #f53d3d, 27 | light: #f4f4f4, 28 | dark: #222, 29 | favorite: #69BB7B 30 | ); 31 | $toolbar-background: #e78170; 32 | $toolbar-border-color: #e78170; 33 | $toolbar-text-color: #ffffff; 34 | $bd-primary: #337ab7; 35 | $bd-success: #5cb85c; 36 | $bd-info: #5bc0de; 37 | $bd-warning: #f0ad4e; 38 | $bd-danger: #d9534f; 39 | $navbar-button-text-color: #fff; 40 | -------------------------------------------------------------------------------- /app/theme/app.wp.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/v2/theming/ 2 | 3 | 4 | // App Shared Variables 5 | // -------------------------------------------------- 6 | // Shared Sass variables go in the app.variables.scss file 7 | @import 'app.variables'; 8 | 9 | 10 | // App Windows Variables 11 | // -------------------------------------------------- 12 | // Windows only Sass variables can go here 13 | 14 | 15 | // Ionic Windows Sass 16 | // -------------------------------------------------- 17 | // Custom App variables must be declared before importing Ionic. 18 | // Ionic will use its default values when a custom variable isn't provided. 19 | @import "ionic.wp"; 20 | 21 | 22 | // App Shared Sass 23 | // -------------------------------------------------- 24 | // All Sass files that make up this app goes into the app.core.scss file. 25 | // For simpler CSS overrides, custom app CSS must come after Ionic's CSS. 26 | @import 'app.core'; 27 | 28 | 29 | // App Windows Only Sass 30 | // -------------------------------------------------- 31 | // CSS that should only apply to the Windows app 32 | -------------------------------------------------------------------------------- /app/utils/validator.ts: -------------------------------------------------------------------------------- 1 | import { 2 | CORE_DIRECTIVES, 3 | FORM_DIRECTIVES, 4 | FormBuilder, 5 | ControlGroup, 6 | Control, 7 | Validators, 8 | AbstractControl } from 'angular2/common' 9 | 10 | export function emailValidator(control: Control): { [s: string]: boolean } { 11 | if (!control.value.match(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/)) { 12 | return { invalidEmail: true }; 13 | } 14 | } 15 | 16 | export function nicknameValidator(control: Control): { [s: string]: boolean } { 17 | if (!control.value.match(/^[(\u4e00-\u9fa5)0-9a-zA-Z\_\s@]+$/)) { 18 | return { invalidNickname: true }; 19 | } 20 | } -------------------------------------------------------------------------------- /config.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | jackblog-ionic2 4 | Jack Hu's blog for ionic2.0 5 | Jack Hu 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /declare/toast.d.ts: -------------------------------------------------------------------------------- 1 | interface Window { 2 | /** 3 | * @description Stub for the plugins variable. 4 | */ 5 | plugins: Plugins; 6 | } 7 | 8 | interface Plugins { 9 | toast: ToastPlugin; 10 | } 11 | 12 | interface ToastPlugin { 13 | /** 14 | * Shows a toast message with the specified duration and position. 15 | * 16 | * @param message The text for the toast message. 17 | * @param duration How long the toast should be visible ('short' or 'long'). 18 | * @param position Where the toast should show ('top', 'center', or 'bottom'). 19 | */ 20 | show(message: string, duration: string, position: string): void; 21 | 22 | /** 23 | * Shows a toast message with the specified duration and position. 24 | * 25 | * @param message The text for the toast message. 26 | * @param duration How long the toast should be visible ('short' or 'long'). 27 | * @param position Where the toast should show ('top', 'center', or 'bottom'). 28 | * @param successCallback Executed if the toast was displayed successfully. 29 | * @param errorCallback Executed if the toast had problems being displayed. 30 | */ 31 | show(message: string, duration: string, position: string, successCallback: () => void, errorCallback: (error: Error) => void): void; 32 | 33 | /** 34 | * Shows a toast message with a long duration at the bottom of the screen. 35 | * 36 | * @param message The text for the toast message. 37 | */ 38 | showLongBottom(message: string); 39 | 40 | /** 41 | * Shows a toast message with a long duration at the bottom of the screen. 42 | * 43 | * @param message The text for the toast message. 44 | * @param successCallback Executed if the toast was displayed successfully. 45 | * @param errorCallback Executed if the toast had problems being displayed. 46 | */ 47 | showLongBottom(message: string, successCallback: () => void, errorCallback: (error: Error) => void): void; 48 | 49 | /** 50 | * Shows a toast message with a long duration at the center of the screen. 51 | * 52 | * @param message The text for the toast message. 53 | */ 54 | showLongCenter(message: string); 55 | 56 | /** 57 | * Shows a toast message with a long duration at the center of the screen. 58 | * 59 | * @param message The text for the toast message. 60 | * @param successCallback Executed if the toast was displayed successfully. 61 | * @param errorCallback Executed if the toast had problems being displayed. 62 | */ 63 | showLongCenter(message: string, successCallback: () => void, errorCallback: (error: Error) => void): void; 64 | 65 | /** 66 | * Shows a toast message with a long duration at the top of the screen. 67 | * 68 | * @param message The text for the toast message. 69 | */ 70 | showLongTop(message: string); 71 | 72 | /** 73 | * Shows a toast message with a long duration at the top of the screen. 74 | * 75 | * @param message The text for the toast message. 76 | * @param successCallback Executed if the toast was displayed successfully. 77 | * @param errorCallback Executed if the toast had problems being displayed. 78 | */ 79 | showLongTop(message: string, successCallback: () => void, errorCallback: (error: Error) => void): void; 80 | 81 | /** 82 | * Shows a toast message with a short duration at the bottom of the screen. 83 | * 84 | * @param message The text for the toast message. 85 | */ 86 | showShortBottom(message: string); 87 | 88 | /** 89 | * Shows a toast message with a short duration at the bottom of the screen. 90 | * 91 | * @param message The text for the toast message. 92 | * @param successCallback Executed if the toast was displayed successfully. 93 | * @param errorCallback Executed if the toast had problems being displayed. 94 | */ 95 | showShortBottom(message: string, successCallback: () => void, errorCallback: (error: Error) => void): void; 96 | 97 | 98 | /** 99 | * Shows a toast message with a sort duration at the center of the screen. 100 | * 101 | * @param message The text for the toast message. 102 | */ 103 | showShortCenter(message: string); 104 | 105 | /** 106 | * Shows a toast message with a short duration at the center of the screen. 107 | * 108 | * @param message The text for the toast message. 109 | * @param successCallback Executed if the toast was displayed successfully. 110 | * @param errorCallback Executed if the toast had problems being displayed. 111 | */ 112 | showShortCenter(message: string, successCallback: () => void, errorCallback: (error: Error) => void): void; 113 | 114 | /** 115 | * Shows a toast message with a short duration at the top of the screen. 116 | * 117 | * @param message The text for the toast message. 118 | */ 119 | showShortTop(message: string); 120 | 121 | /** 122 | * Shows a toast message with a short duration at the top of the screen. 123 | * 124 | * @param message The text for the toast message. 125 | * @param successCallback Executed if the toast was displayed successfully. 126 | * @param errorCallback Executed if the toast had problems being displayed. 127 | */ 128 | showShortTop(message: string, successCallback: () => void, errorCallback: (error: Error) => void): void; 129 | } -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | gulpWatch = require('gulp-watch'), 3 | del = require('del'), 4 | argv = process.argv; 5 | 6 | 7 | /** 8 | * Ionic hooks 9 | * Add ':before' or ':after' to any Ionic project command name to run the specified 10 | * tasks before or after the command. 11 | */ 12 | gulp.task('serve:before', ['watch']); 13 | gulp.task('emulate:before', ['build']); 14 | gulp.task('deploy:before', ['build']); 15 | gulp.task('build:before', ['build']); 16 | 17 | // we want to 'watch' when livereloading 18 | var shouldWatch = argv.indexOf('-l') > -1 || argv.indexOf('--livereload') > -1; 19 | gulp.task('run:before', [shouldWatch ? 'watch' : 'build']); 20 | 21 | /** 22 | * Ionic Gulp tasks, for more information on each see 23 | * https://github.com/driftyco/ionic-gulp-tasks 24 | * 25 | * Using these will allow you to stay up to date if the default Ionic 2 build 26 | * changes, but you are of course welcome (and encouraged) to customize your 27 | * build however you see fit. 28 | */ 29 | var buildBrowserify = require('ionic-gulp-browserify-typescript'); 30 | var buildSass = require('ionic-gulp-sass-build'); 31 | var copyHTML = require('ionic-gulp-html-copy'); 32 | var copyFonts = require('ionic-gulp-fonts-copy'); 33 | var copyScripts = require('ionic-gulp-scripts-copy'); 34 | 35 | gulp.task('watch', ['sass', 'html', 'fonts', 'scripts'], function(){ 36 | gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); }); 37 | gulpWatch('app/**/*.html', function(){ gulp.start('html'); }); 38 | return buildBrowserify({ watch: true }); 39 | }); 40 | 41 | gulp.task('build', ['sass', 'html', 'fonts', 'scripts'], buildBrowserify); 42 | gulp.task('sass', buildSass); 43 | gulp.task('html', copyHTML); 44 | gulp.task('fonts', copyFonts); 45 | gulp.task('scripts', copyScripts); 46 | gulp.task('clean', function(done){ 47 | del('www/build', done); 48 | }); 49 | -------------------------------------------------------------------------------- /hooks/README.md: -------------------------------------------------------------------------------- 1 | 21 | # Cordova Hooks 22 | 23 | Cordova Hooks represent special scripts which could be added by application and plugin developers or even by your own build system to customize cordova commands. Hook scripts could be defined by adding them to the special predefined folder (`/hooks`) or via configuration files (`config.xml` and `plugin.xml`) and run serially in the following order: 24 | * Application hooks from `/hooks`; 25 | * Application hooks from `config.xml`; 26 | * Plugin hooks from `plugins/.../plugin.xml`. 27 | 28 | __Remember__: Make your scripts executable. 29 | 30 | __Note__: `.cordova/hooks` directory is also supported for backward compatibility, but we don't recommend using it as it is deprecated. 31 | 32 | ## Supported hook types 33 | The following hook types are supported: 34 | 35 | after_build/ 36 | after_compile/ 37 | after_docs/ 38 | after_emulate/ 39 | after_platform_add/ 40 | after_platform_rm/ 41 | after_platform_ls/ 42 | after_plugin_add/ 43 | after_plugin_ls/ 44 | after_plugin_rm/ 45 | after_plugin_search/ 46 | after_plugin_install/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being installed 47 | after_prepare/ 48 | after_run/ 49 | after_serve/ 50 | before_build/ 51 | before_compile/ 52 | before_docs/ 53 | before_emulate/ 54 | before_platform_add/ 55 | before_platform_rm/ 56 | before_platform_ls/ 57 | before_plugin_add/ 58 | before_plugin_ls/ 59 | before_plugin_rm/ 60 | before_plugin_search/ 61 | before_plugin_install/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being installed 62 | before_plugin_uninstall/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being uninstalled 63 | before_prepare/ 64 | before_run/ 65 | before_serve/ 66 | pre_package/ <-- Windows 8 and Windows Phone only. 67 | 68 | ## Ways to define hooks 69 | ### Via '/hooks' directory 70 | To execute custom action when corresponding hook type is fired, use hook type as a name for a subfolder inside 'hooks' directory and place you script file here, for example: 71 | 72 | # script file will be automatically executed after each build 73 | hooks/after_build/after_build_custom_action.js 74 | 75 | 76 | ### Config.xml 77 | 78 | Hooks can be defined in project's `config.xml` using `` elements, for example: 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | ... 89 | 90 | 91 | 92 | 93 | 94 | 95 | ... 96 | 97 | 98 | ### Plugin hooks (plugin.xml) 99 | 100 | As a plugin developer you can define hook scripts using `` elements in a `plugin.xml` like that: 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | ... 109 | 110 | 111 | `before_plugin_install`, `after_plugin_install`, `before_plugin_uninstall` plugin hooks will be fired exclusively for the plugin being installed/uninstalled. 112 | 113 | ## Script Interface 114 | 115 | ### Javascript 116 | 117 | If you are writing hooks in Javascript you should use the following module definition: 118 | ```javascript 119 | module.exports = function(context) { 120 | ... 121 | } 122 | ``` 123 | 124 | You can make your scipts async using Q: 125 | ```javascript 126 | module.exports = function(context) { 127 | var Q = context.requireCordovaModule('q'); 128 | var deferral = new Q.defer(); 129 | 130 | setTimeout(function(){ 131 | console.log('hook.js>> end'); 132 | deferral.resolve(); 133 | }, 1000); 134 | 135 | return deferral.promise; 136 | } 137 | ``` 138 | 139 | `context` object contains hook type, executed script full path, hook options, command-line arguments passed to Cordova and top-level "cordova" object: 140 | ```json 141 | { 142 | "hook": "before_plugin_install", 143 | "scriptLocation": "c:\\script\\full\\path\\appBeforePluginInstall.js", 144 | "cmdLine": "The\\exact\\command\\cordova\\run\\with arguments", 145 | "opts": { 146 | "projectRoot":"C:\\path\\to\\the\\project", 147 | "cordova": { 148 | "platforms": ["wp8"], 149 | "plugins": ["com.plugin.withhooks"], 150 | "version": "0.21.7-dev" 151 | }, 152 | "plugin": { 153 | "id": "com.plugin.withhooks", 154 | "pluginInfo": { 155 | ... 156 | }, 157 | "platform": "wp8", 158 | "dir": "C:\\path\\to\\the\\project\\plugins\\com.plugin.withhooks" 159 | } 160 | }, 161 | "cordova": {...} 162 | } 163 | 164 | ``` 165 | `context.opts.plugin` object will only be passed to plugin hooks scripts. 166 | 167 | You can also require additional Cordova modules in your script using `context.requireCordovaModule` in the following way: 168 | ```javascript 169 | var Q = context.requireCordovaModule('q'); 170 | ``` 171 | 172 | __Note__: new module loader script interface is used for the `.js` files defined via `config.xml` or `plugin.xml` only. 173 | For compatibility reasons hook files specified via `/hooks` folders are run via Node child_process spawn, see 'Non-javascript' section below. 174 | 175 | ### Non-javascript 176 | 177 | Non-javascript scripts are run via Node child_process spawn from the project's root directory and have the root directory passes as the first argument. All other options are passed to the script using environment variables: 178 | 179 | * CORDOVA_VERSION - The version of the Cordova-CLI. 180 | * CORDOVA_PLATFORMS - Comma separated list of platforms that the command applies to (e.g.: android, ios). 181 | * CORDOVA_PLUGINS - Comma separated list of plugin IDs that the command applies to (e.g.: org.apache.cordova.file, org.apache.cordova.file-transfer) 182 | * CORDOVA_HOOK - Path to the hook that is being executed. 183 | * CORDOVA_CMDLINE - The exact command-line arguments passed to cordova (e.g.: cordova run ios --emulate) 184 | 185 | If a script returns a non-zero exit code, then the parent cordova command will be aborted. 186 | 187 | ## Writing hooks 188 | 189 | We highly recommend writing your hooks using Node.js so that they are 190 | cross-platform. Some good examples are shown here: 191 | 192 | [http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/](http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/) 193 | 194 | Also, note that even if you are working on Windows, and in case your hook scripts aren't bat files (which is recommended, if you want your scripts to work in non-Windows operating systems) Cordova CLI will expect a shebang line as the first line for it to know the interpreter it needs to use to launch the script. The shebang line should match the following example: 195 | 196 | #!/usr/bin/env [name_of_interpreter_executable] 197 | -------------------------------------------------------------------------------- /hooks/after_prepare/010_add_platform_class.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | // Add Platform Class 4 | // v1.0 5 | // Automatically adds the platform class to the body tag 6 | // after the `prepare` command. By placing the platform CSS classes 7 | // directly in the HTML built for the platform, it speeds up 8 | // rendering the correct layout/style for the specific platform 9 | // instead of waiting for the JS to figure out the correct classes. 10 | 11 | var fs = require('fs'); 12 | var path = require('path'); 13 | 14 | var rootdir = process.argv[2]; 15 | 16 | function addPlatformBodyTag(indexPath, platform) { 17 | // add the platform class to the body tag 18 | try { 19 | var platformClass = 'platform-' + platform; 20 | var cordovaClass = 'platform-cordova platform-webview'; 21 | 22 | var html = fs.readFileSync(indexPath, 'utf8'); 23 | 24 | var bodyTag = findBodyTag(html); 25 | if(!bodyTag) return; // no opening body tag, something's wrong 26 | 27 | if(bodyTag.indexOf(platformClass) > -1) return; // already added 28 | 29 | var newBodyTag = bodyTag; 30 | 31 | var classAttr = findClassAttr(bodyTag); 32 | if(classAttr) { 33 | // body tag has existing class attribute, add the classname 34 | var endingQuote = classAttr.substring(classAttr.length-1); 35 | var newClassAttr = classAttr.substring(0, classAttr.length-1); 36 | newClassAttr += ' ' + platformClass + ' ' + cordovaClass + endingQuote; 37 | newBodyTag = bodyTag.replace(classAttr, newClassAttr); 38 | 39 | } else { 40 | // add class attribute to the body tag 41 | newBodyTag = bodyTag.replace('>', ' class="' + platformClass + ' ' + cordovaClass + '">'); 42 | } 43 | 44 | html = html.replace(bodyTag, newBodyTag); 45 | 46 | fs.writeFileSync(indexPath, html, 'utf8'); 47 | 48 | process.stdout.write('add to body class: ' + platformClass + '\n'); 49 | } catch(e) { 50 | process.stdout.write(e); 51 | } 52 | } 53 | 54 | function findBodyTag(html) { 55 | // get the body tag 56 | try{ 57 | return html.match(/])(.*?)>/gi)[0]; 58 | }catch(e){} 59 | } 60 | 61 | function findClassAttr(bodyTag) { 62 | // get the body tag's class attribute 63 | try{ 64 | return bodyTag.match(/ class=["|'](.*?)["|']/gi)[0]; 65 | }catch(e){} 66 | } 67 | 68 | if (rootdir) { 69 | 70 | // go through each of the platform directories that have been prepared 71 | var platforms = (process.env.CORDOVA_PLATFORMS ? process.env.CORDOVA_PLATFORMS.split(',') : []); 72 | 73 | for(var x=0; x 2 | 3 | 4 | 5 | Ionic 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | --------------------------------------------------------------------------------