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.
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 have a question, I want to use angular 2 in maven project, and as you now the modules should download with ( npm install or ng new .. (cli) ).
The problem is if I generate the war file with all this modules, it will be very large because of the presence of all the nodejs modules.
In one of Github example they install this modules with ( npm install ) and finally goes to the home directory and run spring-boot:run
I want directly deploy my war file, so my question is : i should generate the war file with the all the modules and dependencies of nodejs or there is another solution ?
Three ways:
add all node_modules dependencies in to your version control, so source is always there, or copy necessary js libraries manually in specific source folder, like angular.min.js and so on (if your node.js is not available on your server, by security reason)
create execution goal inside pom.xml, something like
How to deploy a node.js app with maven?
use https://github.com/eirslett/frontend-maven-plugin and check existing examples, I am sure your case is straight forward
i have some angularjs file that has RESTAPI access to a third party service.
say, i have multiple java applications that need to use the same angularjs file.
what is the best way to share the file.
basically, in the olden days (i am talking about back end code), we would write an application that is deployed as a service and all other applications use this service. how do i achieve this with angular.. please keep in mind, i was mostly a back end developer and entering the new front end world
thanks
I would recommend to use Bower for maintaining your reusable components. Develop standalone functionality in their own modules, doesn't matter whether they're directives, services or whatever Angular components, and then install them as Bower dependencies into any of your separate Angular applications.
Bower has documentation on creating packages, and Brian Ford has written a nice (albeit a bit outdated at places) tutorial on writing reusable Angular components using Bower.
So, basically your workflow would go like this:
Start developing your module. If it is something already existing, you can just pull it out of the current place.
mkdir your-component-name
cd your-component-name
$editor your-module.js
Once you have your-module.js started (no need to finish development first, it's actually even better not to, if you're developing a completely new component), it's time to initialize your Bower component.
bower init
You will be asked for some initial settings, like component name (defaults to the directory name, e.g. your-component-name), initial version number, main file (should most likely be your-module.js) etc. For most of the cases the default value is just fine. After bower init has been successfully run, you will have bower.json that might look somewhat like this:
{
"name": "your-component-name",
"version": "0.0.0",
"main": 'your-module.js',
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
And of course you could do all this manually, but it's nice to use the bower init helper tool.
Continue development. If you have any external dependencies, you can add them also with Bower:
bower install external-dependency --save
Finished with development? It's time to publish your component so that it can be used in your applications. If you haven't already initialized your Git repository, start with it:
git init .
Add your work, commit and tag it:
git add <your-component-contents>
git commit -m "v0.0.0"
git tag v0.0.0
This is the part, in addition to the value of version property in your bower.json (note: Brian Ford's tutorial is talking about component.json - that is unfortunately outdated stuff), where you will be able to maintain your component pretty easily within all your applications. Need a change? Just do it, bump up the version number, commit, tag and run bower update where needed.
Next step is to publish your code into a Git repository, for example GitHub
git remote add origin git#github.com:your-github-user-name/angular-your-component-name.git
git push -u origin master
Then the component can be installed:
bower install your-github-user-name/angular-your-component-name
The component can even be installed from a private repo, for example if you do not want to publish the component outside your company (see under heading "Bower Package Stewardship" in Brian Ford's tutorial for more details):
bower install git#github.com:your-github-user-name/angular-your-component-name.git
# or from any other arbitrary git repo
On the other hand, if you do wish to publish your newly created component, you should think about registering it:
bower register angular-your-component-name git#github.com:your-github-user-name/angular-your-component-name.git
So it could be searched for, and would be easier to install:
bower install angular-your-component-name
Start using your component(s) in your Angular applications. And whenever you notice a bug/missing feature with one of your apps, you can fix your component, do a new version release, and then update your applications one by one.
And then there also is npm that you could use instead of Bower. The workflow is again pretty much the same, of course differing from the tool specific parts, but otherwise no big differences. I won't go into npm packaging details now, though, just thought to mention also that as an alternative tool.
SOLUTION 1 :
This can be acheive exactly the way you described.
Deploy a Service AngularJS app (that has all your services)
for example : tomcat7/www/myServiceApp
All your needed shared will be therefore into myServiceApp/js/myShareService.js
On your apps that need to access to it, your can reference all JS files (and others) like that <script src="../myServiceApp/js/myShareService.js"></script>
Of course with that solution, both services shall be deployed on same WebServer
Solution 2:
I personnaly prefer this solution with involves Continuous integration.
I copy all shared resources on the first step of the continuous integration to my app dir so every app is independent.
In Angular we separate our app by modules which is equivalent to a package in Java. Let's say you wanted to create a package which you can re-use for other Angular JS apps.
Sample
External Package
angular.module('my-awesome-app', [])
.service('FooService', function () {
// Awesome code(s) here
});
App Package
angular.module('another-app', ['my-awesome-app'])
.controller('AppController', function (FooService) {
// Awesome code(s) here
});
instead of using import we set my-awesome-app as a dependency for another-app (which why we put it on the array) so you can call its service.
Create JS file containing Angular Module which in turn contains Factory to expose API. Minify your file and use it either thru URL or direct inclusion into your project.
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.