I have an existing project (JS/jQuery and PHP for the backend) running. It's quite huge and still in development.
I'm now looking to introduce Angular 2 in this project in order to progressively clean up the front end and start from good bases. New modules will be created using Angular 2 and existing modules will progressively be converted.
The app is running on a single page using ajax to load data from the API. And my entry point is the index.php which I cannot discard because it integrate all the loading logic of the project.
Therefore, can I introduce Angular 2 in this project and if "yes" how can I process?
Any suggestions and examples are welcome.
This is the way how I converted my existing ASP.NET MVC 5 application to Angular2. Use the same configuration files and convert your php application.
Using Angular 2 with TypeScript
Related
I've created a website using Laravel+VueJs.
And there is a little issue in my understanding about which architecture of routing is better to use.
Now this app has the following structure:
Routing system is provided by Laravel;
Javascript files that include VueJs framework are divided into files for each html page (e.g: products page loads products.js from public/js folder and so on... )
That system works fine, each web page is loading lib.js file which contains every library or frameworks needed for frontend. It has around 700KB when minified by the webpack. Then we have smaller javascript files (2-3 KB each) for each web page. In general, each page loads 2-3 javascript files.
In conclusion, I wanted to know if it is a good architecture and whether should I consider to use it in the future or should I use a different type of structure. If it's not a good option, then which would be the best choise and what technology / plugin should I use?
if you app is going to be SPA I advice you to :
use laravel routing for API
use vue-router for your application
navigation
I am trying to migrate my angularjs(1.6) to angular 5. As of now I am focusing over migration of one page and want to go for both frameworks angular js and angular 5 running in same application.
I have gone through various links and found some approaches like going for incremental migration i.e. from angular js to angular 2 then angular 4 later angular 5 ; Modifying the scope syntaxes etc
My query is that should I modify the above scope related syntaxes in my current angular js application or I should create a new angular 2 /5 project and then move my js application code to newly created angular 2/5 app.My application is huge one. Also, I want to use ngUpgrade. Not sure where to use. Pls verify the approach and help in this migration
'create a new angular 2 /5 project and then move your js application code to newly created angular 2/5 app' is better in my opinion
there are some huge architecture differences between Angularjs and angular2+.
angular.js is a classic MV* architecture framework, you may write code in controllers, services, splitting these files into different folders like a MVC structure.
while angular2+ is a component based framework.you can write app in component based pattern.just like react or vue .although you still can write it as a MVC structure.but remember why you want to refactor your project.
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'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.
I've been getting started with Angular JS and using it as a front-end to integrate
with a Play Framework POC. I've already worked through the tutorial.
I cloned my front end from the seed project on github. It has an app/index.html
(which I'm using as my main page) and an app/index-async.html. What is
the point of the latter? Is it really necessary?
The two files are interchangeable, and you can use either one to build your application. index-async.html loads scripts asynchronously, which might give you a faster bootstrap time. index.html loads scripts synchronously, which is often a bit slower, but the intention is that the code is easier to understand for someone learning to use the framework.
To read more about asynchronous bootstrapping, check out the docs here: http://docs.angularjs.org/guide/bootstrap