I'm using angular-meteor library to develop a meteor application with angular as a front-end.
I need to add an angular directive called angular-file-upload.
When I use this directive in my node/angular app, it is installed via bower, and has this folder structure:
angular-file-upload folder contains
angular-file-upload.js
as well as a sub-folder named src,
which contains 3 files:
intro.js, module.js and outro.js
What is the process of installing such third party angular directives?
Is this done with meteor add command, or by placing these files manually into specific directories?
Check out this link, if those are the actual packages which serve your purpose then you can directly add them to you Meteor app by using meteor add <package-name> command in the terminal.
While the alternate way to do this is by adding these .js files manually to public or lib folder and link them to your corresponding HTML pages. But I would personally prefer the 1st way to do this.
You can create the library by yourself. There are few alternatives to do that.
Basically it goes down to these steps:
add package.js in root directory
meteor publish --create
The complete details how to do that can be found here: http://angular-meteor.com/tutorial/step_19
Related
ASP.NET has a nuget package called ReactJS.net which is capable of running Facebook React v16+ code.
I'd like to integrate Office UI Fabric, but the react package is only available as an NPM package, where I'd run
npm install office-ui-fabric-react --save
Is it possible to take the contents of this code and integrate it into ASP.NET (MVC/Core)?
Should I "do something" with the github source and add it to my code? (e.g. rename the necessary files to jsx)
Should I create a temporary node project, install the package, and manually copy data over?
Is there another way I'm not listing (a utility, etc)
I have not used the ASP.NET ReactJS.net Plugin, but from what I can gather it requires you to generate a bundle that contains all the dependencies you want to use with it and include in your ASP.net template.
To create a bundle that excludes react from the office-ui-fabric-react module, I would use webpack to build the bundle and the exclude react as a dependency bundled in the bundle.
https://webpack.js.org/configuration/externals/
Hi i just finished installing asp.net core1 so got introduced to npm , bower and nodejs after researching a lot i chose to go with angular2 .
now my problem is that i have never used gulp, grunt etc even though i know how it works and why to use it. there are lots of instructions on web to setup angular2 project with mvc6 but not explaining the thing which is new with mvc6.
anyways i dont want to get myself confused with gulp/grunt etc right now so i am just copying files from node_modules to my script folder and giving it path but it works almost for everything related to angular.
for eg.
import {anything} from 'angular2/core' or from RXjs etc(this import is from node_modules) and i have to give a path in my index files where i have copied all the files.
but when i try to include some plugins like ng2-select, ng2-bootstrap or toastr etc it doesnt work the way it should it throws errors.
my question is do i need to copy whole folder from node_modules to my script folder and then linq it or what , how it works?
Do I need to copy whole folder from node_modules to my script folder and then link it or what, how does this work?
I have an example in my blog post of what you should be doing in this situation. Ideally, you will use a gulpfile.js to orchestrate your desired file needs. For example, if you're looking for Angular2 it is rather simple. You create a gulpfile.js by adding a new item to your project. In that file you write some simple "tasks" that automate this move for you. You look in node_modules and move over anything that you need. For Angular2 I move over the following .js files (in this example):
var angularJs = [
'./node_modules/angular2/bundles/angular2.js',
'./node_modules/angular2/bundles/router.js',
'./node_modules/angular2/bundles/angular2-polyfills.js',
'./node_modules/angular2/bundles/http.js'
];
So to answer your question more directly, no. You do not need to copy the entire folder -- just the files that your application needs.
I have been working through the Meteor Tutorial and have created my first project in my workspace.
I do have the list of files as described on the first "Creating an app" page; however, if I reference the Application structure | Meteor Guide, they are showing more than just the two client and server folders.
Are the folders described in the Application Structure guide, a layout scheme that I need to create, or should the meteor create simple-todos command have build this out for the reader?
You can have more than client and server folders in a Meteor application. The simple-todos application just uses these two folders, but for more complicated apps your needs can call for a more complex structure.
Before Meteor 1.3 the file loading of Meteor was different. Then you had several other folders that had special functionality, like lib, private, public. From 1.3 this has changed, and now we only have three folders: imports, client and server.
Anything placed inside the imports folder is not loaded by Meteor. Here you put your application code, and then you import it from anywhere outside this folder. This ensures that Meteor only bundles the code that you intentionally state that you will be using. This way you can write code that is not bundled in the app before it is tested and ready for use.
This is explained in the guide:
To fully use the module system and ensure that our code only runs when
we ask it to, we recommend that all of your application code should be
placed inside the imports/ directory. This means that the Meteor build
system will only bundle and include that file if it is referenced from
another file using an import.
I need to add Meteor framework to existing module.
As I can see this option is available for new modules (static web->Meteor app).
But I can't find how to make this with existing module.
You just ope the project containing .meteor folder and make sure the meteor plugin is active.
Settings->Languages & Frameworks->Javascript->Templates
Tick "Open HTML files as Handlebars/Mustache" option.
I am using bootstrap in Meteor and found that there is a modified flat design here: http://designmodo.com/demo/flat-ui/. Among the files seems to be a modified set of Bootstrap files. Is it possible to somehow use those css and js files to override the default bootstrap files to get the Flat-UI in a meter app? Thank you!
it's quite simple:
unzip the contents of the flat-ui-master.zip from the flatui site, then follow these steps:
create these folders in your app root: /client/stylesheets
copy the contents of the .zip into /stylesheets
remove the index.html and README.md files as they might cause your app to crash, and are not needed
meteor automatically takes care of the rest.
Although manually insert files works, I'm using meteor package jss:flat-ui
meteor add jss:flat-ui
it will automatically add flat-ui and twbs:bootstrap.
Note that, it might be better to remove any bootstrap package before installing this, I've been in a project that has mizzao:bootstrap installed and the login ui not working, so I remove mizzao:bootstrap and reinstalled flat-ui to make it work.
You can use whatever css you want to, Meteor don't care.
I wouldn't add the bootstrap meteor package though, I'd just download the css files you want and place them in your project. That way you know exactly what files are used and can easily make changes.
Here's some info on how to structure your app: https://github.com/oortcloud/unofficial-meteor-faq#where-should-i-put-my-files
I created a shell script to generate a custom bootstrap Meteor package from either a precompiled distribution, or from your own clone of the Bootstrap Git repository.
You can find it here, along with usage information: https://github.com/wojas/meteor-package-bootstrap
Just unpack the ZIP file containing the files and run this command from inside the theme folder:
/path/to/meteor-package-bootstrap.sh $your_meteor_project/packages/bootstrap