I have used velocity.js in my own personal web sites but never within an angular application. I'm not an angular developer (yet) so please bear with me.
I am following the README file on the angular-velocity github page. But when I run my application, I am getting an error that I am missing the module.
Here is what my module declaration looks like:
var appModule = angular.module('app.module', ['module-one', 'module-two', 'angular-velocity']);
...
The error I get now is:
Module 'angular-velocity' is not available! You either misspelled the module name or forgot to load it.
Further reading I see this:
When installing from npm, it is assumed that VelocityJS will be installed and loaded before Angular Velocity.
Ok, so I installed (via npm) the velocity library. How do I include that in my list of dependancies?
Also this:
angular-velocity assumes that the Angular core and the additional ngAnimate module is loaded
So does that mean I need something like this?
var appModule = angular.module('app.module', ['module-one', 'module-two', 'ngAnimate', 'angular-velocity']);
But in the example, all that is listed is angular-velocity.
Nowhere in my project do I see individual script tags. I am assuming the project just reads the dependancies and grabs them from the package.json file? (Completely guessing).
This does not happen:
<script src="bower_components/velocity/velocity.min.js"></script>
<script src="bower_components/velocity/velocity.ui.min.js"></script
<script src="bower_components/angular-velocity/angular-velocity.min.js"></script>
Thank you for any suggestions!
You can include velocity using CDN
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>
or using bower
bower install velocity
and add its references in the header from default folder bower_components.
If instead you use npm you can use:
npm install velocity-animate
and add its references in the header from default folder node_modules.
Related
my index.php is like the following :
<script src="app/bower_components/jquery/dist/jquery.min.js"></script>
<script src="app/bower_components/angular/angular.min.js"></script>
<script src="app/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="app/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
I would like to add webpack to bundle all these files and minify them
I did not find the way to do that.
I have installed npm , node and webpack
I manged to us webpack to simple files like: webpack entry.js bundle.js . but not for my angular app
Let me answer it in general and then specific to your use case.
IN GENERAL:
Webpack
is a module bundler
needs entry and output as minimum
configuration
Where do i configure/list-out all my application code?
You dont configure it but code it. Please read on...
How webpack knows what code/modules to pick up to bundle?
Webpack will look at the code configured for entry and then internally builds its module dependencies (as dependency graph).
How do you declare module dependencies?
In short: by using require("module-or-path-here") or import "module-or-path-here". Do note that the javascript (ES6 a.k.a ES2015) itself has native module support now. Here is a good article on JS modules.
What is dependency graph?
Webpack will start with the code configured for entry and then pick up its immediate dependencies. It then goes to find out the dependencies of those immediate dependencies and so on...
Once the dependency graph is complete, webpack will start processing them and bundle them into output.filename located at output.path
Fine, but i want to perform some resource (JS / CSS / SCSS / images, etc..) specific work for ex. minify js code. How to do that?
Webpack is flexible (and powerful) and allows to configure resource specific work via loaders and plugins.
IN SPECIFIC:
The modules in AngularJS (i.e. 1.x) are not same as the modules that webpack works with. As you can see, while declaring the modules in angularJS, you are defining modules with angular by calling angular.module.
One option is to make sure to bundle all your angular module definition files (i.e that consists of angular.module("module-name-here", ["depenndencies"])) first followed by the angular components that needs those modules. There are several way to do that. For ex. name all your angular modules declaration files with a common pattern and then configure webpack to pick them up first.
Minification is pretty simple to achieve with webpack. You can try one of the options pointed out in the webpack documentation.
This should be straight forward, but I'm stuck.
I'm trying to include mobile-angular-ui in an angular-fullstack-generator project but I keep getting
Uncaught SyntaxError: Unexpected token < mobile-angular-ui.min.js:1
I'm adding the following at the end of the body of the _index.html, and the network tab is returning the proper 200 response.
<script src="/node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
If I use import in app.js like this
import mobileUi from '../../node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.js';
Then I get the following error
Uncaught TypeError: Cannot read property 'documentElement' of undefined mobile-angular-ui.js:2584
Where am I going wrong, where am I supposed to include this?
Thanks!
Normally, with the angular-fullstack app from https://github.com/angular-fullstack/generator-angular-fullstack,
you just have to write:
npm install --save mobile-angular-ui angular angular-route
And all the dependencies will automatically be built.
In angular-fullstack, all front end libraries are handled/installed through bower and all back end libraries are handled through npm.
So if you want to use mobile-angular-ui, which is a front end library, you should try installing it like this.
bower install --save mobile-angular-ui angular angular-route
Then add the module dependency
mobile-angular-ui
in app.js of client side Then serve the project again. Now your dependency will be added automatically in your index.html file and you won't need to automatically include it in your index.html
I am trying to use angular-chart.js in my application, though i'm getting the following error:
Error: [$injector:nomod] Module 'chart.js' is not available
I have followed suggestions from other questions to include Chart.js before angular-chart.js in the html file, though this didn't work for me.
Here are the versions of the libraries i've installed:
Here is my directory structure:
app/
----libs/
------Chart.js/
----------src/
------------chart.js
------angular-chart.js/
--------dist/
----------angular-chart.js
----------angular-chart.css
--index.html
Here is the link to the libraries installed with bower in my index.html:
<!-- Import the graph library -->
<script src="../libs/Chart.js/src/chart.js"></script>
<script src="../libs/angular-chart.js/dist/angular-chart.js" xmlns="http://www.w3.org/1999/html"></script>
<!-- CSS too -->
<link rel="stylesheet" href="../libs/angular-chart.js/dist/angular-chart.css">
I am trying to inject chart.js module into my controller like so:
angular.module('DeviceCtrl', ['chart.js']).controller('DeviceController', function($routeParams, $scope, $http) { }
Any suggestions? Thanks!
The error seems to indicate that angular-chart.js is not loaded before your script is executed, you need to load it after angular and chart.js are loaded but before your script is executed.
Nit: css should be loaded at the top of the html whereas javascript files should be loaded at the bottom after the body close tag.
Can you provide a complete repro step using this template?
I'm not familiar with the angular-chart library, but I see a few issues with what you've got so far. First, the script tag for the angular-chart has a stray "xmlns" attribute that must have come from an xml document:
<script src="../libs/angular-chart.js/dist/angular-chart.js" xmlns="http://www.w3.org/1999/html"></script>
It probably isn't hurting anything, but I'd remove it just to make sure you're not giving the browser heartburn.
Next, you state
I am trying to inject chart.js module into my controller
The chart.js module only contains directives. You can't really inject it into your controller, you can only state the dependency at the module level. The readme on GitHub has a good basic setup example for this set of directives. There is one factory, ChartJsFactory, that you could inject into a controller, but it looks like it's mostly meant to be used by the directives.
The next thing I noticed is that you're including a dependency for $routeParams in the controller, but your module, DeviceCtrl, doesn't have a dependence for ngRoute included. You could either include angular-route.js, and a dependency for 'ngRoute' in the configuration of your module, or remove $routeParams.
I am making use of yeoman angular fullstack generator
i want to install admin-lte-angular theme in my app
i have installed it using bower
but i don't know how install it in angular app
please help to install it
Add the css and the javascript libs to the index.html:
<link href="bower_components/admin-lte-angular/admin-lte-angular.css">
// angular.js must be loaded first!
<script src="bower_components/admin-lte-angular/admin-lte-angular.js"></script>
Add 'admin-lte-angular' to the module dependencies:
angular.module('dashboardApp', [ 'admin-lte-angular' ])
If you are using this https://github.com/sarahhenderson/admin-lte-angular
Note that the author stated it is a working in progress. So I don't think it is a stable code to use.
I'm using ng-boilerplate (v0.3.2-release), and I'm trying to add ngAnimate but it doesn't work! I'm missing something silly I'm sure.
I have a link to the correct CDN:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-animate.min.js"></script>
Checking in the brower Sources shows the file is loaded correctly.
But when I try to add to my module ngAnimate:
angular.module( 'ngBoilerplate.UserDetails', [
'ui.router',
'plusOne',
'ngAnimate'
])
Grunt fails and says that karma:unit:run failed.
I've used bower to install ng-animate in the vendor dir (like in this question), but that didn't worked either.
Added on behalf of OP.
In the file build.config.js I'v added to vendor_files the path to ng-animate.js, problem solved :)