add angular plugin into ionic 2 / angular 2 project - angularjs

I'm learning Ionic 2 after I learned Ionic 1 for the past 2 weeks. In the weeks I learned Ionic 1 I made a app with a calendar with a plugin. I did the code of the calendar plugin in the www/lib folder.
But now by Ionic 2 the file structure is different and does someone know where I have to put the *.js and the *.css files into for that calendar plugin?

if your plugin is npm library, install using command npm install package-name inside the project folder. If it is not an npm package, follow the steps from link to get it done.

Related

Angularjs 2 installation Methods

I have one angularjs 2 UI (without node modules) which i have to integrate with my backend. After installing Angular cli, Can i simply do npm install in the angularjs 2 directory folder as it have package.json or create a new app after installing angular cli and then do npm install for some node modules specific to my angularjs project.
Will the first approach Work successfully as it is easier
If your backendend and frontend repos are in same package.json just serve your app. You can separate these ( in the future it will be more effective ) . So just search your starting command and run the app.

Configuration on Ionic Framework?

I have recently wanted to a create mobile apps so I decided to use a Mobile App framework that allows the use of web technology.
I decided to install Ionic and it went pretty well, until I hit the 'Configuration' section of its installation documentation.
https://docs.ionic.io/setup.html#configuration
It says that I have to do something related to 'src/app/app.module.ts' but I can't find that file anywhere, I have installed Angular and Zone using npm install but I still can't find this file.
Can anyone help me out finding out where this file is, or how I even get to it?
Currently, this is my project root folder structure:
I have a folder called node_modules, then I have 3 json files: .io-config.json, ionic.config.jon and package.json.

Where can I find systemjs.config in Ionic 2 Project?

I create an pure Ionic 2 project with the command.
ionic start myIonic --v2
The pure project work great, but when I compared the project structure with angularJS 2, I found the "systemjs.config.js" is missing.
My question is could "systemjs.config.js" file be replaceable?
If the answer is positive, what is the alternative file in Ionic2 based project ?
i have created a angularjs 2 based poject using angular2-cli using below command.
ng new PROJECT_NAME
when i create the project using angular2 cli, then also its not creating systemjs.config.js file.
link for angular2 cli new app .
And Systemjs.config.js file is creating in angular2 project only if i create quick start application, that too we are only creating manually. as given in official quick start document.
link for angular2 quick start app.
So using this 2 examples we can believe that systemjs.config.js file can be replaceable.
The angular-cli and ionic moved the build system from SystemJS to Webpack.
For angular
npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli#latest
Full angular-cli migrate docs: https://github.com/angular/angular-cli/wiki/Upgrading-from-Beta.10-to-Beta.14

How can I use Angular 2 with NetBeans?

I have tried every tutorial I could find to try to make a HTML/JS project with Angular 2 working on NetBeans, but none have worked. Maybe is my npm that is bugged (search, for example, doesn't work).
The node_modules folder that is created with npm install is grey on NetBeans and have some errors in some files (I don't know if this is normal). Any .js I try to import from node_modules folder gives the error Failed to load resource: net::ERR_EMPTY_RESPONSE / Uncaught ReferenceError: System is not defined.
Does anyone have any idea what could I be doing wrong? Or does anyone knows any tutorial that have the code to download so I can compare with what I'm doing and see what is the correct? Every tutorial I have found doesn't have any code to download, just some pieces of codes in the page for explanation.
Sory if this isn't a good question, but I have been trying to make this work since yesterday without success and I'm completely out of idea.
First I recommend to upgrade to the last version of NodeJS and NPM, to minimize the errors in your node_modules folder
Install the Everlaw's Typescript plugin from https://github.com/Everlaw/nbts/releases . If you are using Netbeans 8.1 I think you can install it directly from the Plugins installer. I'm using NetBeans 8.2 and there is no problems installing the plugin manually.
Then on NetBeans go to Tools -> Options -> HTML/JS -> Node.js and write the right Node and NPM Paths and Sources, I would recommend check-on the three check-boxes in that panel.
For a quick start try the QuickStart demo from the angular.io page, it is not necessary make any change in the package.json.
The first time I tried to debug an Angular 2 application I put the index.html file directly in the project folder in order to do not make any changes in the index.html script sources nor change the project files structure but you need to change some properties of the project:
In the project window right click the project and select properties.
In sources change the Site Root Folder using the Browse button and select the project folder (You can ignore the warning that appears).
In Run select Run As: Web Application.
I recommend select Browser: Chrome with NetBeans Connector
Using the Browse button go to the project folder and select index.html as your Start File.
Select Web Server: Embedded Lightweight.
And finally in Web Root write /Your_Project_Folder
run npm install from NetBeans
Click the run button and your web application must open in chrome, if you edit your html or typescript files and save them you could see the changes in the browser in real time without re-debuggind your application and can use the Browser DOM window to explore your elements created from Angular 2.
You still see some errors in your files because NetBeans is not fully compatible with the HTML Angularized syntax. But it runs flawlessly.
You can also run the start script directly from Netbeans to run your project using lite-Server.
Screenshot NetBeans - Angular 2
I would recommend you to install the angular cli: npm install -g angular-cli#webpack
Fore more infos regarding this tool, take a look here: https://cli.angular.io/
Then create a new Angular2 app with ng new <app-name>
This will create a complete and working Angular2 application in the current folder.
cd <app-name> and start the app with ng serve.
Check your new created app in your browser on localhost:4200.
If this works, you can try to get started with your NetBeans! :)

Bower Install With Front End Template

Hello i purchased a template this afternoon, previously what i used to do whenever i bought a template was to copy the js,image,font and css folders into my project and start using but this particular template i bought was very confusing for me.
I ended up having to install npm and use bower install to download the various packages, however this is my first time using bower install so i'm a bit confused as to what to do next. "bower install" created a new folder inside my template folder called "bower_components".
I would like to know what i need to do next to be able to use this template to develop my app, below is a screenshot of my theme's folder structure:
I am building my app using Laravel 5 on the backend and AngularJS on the front-end.

Resources