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
Related
I am reviewing an application which uses Angularjs. The application has a single minfied javascript file included. With research, I have identified that the javacript file contains Angular.js source and defines the application's routes, controllers, ec cetera. I need help separating the Angular.js source with other codes in the file.
You can use gulp or grunt for build project. if your using gulp you can create two javascript files using gulp inside gulp.js file. one for dependencies and other one for project source files. And if you need minifi you can use gulp plugin for it. for more details check this link https://gulpjs.com/
This should be straightforward - Is there a way to remove comments in HTML/view output during an angular build or render processes? The goal is simple - I don't want users to see them. I know this can be done with something like Grunt or Gulp, but want the comments to be visible during development (and currently have Grunt for a build tool). I've heard this can be done using the Angular CLI, which I know is for use in Angular >=2.0 projects, but am not sure if it could be using in a 1.x/JS project.
In Angular 2+:
ng build --prod
creates the dist/ folder in the root. It contains via webpack stripped down code without any comments, at least with the standard configuration.
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 am studying angular js and in our project they are using Grunt to setup the angular js application, as i can directly include angular.js in my html file and run it in a browser so where Grunt is coming into picture?
Grunt is a task runner. It is used to run tasks to prepare your application for the wide world.
For example you might use Grunt to minify your javascript files or concatenate them.
So Grunt prepares your application, but once it's prepared - it is out of the picture when you deploy your application.
I am using AngularJS v1.2.0-rc.3 with a project using ng-boilerplate. I want to use Bootstrap 3 so I've changed the bower file to use the branch for version 3, but now grunt fails when running the karma tests. I've isolated the problem to module dependencies on ui.bootstrap but I can't figure out what's wrong. Any ideas?
You'll probably need to fork it for now and change the dependency on ui.bootstrap to use their BS3 branch found here: https://github.com/angular-ui/bootstrap/tree/bootstrap3_bis2
It turns out that I had to build the angular-ui-bootstrap package with grunt and change build.config.js vendor_files to use vendor/angular-ui-bootstrap/dist/ui-bootstrap-tpls-0.6.0-SNAPSHOT.min.js
If you're relatively new to ng-boilerplate and want to get jump started with angular support for boostrap3 this fork might be helpful.
https://github.com/MorrisLLC/ng-boilerplate
It uses the lastest versions of the boilerplate vendor libraries and most recent versions of the grunt tasks.
See the Quick Start for modified instructions on building angular-bootstrap. You have to build it because the current angular bootstrap branch does not include the tpls files (templates).
I ran into the same issue and already had written a lot in bootstrap 2.3.2. Instead of starting all over with someone else's git repo, you could just update several files:
build.config.js add in the vendor/bootstrap/js/.js where the file is the javascript that you are planning to use.
less/main.less which imports the bootstrap less. You could use specific less files from bootstrap or do an import of everything with:
#import '../../vendor/bootstrap/less/bootstrap.less';