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.
Related
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.
I am using bootstrap in my react app generated with create-react-app
Below are two imports that I am using in my index.html
<script src="./vendor/jquery-3.1.0.min.js"></script>
<script src="./vendor/bootstrap.min.js"></script>
However in code when I use something like
$('.dropdown').dropdown()
I get an error as - error '$' is not defined no-undef
Can someone help me with this. Thanks!
If you need jQuery, run:
npm install --save jquery
Then you can use it in the app code:
import $ from 'jquery';
Note that this only works with versions 2.x and above.
You can also use it as a script tag.
This is not encouraged.
To do it, put jQuery into the public folder and add this to HTML:
<script src="%PUBLIC_URL%/jquery-3.1.0.min.js"></script>
Then you can use it from the app:
const $ = window.$;
In general I would recommend trying React Bootstrap instead of Bootstrap in React projects. It provides similar looking components but doesn't need jQuery and works on top of React.
I hope this helps! Please file issues if you're confused about something. We are happy to help.
You might need to require the jquery package. Include var $ = require ('jquery') (after installing it -- npm install --save jquery) on all the components that reference jQuery.
I want to use Materialize CSS library along with Ionic app. Can I use it? Will it have any performance issues?
Is there any other library so that I can give a 'Material Design' feel to my app
You can use either Materializecss or Google Material Design. Either will work fine with Ionic. Both have plenty of documentation. Assuming you're using bower -
For Google MDL
bower install material-design-lite --save
then just include the css and js in your index.html file
<link href="lib/material-design-lite/material.min.css" rel="stylesheet">
<script src="lib/material-design-lite/material.min.js"></script>
For Materializecss
bower install materialize
then include the basic files in your index.html file.
<link href="lib/materialize/dist/css/materialize.min.css" rel="stylesheet">
<script src="lib/materialize/dist/js/materialize.min.js"></script>
You may have to change the directories to the correct path of your bower installs.
Documentation on both for referring to components, css, javascript.
Google MDL = https://getmdl.io/components/index.html
Materializecss = http://materializecss.com/
Hi i would like to use angular-snap into my j-hipster project.
I've installed it with bower in my project root, then I added the module in j-hipster app.js
angular.module('smeshApp', [....., 'snap']);
then i included in my index.html
<script src="bower_components/angular-snap/angular-snap.js"></script>
<script src="bower_components/snapjs/snap.js"></script>
finally i tried to use the directive snap-drawer and snap-content
but doesn't work and also my j-hipster app doesn't work anymore.
where did I go wrong?
I'm trying to use Angular 1.5.0-beta.0 which I have installed from npm.
According to some guides - we can now create a component using module.component instead of the old fashion module.directive.
This is the component code:
export default angular.module('app.components.header', [])
.component('dashboardHeader', {
controller: 'HeaderCtrl as headerCtrl',
template: `This is test.`
})
;
My html is:
<body>
<dashboard-header></dashboard-header>
<div ui-view="content">
</body>
I'm getting:
angular.module(...).component is not a function
What could be the problem?
I had the same issue did a
bower install angular it still gave the same error ,
Finally I updated the version of angular.js in script src tag and it worked .
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
There is nothing wrong with your code. Install the stable release of angular 1.5. I had the same problem and then deleted angular and installed it with:
bower install angular
Make sure you are not using old version of Angular JS CDN
I had the same issue for meteor js (AngularJs with MeteorJs) .
We need to update the angularjs version.In my case I updated 1.4.8 to 1.5.3 then restarted the meteor server, error solved.
Command to update angular js(In case of meteor)
meteor update angular:angular - this will update the angularjs to the latest version available.