Skip to content

Commit

Permalink
feat: update to ionic 5 and angular 9
Browse files Browse the repository at this point in the history
  • Loading branch information
djabif committed Jun 6, 2020
1 parent c4d8cbc commit 8f0e9d7
Show file tree
Hide file tree
Showing 33 changed files with 10,860 additions and 6,521 deletions.
41 changes: 19 additions & 22 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,29 @@

*~
*.sw[mnpcod]
*.log
.tmp
*.tmp
*.tmp.*
log.txt
*.sublime-project
*.sublime-workspace
.vscode/
npm-debug.log*

.idea/
.ionic/
.sourcemaps/
.sass-cache/
.tmp/
.versions/
coverage/
www/
node_modules/
tmp/
temp/
platforms/
plugins/
plugins/android.json
plugins/ios.json
$RECYCLE.BIN/

.DS_Store
Thumbs.db
UserInterfaceState.xcuserstate
$RECYCLE.BIN/

*.log
log.txt
npm-debug.log*

/.idea
/.ionic
/.sass-cache
/.sourcemaps
/.versions
/.vscode
/coverage
/dist
/node_modules
/platforms
/plugins
/www
35 changes: 19 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,23 @@
# Ionic 4 Forms
# Ionic Forms Tutorial

This repo is part of an Ionic 4 tutorial where you will learn everything about Ionic forms and input validations in Ionic 4 apps. You can read it in https://ionicthemes.com/tutorials/about/forms-and-validation-in-ionic
This repo is part of an Ionic 5 tutorial where you will learn everything about [Ionic forms and input validations in Ionic Framework Apps](https://ionicthemes.com/tutorials/about/forms-and-validation-in-ionic).

**Please support this project by simply putting a Github star ⭐**

## Demo
Try the demo in https://ionic4-forms-tutorial.firebaseapp.com
### Demo
- [Online demo](https://ionic4-forms-tutorial.firebaseapp.com)

## Run this ionic project
Run `npm install` to install the project dependencies
Run `ionic serve` to start a dev server
## Install this Ionic 5 Forms Demo App
```
npm install
```
### Browse the app
```
ionic serve
```

## About the ionic 4 forms tutorial
We will discuss the best practices for designing user-friendly forms with ionic 4. Then we will go through the differences between Angular template driven and reactive forms.
## About this ionic 5 forms tutorial
We will discuss the best practices for designing user-friendly forms with ionic 5. Then we will go through the differences between Angular template driven and reactive forms.

For this ionic tutorial we created a mobile app example with lots of forms and validations to help you master data collection using angular reactive forms and also some techniques to excel the user experience.

Expand All @@ -23,12 +28,10 @@ We want this to be the best ionic 4 forms tutorial, so we created advanced custo
Learn more in https://ionicthemes.com/tutorials/about/forms-and-validation-in-ionic


### Get a premium Ionic 5 Starter App
Did you know that we recently released [Ionic 5 Full Starter App](https://ionicthemes.com/product/ionic5-full-starter-app-pro-version)? It's an ionic 5 template that you can use to jump start your Ionic app development and save yourself hundreds of hours of design and development.

### Get a premium Ionic 4 Starter App
Did you know that we recently released [Ionic 4 Full Starter App](https://ionicthemes.com/product/ionic4-full-starter-app)? It's an ionic 4 template that you can use to jump start your Ionic app development and save yourself hundreds of hours of design and development.
It is also a Progressive Web App and has lots of beautiful forms and validations examples.
Try it on your phone to see how it works!

It is also a PWA and has a score of 100 in lighthouse. Try it on your phone as a PWA to see the magic!

It also has lots of forms and validations examples.

<img src="https://s3-us-west-2.amazonaws.com/ionicthemes/cover_images/redesign/ionic4-full-starter-app.jpg"/>
<img src="https://ionicthemes.s3-us-west-2.amazonaws.com/cover_images/redesign/ionic5-full-starter-app-pro.jpg"/>
61 changes: 58 additions & 3 deletions angular.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"defaultProject": "app",
"newProjectRoot": "projects",
Expand All @@ -18,7 +18,7 @@
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
Expand Down Expand Up @@ -91,6 +91,61 @@
"browserTarget": "app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"styles": [],
"scripts": [],
"assets": [
{
"glob": "favicon.ico",
"input": "src/",
"output": "/"
},
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
}
]
},
"configurations": {
"ci": {
"progress": false,
"watch": false
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": ["**/node_modules/**"]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "app:serve"
},
"configurations": {
"production": {
"devServerTarget": "app:serve:production"
},
"ci": {
"devServerTarget": "app:serve:ci"
}
}
},
"ionic-cordova-build": {
"builder": "@ionic/angular-toolkit:cordova-build",
"options": {
Expand All @@ -116,7 +171,7 @@
}
}
}
},
}
},
"cli": {
"defaultCollection": "@ionic/angular-toolkit"
Expand Down
12 changes: 12 additions & 0 deletions browserslist
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# You can see what browsers were selected by your queries by running:
# npx browserslist

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.
28 changes: 28 additions & 0 deletions e2e/protractor.conf.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
allScriptsTimeout: 11000,
specs: [
'./src/**/*.e2e-spec.ts'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.json')
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};
14 changes: 14 additions & 0 deletions e2e/src/app.e2e-spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { AppPage } from './app.po';

describe('new App', () => {
let page: AppPage;

beforeEach(() => {
page = new AppPage();
});

it('should be blank', () => {
page.navigateTo();
expect(page.getParagraphText()).toContain('Start with Ionic UI Components');
});
});
11 changes: 11 additions & 0 deletions e2e/src/app.po.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { browser, by, element } from 'protractor';

export class AppPage {
navigateTo() {
return browser.get('/');
}

getParagraphText() {
return element(by.deepCss('app-root ion-content')).getText();
}
}
13 changes: 13 additions & 0 deletions e2e/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}
4 changes: 2 additions & 2 deletions ionic.config.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "ionic4-forms",
"name": "ionic-forms-tutorial",
"integrations": {},
"type": "angular"
}
}
31 changes: 31 additions & 0 deletions karma.conf.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../coverage'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
Loading

0 comments on commit 8f0e9d7

Please sign in to comment.