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>
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 new to angularjs I want to use the ui-router with bower.
I have added the following line to my bower.json
"angular-ui-router": "0.2.15"
the I have ran
bower install
I want to include the module in my index.html but I don't know which path to use.
By default bower installs packages inside bower_components directory. Make sure that this directory is web accessible. You can then include the script from:
bower_components/angular-ui-router/release/angular-ui-router.min.js
You can also change the default bower_components directory by setting a new value in your .bowerrc file as:
{
"directory": "./foo/bar"
}
This way bower will install packages inside foo/bar path instead of the default bower_components
Open terminal, go to project path.Use command,
$ bower install angular-ui-router
I try to work with AngularJS and Polymer (i actually use AngularJS for the Services eg. Token Auth and Polymer for the Material Design ) so i ask a simple method to build the scafolding for such kind of App (Polymer + AngularJS - localhost run with grunt) ? For the moment when i install :
yo angular MyApp
i have the bower_components in the root directory and if i try to install Polymer through :
bower install --save Polymer/polymer
So i install the Polymer in the AngularJS bower_components, (if i use the yo polymer generator the bower_components folder is in the /root/app/ folder and not in) And when i use grunt serve i get the Error (example with the core-toolbar) :
core-toolbar was not injected in your file.
Please go take a look in "/project-root/bower_components/core-component-page" for the file you need, then manually include it in your file.
so i think that i need to change something in the Gruntfile.js, but i do not know what ! Maybe is better use two bower_components folders ?
I solved the Problem, so i used the AngulaJS Generator for Yeoman, after that i moved the folder bower_components from the /project_root folder to the /project_root/app folder, so i modified the .bowerrc file with the new path of the bower_components folder :
{
"directory": "app/bower_components"
}
So now i can use bower to in install the Polymer elements that i need, with bower as usual :
bower install Polymer/core-toolbar
I do not use the --save for save the dependency in the package because when grunt/bower try to insert the link in the index.html file it fail, so
delete the Polymer dependencies from the bower.json file and add them manually, other hint remove the link already added by grunt/bower about polymer in the index.html file and add the webcomponents.js :
<!-- Polymer Section -->
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<!-- My imports -->
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
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