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.
Related
I've inherited an angularjs project and am trying to understand how it's structured and ultimately am trying to add dependencies to it manually. The project structure is below.
It seems like it was created without NPM (notice no package.json files - is my understanding correct about this?). The angular components (ie. our custom code) are in the components folder. The assets has external dependencies, eg. PDFViewer, JWT and other dependencies. Does this mean it's likely the assets were manually copied over, instead of managed by a tool?
Ultimately I want to add a new dependency to the project, specifically this ImageViewer library. Without NPM, I'm clueless about how to do this. Can I add npm to a pre-existing project like this or not? If not, the directions show this alternative.
Does this mean I don't have to manually put anything in the assets folder? I just put these references in app.js and it should pick them up? And then I obviously have to define ImageViewer somewhere in angular module or something to bring it into the project. Or am I completely wrong about all this? I don't know anything on how to manage JS dependencies w/o NPM so any recommendations here are super welcomed!
I would recommend using npm to manage your dependencies where possible as this will make your life easier when it comes to upgrading versions etc.
You can just copy and paste the js files into the assets folder and reference them in your index.html file by using a script tag though, if you want to go that route. This will make the exported object available globally within your application (which may or may not be what you want).
The snippet you've posted above has the script source pointing to an external url, so you don't have to copy and paste anything locally, however your application then has an external dependency on that URL being up and available when your application runs, so that is something to keep in mind as well.
I would recommend trying to go over to using npm to manage your dependencies. It is absolutely possible to just run npm init in the project and to start adding dependencies this way as well. Both approaches can work side by side.
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 have tried every tutorial I could find to try to make a HTML/JS project with Angular 2 working on NetBeans, but none have worked. Maybe is my npm that is bugged (search, for example, doesn't work).
The node_modules folder that is created with npm install is grey on NetBeans and have some errors in some files (I don't know if this is normal). Any .js I try to import from node_modules folder gives the error Failed to load resource: net::ERR_EMPTY_RESPONSE / Uncaught ReferenceError: System is not defined.
Does anyone have any idea what could I be doing wrong? Or does anyone knows any tutorial that have the code to download so I can compare with what I'm doing and see what is the correct? Every tutorial I have found doesn't have any code to download, just some pieces of codes in the page for explanation.
Sory if this isn't a good question, but I have been trying to make this work since yesterday without success and I'm completely out of idea.
First I recommend to upgrade to the last version of NodeJS and NPM, to minimize the errors in your node_modules folder
Install the Everlaw's Typescript plugin from https://github.com/Everlaw/nbts/releases . If you are using Netbeans 8.1 I think you can install it directly from the Plugins installer. I'm using NetBeans 8.2 and there is no problems installing the plugin manually.
Then on NetBeans go to Tools -> Options -> HTML/JS -> Node.js and write the right Node and NPM Paths and Sources, I would recommend check-on the three check-boxes in that panel.
For a quick start try the QuickStart demo from the angular.io page, it is not necessary make any change in the package.json.
The first time I tried to debug an Angular 2 application I put the index.html file directly in the project folder in order to do not make any changes in the index.html script sources nor change the project files structure but you need to change some properties of the project:
In the project window right click the project and select properties.
In sources change the Site Root Folder using the Browse button and select the project folder (You can ignore the warning that appears).
In Run select Run As: Web Application.
I recommend select Browser: Chrome with NetBeans Connector
Using the Browse button go to the project folder and select index.html as your Start File.
Select Web Server: Embedded Lightweight.
And finally in Web Root write /Your_Project_Folder
run npm install from NetBeans
Click the run button and your web application must open in chrome, if you edit your html or typescript files and save them you could see the changes in the browser in real time without re-debuggind your application and can use the Browser DOM window to explore your elements created from Angular 2.
You still see some errors in your files because NetBeans is not fully compatible with the HTML Angularized syntax. But it runs flawlessly.
You can also run the start script directly from Netbeans to run your project using lite-Server.
Screenshot NetBeans - Angular 2
I would recommend you to install the angular cli: npm install -g angular-cli#webpack
Fore more infos regarding this tool, take a look here: https://cli.angular.io/
Then create a new Angular2 app with ng new <app-name>
This will create a complete and working Angular2 application in the current folder.
cd <app-name> and start the app with ng serve.
Check your new created app in your browser on localhost:4200.
If this works, you can try to get started with your NetBeans! :)
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.
How do I add these JS packages to a meteor project? Do I simply place the JS files in the public folder so the client and server can access them? Or is there some specific steps that I need to follow?
These kind of standalone libraries can be directly placed in the /lib directory under your project.
For use on both the client and the server, place them into project/lib folder.
Or if you want to use them only at client-side, place them as usual in project/client/lib
In short, It depends.
I would recommend you check out http://atmosphere.meteor.com for a list of packages. If what you're looking for is there, install meteorite with npm install -g meteorite (https://github.com/oortcloud/meteorite)
Once you have metorite installed you can install these community packages quite easily using mrt add packagename
Most packages are on http://atmosphere.meteor.com.
But if for some reason the JS package you want isn't on atmosphere, depending on the package, if its a UI package (e.g datepicker, etc) put it in the /client/lib folder to avoid meteor crashing (only accessible by client).
If its a type of module abstractor (e.g backbone - backbone is included in meteor already btw: add using meteor add backbone) you could put it in the /lib directory of your package, it will be referenced automatically by both the server and client.
You have to add the packages via console.
Type "meteor add accounts-password" for example.
See here
Perhaps you should watch some of these videos here
to get an idea how meteor packages are added.