i have a angular 2 application. I was wondering if i could convert this application to an integrate-able sdk which other applications can use by adding script tags in their headers. If this is not possible can anyone provide any tutorial link which shows how can i build a simple sdk which can be integrated in other applications. thank you.
Of course you can! In javascript terms, it's not called "SDK" but "module".
The most popular module manager is called NPM.
So you can follow this tutorial to package your "application" as NPM module, then it will be easy for other js developper to integrate it inside their own projects (using the tags, services, directives you defined.
Here is a good post about it
Cheers!
EDIT : if you want to use your angular components/modules outside in non-angular application, you can follow this one. In the example it is used with React app but it will work with any html5-compliant browsers.
If you want to target also non-compatible browsers, you should add a polyfill
Related
I would like to create a Single Page Web App with Angular but I couldn't decide to project type.
(Just generated files by tools like angular-cli or that generated files inside an Asp.Net Core Project)
I got some question.
What are the advantages and disadvantages of building angular app on ASP.NET Core Project?
Which cases I should prefer to locate angular app inside a ASP.NET Core Project?
I'd like to take a stab at this. I'll agree that the answer is on some part opinion based though.
I have just been comparing the two versions for a new project that I am involved in.
First some facts
The Angular project created inside of the ASP.Net core application is in no way dependant on the .Net code. You can navigate to the directory and type ng serve and run it by itself.
You can copy the angular code to another directory or repo and host it by itself if you for some reason later on decide that you don't want to combine it. All you have to do is copy paste the angular code, and then remove some lines in startup.cs regarding the internal hosting.
The code that gets added inside of the asp net core template is close to the base angular app with a few examples added on.
If you use the login functionality template it implements an oidc client, and an identity server on the back end, (opinion) pretty much the same way I would have done it myself. There is nothing stopping you from rewriting it if you don't like it. At worst it's a good example of how it can be done.
As of today the template is using Angular 8.0.0, you can just change the package.json to get the latest version and run npm install. It works great.
You can still use Visual Studio Code for the Angular parts with a combined project.
Here are when Id choose the different versions (warning opinions ahead).
When to choose the asp.net core angular project.
Small web app with limited functionality.
Small team, probably same person writing angular code as api code.
If you are unsure. You can always split later.
When to choose separate apps.
Big team with deployment builds and automation.
If you want to host angular and asp.net core separately (for reasons such as to achieve maximum performance and load balancing in apps with thousands of visitors).
Separate people coding angular and asp.net
You don't like having it all in same repo and want to split it up.
In a bigger teams and contexts with multiple APIs you will probably have to deal with CORS anyways, but if not you will have to at least think about it for this to work.
If you are unsure, you can always combine it to one app later.
I have some experience using AngularJS 1.x in .Net MVC application. In that project, we basically downloaded all required Angularjs min files and included them in project. We did not use npm or bower. It worked fine.
Now my next project is on Java Web application. This is an existing application with plain servlet/jsp. I want to use Angularjs 2 on new pages that I'm developing. But I'm not able to make progress on how to include Angularjs in this existing project.
Angular team recommends to use Typescript along with npm/gulp. But I want to stick to javascript and not introduce complications with TypeScript in existing project. I was expecting to download angular min files and include in my JSP and get going. Apparently I cannot even find link do download min files. New Angular website doesn't even have link to download them. I also looked up angular github but couldn't find min files.
I would appreciate if someone can guide me in right direction. At this point, I'm thinking to stick to 1.x instead of 2.0. Thank you.
Wow, that is so annoying.
You could try creating a test project using NPM, add the dependencies you need, and then build the project. From there, you could copy paste out the javascript files you need.
Hope that helps.
You can find angular2 versions prior to release here : https://code.angularjs.org but if you want the latest ones you will have to try Samuel's answer.
Besides, if you're doing this project at school and it asks you to use servlet / jsp, you should stick with it and use something like bootstrap for easier html/css.
Doing the frontend with angular might be considered a cheat or a workaround ( speaking from experience )
Until recently I used to develop my js applications with Backbone-js.
Now, I wish to start using Angular-js for the first time.
In my backbone-js apps I used requirejs to load any third party library, it let my app stay organized and clean.
Now, when playing around with angular, I see that in many examples they use <script> to load these modules.
Is there a clean way to load modules without using this <script> tag? and keep angular functioning as expected?
Is it common to use require-js for angularjs apps? or is there any alternative?
Thanks.
You don't need to use require since you have a built in dependency injection mechanism. In order to use 3rd party libraries you need to do 3 things:
Use libraries that are compatible with angular in order be synced with the digest cycle. Most of the common libraries have an angular module that encapsulates their code.
Add these modules to your app. You can explicitly add each library with its own script tag or you can create a bundle of all your libraries and include only it.
Declare the use of that module when you create your app and module.
Angular uses whats called dependency injection to handle modules. Here is the documentation: https://docs.angularjs.org/guide/module
You might want to look at https://github.com/substack/node-browserify#usage
The downside is you'll introduce a "compile phase" to your build process.
The plus is the npm integration.
You still need to follow the "angular way" to inject dependencies, using browserify you'll have little yet nice puses https://blog.codecentric.de/en/2014/08/angularjs-browserify/
Hope it helps.
I'm writing Java Web application and want to use AngularJS on frontend.
But I don't want to delegate routing and security to angular, but handle it with spring. My file hierarchy in the project looks like that:
I wrote Angular controllers, services etc. And just apply it on the jsp page with some init parameters. All jsp are loaded by Spring controllers, I have some security rules for that pages. Angular also consumes REST API from this application.
The question is about efficiency of such approach. In fact I have a few SPA in here. Every time i load a page, Angular initializes from the beginning (there is about 10 pages).
The reasons I want to stay on this version are:
It's already set (Routing, Security)
It seems like I don't need to load all the scripts on the page, but only required ones
But also I have feeling I'm doing it wrong way...
Should I separate Spring and Angular and use Angular also for routing and security handling, not only for DOM manipulation.
What do you think? Do you have any suggestion?
Angular is not another jQuery, its Single page application framework.
You can look on SPAs like on ordinary external application which communicates with your backend. So there is no view or prezentation layer on server, just REST API.
Angular app should have its own routing, it doesn't make sense to combine it with spring MVC. Security lays mostly on REST, and you can use spring security on it as ussual.
Best practice is to create Angular app as separate javascript application. You can use a lot of tools from angular ecosystem which makes your work very comfortable.
During development you have your backend running, and develop Angular part separately using javascript devstack. After that you can pack the both parts to single war.
I have nice small example of Spring and Angular integration here:
https://github.com/Angular-cz/java-devstack
Unluckilly the readme is written in Czech (beautifull language :) But if you are experienced in Java and maven you will probably get it from code, I will also try to describe it here.
The bigger app with a nice module structure and jwt autentication can bee seen here:
https://bitbucket.org/angular_cz/beerapp
Both of them has similar architecture:
separate maven module for frontend and separate for backend.
javascript part use npm as package manager
developer is using gulp task runner for javascript development (it is run inside module, where gulpfile.js resides).
there is karma runner configured and several unit tests
the app connects to the backend during development using proxy running on /api for the app can have same configuration on production)
when building war, frontend module uses frontend-maven-plugin which run gulp build task same as javascript developer would
then the built minified assets are put to resources
the next part is just ordinary maven way how to put assets to /static
one more nice thing - there is also integrated e2e test under integration-test profile.
Feel free to ask if you are interested in this kind of architecture.
Hey I'm collaborating on a Trigger.io project and I'm curious if there is documentation on how to best do this? I have other guys who are loading my project into their environments (via github) using TriggerToolkit, and they can't run the projects because there are conflicts with identity.json.
We're working on a simpler way for team collaboration, but for now the process for importing and existing Trigger.io will be similar to the instructions here for one of our demo apps:
https://github.com/amirnathoo/Sales-Square
Basically each app you create has a unique src/identity.json file which is also specific to your account. You should avoid checking in your src/identity.json file and a collaborator should create their own by creating a new app and then copying your code into the src directory.
Update: we've now enabled better collaboration with our Projects launch announced last week:
http://trigger.io/cross-platform-application-development-blog/2013/01/15/introducing-projects/
This should remove the need to manually create / overwrite the src/identity.json file to share Trigger.io app code