A simple starter project to create native mobile and web apps with single shared code base using angular and nativescript.
Check this Open Souce Cross Platform Quotes Application for reference, which is made with the exact same architecture as this starter project.
npm install -g nativescript
npm install -g angular-cli
git clone https://github.com/shripalsoni04/nativescript-angular-web-starter --depth=1
cd nativescript-angular-web-starter
npm run ngxp-install
npm start
- This will start the application at http://localhost:4200.
npm run start.ios
npm run start.android
nativescript
This contains a nativescript project for creating Android/iOS applications.
tools
This contains scripts useful during development.
web
This contains nothing but a web project created using angular-cli
.
x-shared
All the code/assets which are common to both web and nativescript projects resides here. This folder is symlinked to nativescript/app/x-shared
and web/src/x-shared
folder. So changes in x-shared
folder from any of the three locations will get reflected in other two folders.
You can execute any valid command of angular-cli from web/
folder and any valid command of nativescript-cli from nativescript/
folder.For convenince below are the commands which you can execute from root directory.
Command | Description |
---|---|
npm run ngxp-install | Installs dependencies of web and nativescript applications. Creates symlink of x-shared folder in both web and nativescript project. |
Command | Description |
---|---|
npm start | Starts web application at http://localhost:4200 |
npm run start.prod | Starts web application in production mode. Runs uglification and minification. |
npm run start.aot | Performs AOT for web application templates and starts web application. |
npm run start.aot.prod | Performs AOT, minification, uglification and starts web application. |
npm run build | Builds the web application and copy the built project in web/dist folder. |
npm run build.prod | Builds the web application in production mode and copy the built project in web/dist folder. |
npm run build.aot | Performs AOT, build the project and then copy the built project in web/dist folder. |
npm run build.aot.prod | Performs AOT, prepares production build and then copy the built project in web/dist folder. |
npm test | Runs web application and x-shared unit test cases. It will not generate code coverage report. |
npm run test-cc | Runs web application and x-shared unit test cases and generates code coverage report. |
Command | Description |
---|---|
npm run start.ios | Runs application on iOS emulator/device |
npm run start.android | Runs application on Android emulator/device |
To change the package/bundle id you need to do changes in below files.
nativescript/package.json
id
property of nativescript
object as follows:"nativescript": {
"id": "com.domain.yourapp"
}
nativescript/app/App_Resources/Android/app.gradle
file and change applicationId
as shown below:android {
defaultConfig {
...
applicationId = "com.domain.yourapp"
}
...
}
For Android, open nativescript/app/App_Resources/Android/values/strings.xml
file and write your app name where Nativescript Angular Web Starter
is written:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Nativescript Angular Web Starter</string>
<string name="title_activity_kimera">Nativescript Angular Web Starter</string>
</resources>
For iOS, open nativescript/app/App_Resources/iOS/info.plist
file and change value of CFBundleDisplayName
and CFBundleName
to your app name:
<dict>
...
<key>CFBundleDisplayName</key>
<string>Nativescript Angular Web Starter</string>
<key>CFBundleName</key>
<string>NativescriptAngularWebStarter</string>
...
</dict>
Currently you can see that for web project, angular modules are there as dependencies in common package.json and at web/package.json. So currently to update version of angular modules for web project,you need to update version at both of these package.json files. To avoid this, you can add path mapping in web project's tsconfig.json file as shown below:
web/src/tsconfig.json
"paths": {
"@angular/*": ["../../node_modules/@angular/*"]
}
Once you add above configuration, the web project will try to find the @angular pacakges from common node_modules folder.
tools/install.js
from angular-advanced-seed同上一篇,这个也是寒哥整理的文章,我觉得非常好,拿来分享给大家,网上找了好多,貌似在InfoQ上的这篇是根源:http://www.infoq.com/cn/articles/why-choose-angular2。 没有选择是痛苦的,有太多的选择却更加痛苦。而后者正是目前前端领域的真实写照。新的框架层出不穷:它难吗?它写得快吗?可维护性怎样?运行性能如何?社区如何?前
没有选择是痛苦的,有太多的选择却更加痛苦。而后者正是目前前端领域的真实写照。新的框架层出不穷:它难吗?它写得快吗?可维护性怎样?运行性能如何?社区如何?前景怎样?好就业吗?好招人吗?组建团队容易吗? 每一个框架都得评估数不清的问题,直到耗光你的精力。这种困境,被称为“布利丹的驴子” —— 一只驴子站在两堆看似完全相同的干草堆中间,不知道如何选择,最终饿死了。 当然,那只是一个哲学寓言。现实中,大多
没有选择是痛苦的,有太多的选择却更加痛苦。而后者正是目前前端领域的真实写照。新的框架层出不穷: 它难吗?它写得快吗?可维护性怎样?运行性能如何?社区如何?前景怎样?好就业吗?好招人吗?组建团队容易吗? 每一个框架都得评估数不清的问题,直到耗光你的精力。这种困境,被称为“布利丹的驴子” —— 一只 驴子站在两堆看似完全相同的干草堆中间,不知道如何选择,最终饿死了。 当然,那只是一个哲学寓言。现实
NativeScript Angular This repository contains the code for integration of NativeScript with Angular. NativeScript is a framework which enables developers to write truly native mobile applications for
Nativescript-Angular-Drawer-Template A starter template to quickly create nativescript angular projects with drawer pages. Usage tns create my-project-name --template nativescript-angular-drawer-templ
angular-web-notification Web Notifications AngularJS Service Overview Demo Usage Installation Limitations API Documentation Contributing Release History License Overview The angular-web-notification i
Angular MDC NOTE: The Angular Components team at Google is working to deliver officially supported API-compatible versions of the Angular Material components backed by MDC Web. Follow the effort here
当我试图使用nativescript 7.2.0 Angular 8和nativescript-google-maps-sdk 3.0.2: 在android模拟器上替换谷歌地图时,我遇到了这个错误 js:错误错误:未捕获(在promise中):typeerror:nativescript_core__webpack_imported_module_1_。属性不是构造函数js:typeerror: