I am new to AngularJS and need some advice on how to structure a SPA with Web API for an external search application
Di I have to use
•MVC / razor views (leave all routing and rendering to Angular)? or just use 1 VS2015 app [use angularjs SPA template for VS2015 or just an empty web application with angular file and a webapi project under same solution?
any examples would be helpful to understand
For angular structure I am reading Google best practice and John Papa
Well, I think what you ran into now. I can suggest two of the ways you can choose.
If you want to keep your backend and frontend together you can go for angularjs SPA template for VS2015. It would come with the build pipelines, bundles and everything you'd need. Now you can choose to render your single page of angular to be rendered with a MVC razor view (if you want to have any mechanisms where you'd want to include your dependencies through the razor view) or just go with a blank html and web api controllers on the back. But you'd end up using one environment for all and I think that's best if you're building the full project.
Now, for the other way around, you can start with an web api project. You can instantiate your angular project with it or somewhere else. You can use yeoman or any scaffolding tool you like and use your own JS toolings you'd like to use. You can do the same in the VS project too but this approach is better if you want to keep the frontend and backend flavor separate.
And I'd suggest using typescript too.
Related
I am trying to upgrade a large Enterprise application from AngularJS v1.4 to Angular 8 and trying to look for various approaches for the same.
Since we are on angularJS1.4, we cannnot use ngUpgrade Module provided by Angular team because in order to do so we need to first migrate AngularJS to version 1.6+ and controllers to components. (Hence, this approach is discarded).
A complete rewrite of the application in Angular 8.
I read about single spa where two frameworks can coexist together.
Using an iframe to load angularjs in angular app and then gradually re-write the new code in angular.
Create a completely different application in Angular, then from my AngularJS navigate to new Angular application as per route. Both the apps will run on different ports locally, but will run on same domain on server hence sharing the cookies and localstorage.
We are thinking of going with approach 5.
Which of the following approach should I go with or is there any other approach I can go?
Any other inputs will be appreciated.
We have huge enterprise application written in angularjs.
Now we have to migrate to angular, so we have ruled out an option of hybrid approach angular suggests using "ngUpgrade".
So now we are creating a new application in angular, which means we have 2 applications "angularjs(old)" and angular(new).
So to switch between these two applications can be done without refresh using angular-spa.
I was trying to find if there is another framework, where navigating between two apps happens without refreshing(without refreshing entire page by navigating to new html).
Possible solution:
Use a new Angular application as a wrapper, then just use iframe to show the application you want depends on the context - old or new. The issue you might face is changing the iframe, but I guess you can use postMessage to communicate between the apps.
A bit more sophisticated:
Use Angular Elements to create your hybrid app.
I really recommend you to watch Erin talks from the last Angular connect about how Google made the migration from js to Angular.
I've recently tried the micro-frontend architecture described here:
https://www.martinfowler.com/articles/micro-frontends.html
Each app on different code repository, runtime build and quite easy to implement. Take a look :)
I'm trying to create web using AngularJs framework, and I want to watch my changes on sass, js and html file (auto refreshing browser).
How can I do that?
You can use Yeoman generator for your Angular projects. This will provide
Provides a directory structure geared towards large Angular projects.
livereload for your project etc
cg-angular documention
This is not a programming question. If it is not appropriate to post it here, just advise me some place worth to share this.
What would be best to know in order to startup a project in Cordova. What i need to know is that in order to create a working web and android app what should i use?
So far
I use Cordova.
Ionic for GUI.
PHP and MySQL for back end
Angular JS for client side and controller for the app.
JSON
Do I have to use AJAX as well? if so, where would it fit?
"Do I have to use AJAX as well? if so, where would it fit?"
Yes, you should build a Single Page Application inside Cordova using any framework that you desire. Ionic/Angular is a valid choice here, other options include JQuery/Bootstrap, React JS, Framework7, OnsenUI and pretty much any combination of JS single page application framework and mobile focussed web front end framework that you like and can make work together.
For going beyond what the web view can do you'll use off the shelf plugins, or write your own which will need Java / Objective-C / C# or Swift skills depending on which platforms you're using.
As you want to be building a single page application you will need to make AJAX calls to get resources from servers, call APIs and the like. Do this using the mechanism built into your chosen framework, e.g. $http service with Angular, $.ajax for JQuery etc.
With angular you can use AngularJS $http
Link to Angular documentation: https://docs.angularjs.org/api/ng/service/$http
I have individual pages and initially I wanted to use angularJS because of data binding and the many other neat features. I also ended up using requireJS simply to help me manage my dependancies better as the list of javascript libraries I'm using is growing.
My question is using AngularJS with requireJS a no no for non single page web apps?
It's not a no-no. You can definitely use angular on non-single page apps. You just will lose a lot of the functionality - ie the stuff between "pages". You app will essentially be recreated on every page.
I've used angular for a multi-page site (basically a product search engine), with each page being separate. I used GET and POST to transfer stuff across pages, but ultimately, I wanted to use angular for rendering the content on the page because it's just neat and clean.