{"id":15141915,"url":"https://github.com/proyecto26/nativescript-ionic-template","last_synced_at":"2025-09-29T10:31:28.754Z","repository":{"id":78889297,"uuid":"109219679","full_name":"proyecto26/nativescript-ionic-template","owner":"proyecto26","description":"📱 🖥 Create Mobile First apps, Web and Native sharing the code with Angular 🎉","archived":true,"fork":false,"pushed_at":"2018-04-25T04:03:45.000Z","size":7231,"stargazers_count":71,"open_issues_count":0,"forks_count":16,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-09-16T06:38:56.680Z","etag":null,"topics":["android","angular","angular-native","apps","ionic","ionic-apps","ionic-framework","ionic3","ionicons","ios","mobile-app","mobile-development","mobile-first","native-apps","nativescript","nativescript-template","single-page-app","single-page-applications","web","web-app"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/proyecto26.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":"jdnichollsc","patreon":"proyecto26","open_collective":"proyecto26","ko_fi":"proyecto26","liberapay":"proyecto26","donorbox":"proyecto-26","custom":["paypal.me/jdnichollsc","buymeacoffee.com/jdnichollsc","donorbox.org/proyecto-26"]}},"created_at":"2017-11-02T05:00:51.000Z","updated_at":"2025-09-05T18:10:12.000Z","dependencies_parsed_at":"2023-03-13T20:12:06.628Z","dependency_job_id":null,"html_url":"https://github.com/proyecto26/nativescript-ionic-template","commit_stats":{"total_commits":68,"total_committers":1,"mean_commits":68.0,"dds":0.0,"last_synced_commit":"1b0a2fe5ddb46e18e2564a54dbff1b6c967b4922"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/proyecto26/nativescript-ionic-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/proyecto26%2Fnativescript-ionic-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/proyecto26%2Fnativescript-ionic-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/proyecto26%2Fnativescript-ionic-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/proyecto26%2Fnativescript-ionic-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/proyecto26","download_url":"https://codeload.github.com/proyecto26/nativescript-ionic-template/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/proyecto26%2Fnativescript-ionic-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277502616,"owners_count":25829203,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-29T02:00:09.175Z","response_time":84,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","angular","angular-native","apps","ionic","ionic-apps","ionic-framework","ionic3","ionicons","ios","mobile-app","mobile-development","mobile-first","native-apps","nativescript","nativescript-template","single-page-app","single-page-applications","web","web-app"],"created_at":"2024-09-26T09:20:30.715Z","updated_at":"2025-09-29T10:31:26.070Z","avatar_url":"https://github.com/proyecto26.png","language":"TypeScript","readme":"# NativeScript Ionic Template {N} ![apple](https://cdn3.iconfinder.com/data/icons/picons-social/57/16-apple-32.png) ![android](https://cdn3.iconfinder.com/data/icons/logos-3/228/android-32.png) ![ionic](https://cdn3.iconfinder.com/data/icons/logos-3/512/Ionic_Logo-2-64.png)\n**Native mobile Apps** with [NativeScript](https://www.nativescript.org/) and **Web Apps (Mobile First)** with [Ionic](http://ionicframework.com/) styles and components sharing the same code with Angular!\n\u003eThis template uses the default navigation of Angular, the navigation of Ionic 3 is not recommended to develop websites, therefore it is not recommended to use Ionic components that require Ionic navigation. However, in this template you can find an example of how to use components such as the side menu without depending on the navigation.\n\n![NativeScript and Ionic](img/nativescript-ionic.png)\n\n## Introduction 👨‍💻\nUsing this template you can create a **Web App (Mobile First)** using **Ionic 3** components and a **Mobile Native App** using **NativeScript** with the **same code**, yay! 👏\n\n![Native and Web Grid](img/grid.png)\n\nFor more details you can check the excellent NativeScript team article about **Code Sharing Between Web and Mobile with Angular and NativeScript**: https://www.nativescript.org/blog/code-sharing-between-web-and-mobile-with-angular-and-nativescript\n\n## How does it work? ☕\nCheck the excellent video of [Sebastian Witalec](https://github.com/sebawita) about **Sharing Code Between Web and Native Apps** \n\n[![Sharing Code Between Web and Native Apps](https://img.youtube.com/vi/HMPkXk_vXDw/0.jpg)](https://youtu.be/HMPkXk_vXDw?t=11m56s)\n\n\n## Run the projects ⏯\n\n* **Ionic Web App (Using the Angular-cli)**:\n```\n  npm install (It's required to create the symlinks at the first time before to execute the app)\n  ng serve\n```\n\n* **NativeScript Mobile App**:\n```\n  cd nativescript\n  npm install\n  npm run livesync (Required to detect changes and reload the app from the simulator/device)\n  npm run ios (using other terminal)\n```\n\n## Commands 💻\nView available commands here: [Seed commands](https://github.com/TeamMaestro/angular-native-seed/wiki/Seed-Commands)\n\n## Getting Started 📚\nCommand | Action\n------- | ------\n`npm install -g @angular/cli` | Install the Angular-cli. Remember see the documentation [here](https://github.com/angular/angular-cli#generating-components-directives-pipes-and-services)\n`ng g module [name]` | Generate a new Module. Recommended to create sections of your app that will load components with Lazy Loading.\n`ng g component [name]` | Generate a new Component in the current directory. Remember add the **moduleId** property `moduleId: module.id` in every component\n`ng g service [name]` | Generate a new Service. The `app/providers/` path is recommended for shared services among several components.\n\n## Use [Ionic icons](https://ionicframework.com/docs/ionicons/) from the NativeScript side 🎁\nNativeScript requires the **unicode** of the icon, you can find the unicode with the name of the icon from the content of the `src/fonts/ionicons.svg` file and later you can use it from a `\u003cLabel\u003e` or `\u003cButton\u003e`, example:\n```\n// name: ion-ios-contact, unicode: \u0026#xf41a;\n\u003cButton class=\"ion-icon\" fontSize=\"25\" text=\"\u0026#xf41a;\"\u003e\u003c/Button\u003e\n```\n\n## Custom templates for each platform 🥂\nTarget **Phone** and **Tablet** Templates individually. The following extensions are supported:\n\nExtension                        | Platform\n-------------------------------- | -----------\n`.{html/scss}`                   | Web platform. Used from mobile when there is no **.tns** extension\n`.tns.{html/scss}`               | Only for mobile\n`.tns.ios.{html/scss}`           | Only for iOS\n`.tns.android.{html/scss}`       | Only for Android\n`.tns.ios.phone.{html/scss}`     | Only for iOS Phone \n`.tns.android.phone.{html/scss}` | Only for Android Phone\n\n![Code Splitting](img/code-splitting.png)\n\n## Angular Tips\nSyntax                            | Meaning     | Expected Result \n--------------------------------- | ----------- | ------------\n`{{ title }}`\u003cbr/\u003e`{{ getTitle() }}` | Render a value dynamically, this expression will be evaluated at run time.\n`[src]=\"imageUrl\"`                | **Property Binding:** Bind a property of a DOM element to a field of the component.\n`[attr.colspan]=\"colSpan\"`        | **Attribute Binding** \n`[class.selected]=\"user.selected\"`| **Class Binding**: Add a class dynamically.\n`[style.color]=\"isActive? 'green': 'red'\"` | **Style Binding**\n`(tap)=\"onSave($event)\"`          | **Event Binding**\n`(keyup.enter)=\"onEnter()\"`       | **Event Filtering**\n`#email (keyup.enter)=\"onEnter(email.value)` | **Template variables**\n`[(ngModel)]=\"user.email\"`        | **Two-way Binding**. Import **FormsModule** is required.\n`{{ price \\| currency:'AUD' }}`   | **Pipes:** Format data.\n`@Input('input-property') myData;`\u003cbr/\u003e`\u003cexample [input-property]=\"data\"\u003e` | **Input Properties:** Input data for the component.\n`@Output('output-property') change= new EventEmitter();`\u003cbr/\u003e`this.change.emit({msg: 'Hi!'});`\u003cbr/\u003e`\u003cexample (output-property)=\"onChange($event)\"\u003e`\u003cbr/\u003e | **Output Properties:** Raise events from the component. | onChange({msg})\u003cbr/\u003e{\u003cbr/\u003econsole.log(msg)\u003cbr/\u003e}\n\n## Resources ⛩\n- [NativeScript Quick Setup](https://docs.nativescript.org/start/quick-setup)\n- [The NativeScript book](https://www.nativescript.org/get-the-nativescript-book)\n- [Ionic CSS Utilities](http://ionicframework.com/docs/theming/css-utilities/)\n- [NativeScript Styling](https://docs.nativescript.org/ui/styling#supported-css-properties)\n- [NativeScript Layout Containers](https://docs.nativescript.org/ui/layout-containers)\n- [Professional UI Components](https://www.nativescript.org/ui-for-nativescript)\n- [Progress NativeScript UI samples](https://github.com/telerik/nativescript-ui-samples-angular)\n- [awesome-nativescript](https://github.com/jbristowe/awesome-nativescript)\n- [Awesome {N}](https://github.com/DeviantJS/awesome-nativescript)\n\n## Contributors 🥇\n| [\u003cimg alt=\"Sean perkins\" src=\"https://avatars1.githubusercontent.com/u/13732623?v=3\u0026s=117\" width=\"117\"\u003e](https://github.com/sean-perkins) | [\u003cimg alt=\"jdnichollsc\" src=\"https://avatars3.githubusercontent.com/u/2154886?v=3\u0026s=117\" width=\"117\"\u003e](https://github.com/jdnichollsc) \n:---: | :---: |\n[Sean Perkins](https://github.com/sean-perkins) | [Juan Nicholls](mailto:jdnichollsc@hotmail.com) |\n\n## Credits 👍\n* [Angular NativeScript Seed](https://github.com/TeamMaestro/angular-native-seed)\n\n## Supporting 🍻\nI believe in Unicorns 🦄\nSupport [me](http://www.paypal.me/jdnichollsc/2), if you do too.\n\n## Happy coding 💯\nMade with ❤️\n\n\u003cimg width=\"150px\" src=\"http://phaser.azurewebsites.net/assets/nicholls.png\" align=\"right\"\u003e\n","funding_links":["https://github.com/sponsors/jdnichollsc","https://patreon.com/proyecto26","https://opencollective.com/proyecto26","https://ko-fi.com/proyecto26","https://liberapay.com/proyecto26","proyecto-26","paypal.me/jdnichollsc","buymeacoffee.com/jdnichollsc","donorbox.org/proyecto-26","http://www.paypal.me/jdnichollsc/2"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fproyecto26%2Fnativescript-ionic-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fproyecto26%2Fnativescript-ionic-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fproyecto26%2Fnativescript-ionic-template/lists"}