In VS.NET 2015, I've added a reference in bower.json for angularjs. This caused the angularjs package to be downloaded, which I can see in the Bower folder.
However, I'm not able to execute any angularjs code. I do have an ng-app in the HTML tag. If I add a CDN reference to the angularjs library, it works fine.
What am I missing to use the package downloaded by Bower?
what are you missing is referencing the downloaded libraries in bower_components folder in your index.html.
For example let's say you added restangular to bower. the library while reside in ./bower_components/restangular so in your index.html ( your SPA). you will reference it like this :
<script src="../bower_components/restangular/dist/restangular.js"></script>
Beware sometimes you should add all the library main files ( js and css), for that you need to check the value of the main attribute included in the bower.json of the library . for our example in bower.json in ../bower_components/restangular/ we have:
"main": "./dist/restangular.js",
In a the file .bowerrc you may define the directory for the downaloaded libraries in my example it will be bower_components.
In your .csproj file add the
<Content Include="bower_components/restangular/dist/restangular.js" />
Use can see this example
Since more than likely for production deployment you won't be deploying things in bower_components directory, I suggest you setup a gulp or grunt task to copy all the JavaScript that you are going to use and probably minify and concat / bundle them into a folder in wwwroot like /lib or /js or whatever your convention is going to be and add a script tag pointing to that bundled version. There is a decent walkthrough by Mads Kristensen from the recent Build event that you might want to look at. He demoed all the things you would probably need to get your app running.
Related
I have a created a jhipster project
"jhipsterVersion": "4.3.0",
I am using this library for a text editor in my project.
https://github.com/angular-ui/ui-ace
Everything works super awesome in the dev mode. But when I deploy on prod "ace" cant find its dependent js files.
mode-javascript.js
mode-html.js
theme-monokai.js
I am not sure how to configure angular ace to get those files on production
THIS IS NOT A JHIPSTER ISSUE, but I am tagging it, hoping someone faced the same issue.
Thanks in Advance
angular-ace bower.json file exposes only ui-ace.js file in its main property: https://github.com/angular-ui/ui-ace/blob/master/bower.json#L8 but instructions say you must include 3 files.
As JHipster prod build uses bower.json to know which file to inject in index.html, it results in your prod index.html having only ui-ace.js.
Ideally, you should report this to angular-ace author but as this project has not been changed for last 3 years, it's safer to fix it on your side. In fact, it'll be safer to use another project considering all the issues and pull request pending.
To fix it you must edit your app bower.json file and add a section for angular-ace to overrides main property and reference the 3 files. There is an example in your project bower.json for bootstrap: https://github.com/jhipster/jhipster-sample-app/blob/master/bower.json#L52-L56
I'm trying to create a custom UI plugin in TypeScript
Here's the steps I'm taking
create a plugin project in a local folder
write .ts files for custom UI in the plugin project root
generate .js files out of those .ts files with tsc command in the plugin project root
go to the test NativeScript project and run tns plugin add <local plugin path> to include the created plugin
But I get compiling errors at step 3 because I have importing statements as follows
import { ContentView } from "ui/content-view";
import...
I referenced an example here https://github.com/NathanWalker/nativescript-cardview/blob/master/cardview.ios.ts
My question is how cardview.ios.ts in the example 'nativescript-cardview' is being compiled to cardview.io.js? It seems impossible to do this...
In the plugin, you have referenced the author has created a demo app and is using the declaration file for tns-core-modules from that demo. Look at this line where tns-core-modules.d.ts is included in tsconfig.json
You can follow this practice for testing cases and for your release you can create a relative path to the tns-core-modules (and references) declaration files from the app node_modules folder like done here
As a side note noEmiOnError flag in your package.json will allow the translation to continue without hanging on errors.
Thanks for linking to your repo. NativeScript's docs state that "if you are using a transpiler, make sure to include the transpiled JavaScript files in your plugin".
Your package.json specifies cardview.js as the entrypoint, but your transpiled JavaScript files haven't been added to the repo. I solved this problem in my nativescript-midi plugin by committing the transpiled files in a \dist directory. The plugin is written in ES 6 but transpiled to ES 5 for consumption. To make sure that the src and dist directories remain in sync, I use a git pre-commit hook that automatically runs the build command and commits the results. If you clone the nativescript-midi repo, you can view it in .git/hooks/pre-commit . A benefit of using this approach for your plugin is that it will also allow it to be used by developers who are not using TypeScript.
Say, I need to use Wysiwyg editor and I found a 3rd party directive for it.
It has a good readme and how to setup in my project(Local).
Demo link: Wysiwyg Editor
Considering that I have done all the npms and integrations in my local project.
How can I deploy the project with new changes?
Maybe I am asking because I don't know about gulp or bower. Does my project needs to have gulp ad bower in order to use such directives. If so, how will the deployment go post setup and integration.
Assumption : There are no gulpfile.js and bower setup already.
In Jquery using a plugin is quite simple. Add a script tag for js file of plugin and use it in html or js as instructed. Does the process has to complicated always for using a 3rd party angular directive?
No. It is not compulsory to use gulp. Gulp just runs task like adding css,js to your file , minifing it and like.
you need to add js file which contain directive code. In your case it is
this is your link of directive
Now you can save this data in one of your js file and add it in index.html
OR
you can give this online link.
Using external directive need to add js n css file.
Question is will it work? We have to see dependancies of any external module we are using so what are dependancies of this module?
enter link description here
you need to add this module also
ADVANTAGES:
Using bower: you can install module in your project. bower install will download all your dependancies also.
using gulp : Gulp task will make sure of adding your css and js files in index.html
I want to automate the injection of new js/css files to my ionic project. So, I found this really useful article, which shows how to do it using gulp inject, but just with my own js/css files (those in js/css folders).
If I now install another external library using bower, for example:
bower install angular-google-maps --save
That library is not automatically injected, because it's installed in lib folder, outside js folder, as it's a library from an external vendor.
I guess I should have another gulp task to minimize the external libraries installed with bower, and put them into js folder to make them injectable. Am I right?
Yes, you are right.
Quoting your article:
There is all of kinds of additional functionality that you can perform with gulp such as minifying of css and javascript files, running npm/bower commands, or running sass compile commands. The gulp-inject is just one module.
You can use a module like main-bower-files to retrieve these files and do whatever you want with them.
You can also have a look at this answer to get a starting point.
I've installed AngularJS using the fullstack installer here:
https://github.com/DaftMonk/generator-angular-fullstack
I want to now include ng-grid. How do I go about that? I've already ran npm install ng-grid which has copied the files to the node_modules directory. Do I just need to update my index.html file, or do I need to manually update the Grunt file? If so can someone guide me? Can't find anything online that can help me.
I guess the same goes for Compass (I've also already installed Compass using the same method above), as I'd like to initially start using #font-face in my app. I've used Compass several times before but not in this kind of setup...
Thanks :)
UPDATE
I've worked out how I should include ng-grid. Wat I should have done is this in the terminal inside my project's dir:
bower install ng-grid --save
This not only installs the ng-grid files in /bower_components/ but also updates the bower.json in my project's root, so that when I run grunt serve it automatically adds the css & js includes in my index.html page. I'm now successfully displaying a table using ng-grid :)
However I've still not worked out how to install compass successfully. I tried bower install compass-mixins --save-dev but when I save my _fonts.scss file it produces errors. The error being that it can't find the compass files. Maybe the path is wrong, but I read somewhere that that is what I should put at the top (that or just #import "compass";). The paths may also be wrong to my font files, but that's something I'll need to investigate once I can get compass running)
#import "compass/functions";
#include font-face("Roboto-Bold", font-files("../assets/fonts/Roboto-Bold-webfont.woff", "../assets/fonts/Roboto-Bold-webfont.eot?#iefix", "../assets/fonts/Roboto-Bold-webfont.ttf", "../assets/fonts/Roboto-Bold-webfont.svg#LatoBlack"), "../assets/fonts/Roboto-Bold-webfont.eot", "normal", "normal");
Uhh, I don't think you need any installer for ng-grid. The fullstack installer is for setting up your server sided stack. ng-grid.js should (like any other js library you want to pass to the client-browser) be accessible like you would implement (for example) jQuery.
So, assuming your directory structure has a folder called libs/js, put something like:
<script type="text/javascript" src="libs/js/ui-ng-grid_2.0.11-0/build/ng-grid.js"></script>
in the header of your index.html and put the source code of ng-grid to that folder. Or use a cdn server if you don't want to host the directive on your server.
In no case I would tell anyone from outside where my server sided node modules are stored or would give anyone but me and the server access to them.