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
Related
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.
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
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.
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>