After installing packages via npm, such as:
$ npm install bootstrap
or
$ npm install angular
these are saved inside the "node_modules" by default.
How do you access them (link to them) from an html page?
You can't possibly do "href="/node_modules/", so what's the solution?
I imagine something like:
var angular = require("angular");
but I'm not sure.
Try to use bower, or yeoman.
bower - will simplify the process to include js libs
yeoman - will help you to build projects with the the libraries that you need.
Related
I downloaded a sample Angular app from
https://github.com/angular/material-start
When I open the index file I just get raw Angular syntax and the pages are not showing correctly.
How can I fix this?
You need to run bower to get your dependencies. Just downloading the repo is not enough.
http://bower.io/
Install bower, the in your repo run a bower init
You should see it grab Angular and other items needed.
You need to do the following command in the root directory of your git clone:
npm install
This does a bower install also. You need npm installed (packaged with nodejs)
I have started working on a new project in node js and I have generated the project using yeoman's angular fullstack generator. And now I would like to add a new bower dependency and a new node dependency. What is the best way to do this? Should I simply add the dependency in bower.json and package.json or should I run a specific command?
You don't need yeoman to install those dependancies for you. Instead, yeoman gives you an environment with everything set up to use tihngs like bower, npm, grunt etc. You can add additional dependencies like you normally would using npm or bower.
for bower (http://bower.io/) -
bower install -S <name-of-your-dependancy>
that command downloads the code for you, and it also adds a reference to it in your bower.json
similar for node (https://www.npmjs.com/) -
npm install -S <name-of-your-dependancy>
use npm packet manager, to install components, like if you want to install cordova, use:
npm install -g cordova
For installing AngularJs, follow the official site guide lines:
https://docs.angularjs.org/misc/started
I've been trying to create a project that utilizes AngularJS, Browserify and Gulp for an excellent developer experience, one that produces a distributable 'module' (in Angular parlance). The idea being to have a self-documented project, like Angular Bootstrap, that also produces a consumable distribution for use in another application.
We've had great results with Gulp, but we're having trouble with browserify/browserify-shim. Also, unfortunately, most of the examples out there either don't use gulp, or use gulp-browserify, which has been blacklisted/ended.
We're including AngularJS and JQuery from Google CDN as <script> tags and have declared "angular" : "global:angular" and "jquery" : "global:$" in our browserify-shim config in package.json, but we're getting "cannot find module" when we try to user var angular = require('angular') and var $ = require('jquery') inside of our browserified-code (once it runs in the browser).
I've created a sample project that distills this down close to the minimum.
A sample repository of the code is available at
Once cloned, you would run 'npm install', then 'bower install', then 'gulp' from the root of the multi-browserify folder to generate the files and run the test server.
With gulp running, you can access the live HTML at http://:4000/gulp.html
Any help would be greatly appreciated - I'm wondering if we've come across a bug/issue with the intersection of gulp, browserify, vinyl-source-stream, etc, or more likely, we just don't quite get it yet.
Is retrieving your dependencies from a CDN a requirement? If not, you could use npm for your dependencies and let browserify magic them up for you.
JQuery and Angular are available via npm, so using jquery as an example you could just declare it in your package.json, like so:
...
"dependencies": {
"jquery": "^1.11.1"
},
...
Alternatively, running npm install <package> -s from the directory containing your package.json will install the specified module and save it as a dependency in your package.json file.
Once you have installed this dependency (and any others you desire), you can go ahead and use them in your app.js as follows:
var $ = require('jquery');
$('<div>Hello World, I\'m using JQuery!</div>').appendTo('body');
Simple as that, and no need to use bower or browserify-shim - browserify will look through your node_modules folder and find them. I haven't tried this with angular (I had an issue trying to install it) - but it is available through npm, so it should work.
# assuming you have installed jquery locally instead of globally
npm install jquery -s # without -g flag
instead of require("jquery"), give relative path from source directory
require("./node_modules/jquery/dist/jquery.min.js");
Try the following:
<script>window.$ = window.jQuery = require('./node_modules/jquery/dist/jquery.min.js');</script>
OR
<script>var $ = jQuery = require('./node_modules/jquery/dist/jquery.min.js');</script>
I have installed AngularJS using bower, by calling:
$ bower install angular-latest
Now I wonder how to integrate AngularJS into my html file. Apparently, there is neither an angular[.min].js file nor an index.js file as suggested by the bower documentation.
I can't imagine that I am the first person on earth to discover this problem, but unfortunately I did not find any clues on this on Google (but perhaps I only used the wrong terms for searching).
Any idea of how to include AngularJS?
Okay, I found the solution:
$ bower install angular
And everything is fine ...
What you installed with
$ bower install angular-latest
was only the latest source code. You need to actually build AngularJS.
First, you need to install all of the following dependencies if you haven't already:
Git
Node.js
Java
Grunt
Bower
Second, change into the angular.js directory.
Then, install node.js dependencies and bower components:
$ npm install
$ bower install
Finally, you're ready to build your package:
$ grunt package
In the resulting build directory, you'll find
angular.js — The non-minified angular script
angular.min.js — The minified angular script
When I run yeoman install handlebars I get the following output:
Running "bower:install:handlebars" (bower) task
bower cloning git://github.com/components/handlebars.js
bower cached git://github.com/components/handlebars.js
bower fetching handlebars
It doesn't copy handlebars to the current project's plugins or vendors directory. It exits without an error message. Is this the right behaviour?
To me it seemed like a bug so I've created an issue on yeoman's github page. But I'm not sure.
To resolve this issue here's what I did. I realized yeoman did not install bower for me and it depends on bower for installing libraries. So, to resolve this issue - install bower manually like this: npm install bower -g