Adding jQuery files to ionic 2 - ionic2

I am wondering if there is a way to include jQuery plugin.. for example: http://tutorialzine.com/2014/08/cool-share-jquery-plugin/
or this: http://tutorialzine.com/2013/10/buttons-built-in-progress-meters/
I am not sure of how to include these plugins... I can download them and have the script file and css file..but how to use them in my project ?
How to know that these plugins are Node-compatible modules ?
also, if I cannot install them using npm , whats the correct way to include them in node_modules ?

First, install the package
npm install jquery --save
Install (typings and) the typings file
npm install -g typings
typings install dt~jquery --global --save
and finally, import the jQuery to your ts file
import * as $ from 'jquery'

Related

Why should I use ember install over NPM or yarn?

I'm new to ember and I discover the command ember install pkg and I'm wondering why such package instead of using external package manager such as yarn or npm which are industry-wide/de-facto standard.
Question
Why should I use ember install over NPM or yarn?
ember install addon-name is a short hand for npm install --save-dev addon-name && ember g addon-name
The documentation provides the answer for this one (ctrl + f ember install):
Installs the given addon into your project and saves it to the
package.json file. If provided, the command will run the addon’s
default blueprint.
The release notes for version 0.1.5 provide a clue for this as well:
#2805 Added the install:addon command, which installs an addon with NPM and then runs the included generator of the same name if it
provides one.
So, ember install is just a replacement for npm in most cases but when a blueprint is provided it will run those as well.

What is the difference between Node Package and Bower Package?

Taking Ember App for example. ember install ember-bootstrap-4 will add node package. But bower install tether --save will add bower package. Both are part of the app. But why one is in bower and one is in npm?
npm and bower are both packages manager in your Ember application but there are some differences in using them:
Bower is only used in front-end. It will download bower package into your Ember project (bower_component folder) and you still have to add it to your app's assets. For example, if you install moment package in bower, you have to add it to your app by going to ember-cli-build.js and add the following line app.import('bower_components/moment/moment.js'); (view more details in Ember Addons and Dependencies)
NPM is used for server packages. It will download packages into node_modules project. Every ember-cli addons is in npm and when you type ember install <addons-name>, ember will look up for ember addon, place your addon's info in package.json and download it in node_modules folder. Then, Ember will load it automatically for you.
bower install - is for including run time dependencies and you need to import it in ember-cli-build.js to use.
npm install - is for including development/build time dependencies.

Is there a way to remove bower dependencies using ember-cli

I installed a bower dependency using ember-cli as follows:
ember install:bower utf8
Is there an equivalent way to uninstall the same dependency?
So far I have resorted to:
bower uninstall utf8
And then manually edited the bower.json file. Is there a more correct way to do this? Or are there any drawbacks of doing it my way?
Yes, there is. You just have to use --save or --save-dev:
$ bower uninstall utf8 --save
When you use --save, then it's uninstalled and removed from dependencies section, and --save-dev removes it from devDependencies.
You can use the same flags with bower install or even npm install/npm uninstall.
EDIT:
Here's a reasoning why they don't want to make an alias for bower uninstall: https://github.com/ember-cli/ember-cli/issues/3163

npm install ember-data just installs index.js file

When I do npm install ember-data --save, I get only the following files:
./node_modules/ember-data/
./node_modules/ember-data//lib
./node_modules/ember-data//lib/ember-addon
./node_modules/ember-data//lib/ember-addon/blueprints
./node_modules/ember-data//lib/ember-addon/blueprints/ember-data
./node_modules/ember-data//lib/ember-addon/blueprints/ember-data/index.js
./node_modules/ember-data//lib/ember-addon/index.js
./node_modules/ember-data//package.json
./node_modules/ember-data//README.md
I was expecting the same files bower installs, such as ember-data.min.js.
My hunch is I need to do npm install from within node_modules/ember-data? If so, why the extra step?
ember-data is meant to be installed with bower with
$ bower install --save ember-data
Installing ember-data with npm will add it as an add-on for ember-cli project. It will include the files from bower_components. you still need the bower version.
ember-cli has built-in support for ember-data.

Not possible to install add-on for ember-cli

I am trying to test the ember-select-2 component. It is advertised as very easy to set-up. According to the readme:
# install addon from npm repository
$ npm install ember-select-2
# install dependencies
$ ember g ember-select-2
Installing the add-on works:
» npm install ember-select-2
But installing the dependency fails:
» ember g ember-select-2
version: 0.1.2
Unknown blueprint: ember-select-2
The only thing I have been able to find is that ember-select-2 is an extraneous npm package (whatever that means)
» npm list ember-select-2
test13#0.0.0 .../test13
└── ember-select-2#1.0.1 extraneous
This is my ember-cli installatioon:
» ember --version
version: 0.1.2
node: 0.10.25
npm: 2.1.3
How did I manage to break such a simple how-to?
EDIT
I did some research: extraneous just means that it is not in the package.json. Adding --save solves that. So that is just a warning, and not the source of my problem.
If you don't set the save flag, the package isn't added to your package.json file as a dependency it is only downloaded into node_modules, you will either have to add it manually or use the flag and have it save you a step.
--save: Package will appear in your dependencies.
--save-dev: Package will appear in your devDependencies.
--save-optional: Package will appear in your optionalDependencies.
When using any of the above options to save dependencies to your
package.json, there is an additional, optional flag:
--save-exact: Saved dependencies will be configured with an exact version rather than using npm's default semver range operator.
More info can be found in the npm install docs.
As the maintainer of the package, I apologize for the inconvenience caused by the documentation.
I immediately fixed the command to include --save-dev, which seems to be the right way to install ember-cli addons.