Created a project in web directory. Hello world example works.
Installed node and grunt.
Ran:
npm install angular-ui-bootstrap --save-dev
angular-ui-bootstrap is now in node_modules
How do I start developing with any npm installed local package?
Like this?
<script src="node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
My point of installing is because I am following tutorials and they have this:
var app = angular.module('store', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
Which I believe needs ui-bootstrap-tpls.js
Thanks!
Yes, you need to add
<script src="node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
in index.html, only then you can inject 'ui.bootstrap' into your angular module else you'll get injector error.
Related
I've followed the following steps :
bower install ng-ckeditor
added <script src="bower_components/ng-ckeditor/ng-ckeditor.js"></script> in index.html
added in app.js like angular.module('MyApp',['ngCkeditor'])
but now when i'm running the app i'm getting this issue, how to resolve it ?
ng-ckeditor internally uses ckeditor, so you should refer ckeditor.js before ng-ckeditor.
Follow the steps mentioned below
sudo npm install ckeditor
bower install ckeditor
bower install ng-ckeditor
add the following lines in index.html
<script src="bower_components/ckeditor/ckeditor.js"></script>
<script src="bower_components/ng-ckeditor/ng-ckeditor.js"></script>
I am trying to add a new angular module.
https://github.com/angular/bower-angular-animate
I noticed that there are 2 ways to add an angular module. One is using bower. The other is using npm.
$ npm install angular-animate
//add dependency
angular.module('myApp', [require('angular-animate')]);
$ bower install angular-animate
<script src="/bower_components/angular-animate/angular-animate.js"></script>
angular.module('myApp', ['ngAnimate']);
What is the difference between the 2 methods? What are the pros and cons of each method?
bower is load the modules in browser end this bower modules will use only in front end you cant use it in backend.
npm is load the modules in backend as well you can us it in back end and front end by using require or import
I'm trying to use ngSanitize so that I can inject html content ( external) into my app. However I got stuck at the ngSanitize installation. If I add it into my app module it stops working . Should I download this from somewhere ? Angularjs docs don't say anything.
var crmApp = angular.module('crmApp', [
'ngRoute',
'crmControllers',
'ui.bootstrap',
'ngSanitize',
]);
Install bower. You want bower.
npm install -g bower
Go to your project root and install ngSanitize:
bower install angular-sanitize --save
bower install downloads the script for you. Include the JavaScript in your app:
<script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>
If you want to use CDN resources without download go to https://code.angularjs.org/ and click on version you want .Will find all the various resources available there and then you can copy location straight into script tag:
<script src="//code.angularjs.org/1.2.20/angular-sanitize.min.js"></script>
install
npm install --save angular-sanitize
import in app module
import ngSanitize from "angular-sanitize";
add it to your module
angular.module("app", [ngSanitize])
use in component
controller: class appController {
constructor($sanitize) {
this.$sanitize = $sanitize;
this.text = this.$sanitize('text to be sanitized');
}
}
Yes, you need to download and include it: https://github.com/angular/bower-angular-sanitize
I must be missing something very basic but I can't get Restangular to load. My steps ...
Scaffold a new project with Yeoman
Insert includes for Lodash and Restangular
Inject restangular into my module.
grunt test
This is the result ...
Error: [$injector:modulerr] Failed to instantiate module fooApp due to:
Error: [$injector:modulerr] Failed to instantiate module restangular due to:
Error: [$injector:nomod] Module 'restangular' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Here are my includes ...
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/lodash/dist/lodash.js">
<script src="bower_components/restangular/dist/restangular.js">
Yes, they are in my bower_components directory.
My module definition is ...
angular.module('fooApp', [
'ngResource',
'restangular'
]);
Any help would be appreciated
Thanks to Marc Kline's help I finally got things working. Here's what I had to do:
yo angular foo
bower install lodash --save
bower install restangular --save
grunt bowerInstall
npm install karma-jasmine --save-dev
npm install karma-chrome-launcher --save-dev
npm install
I had a similar issue to this, and the problem was due to the fact that I hasn't added the Lodash and Rectangular JS assets to my Karma test config.
Adding lodash.compat.min.js and restangular.min.js to the files array in karma.conf.js made my tests run correctly.
I installed the generator-angular with yeoman:
Inside the bower.json I see this dependency which I also agreed to install.
but now I see I do need the angular ui router not the default angular-route.
Is this the angular core routing?
If yes why can it be installed extra?
If no what is this angular-route then? Googling it gives nothing unique...
"angular-route": "1.2.6",
with bower:
bower install --save angular-route
in the main page :
<script src="/bower_components/angular-route/angular-route.js"></script>
in your app:
angular.module('myApp', ['ngRoute']);
its all!
if you want more automatic import, you can install wiredep, wiredep injects yours dependencies into your source code, reading the bower.json file in this case.
That would be the bower package to install the ngRoute module. The source is found at:
https://github.com/angular/bower-angular-route
At a Windows cmd prompt:
> cd <path to your project>
> bower install angular-route
Bower will download to:
<path to your project>\bower_components\angular-route
And you can reference in your .html file via relative path:
<script src="bower_components/angular-route/angular-route.js"></script>