Currently, I have a small Web site using Spring MVC (controller) with JSP pages.
I would like to migrate JSP pages to AngularJS/HTML but I have some troubles to understand the global picture.
I guess, I should migrate my #Controller to #RestController. These controllers will provide data/JSON necessary to display angularJS/HTML pages. Right ?
I haven't trouble to create these REST controllers: I can consult JSON data by using URL provided in request mapping of my REST controllers.
My problem is to display index page. In WEB-INF folder, I have an index.html. I would like to access to this page via: http://localhost/MyApp/
How should I process ?
A) Do I need a #Controller with request mapping on '/' which return 'index' view ? Then, the index.html will in charge to call REST controllers thanks to AngularJS ?
B) Should I disable all #Controller on server side and the index.html should be directly the entry point of my Web site ? How configure Spring MVC in this case ?
There are a lot of alternatives and all of them valid. With legacy Jspx MVC projects I do the next:
Small project
Create a package api to put on it the REST Controllers. Returns JSON
Create apackage web to put on it the View Controllers.
Big projects
Divide into separated projects
myproject- api. For REST: JSON
myproject-web. For frontend resources: HTML, CSS, JS
To serve the index.html,as you appointment, you need configure a Controller with a RequestMapping / that returs "index". The template views and viewresolver mades the trick.
From AngularJS I suggest try ui-router and retrieve views and resourfes according your url state.
Related
I have 3 Asp.Net MVC controllers and all have one Index view. I am trying to do angularjs routing for the actions. Assuming the urls are like
http://localhost/Budget/Index (default controller)
http://localhost/Vacations/Index
http://localhost/CompanyTests/Index
In all three of my Index.cshtml files I've [ng-view] and have setup corresponding html files with angular controllers. In my app.js main module, I have a default route that opens budgetindex.html when the url is /#/. I have configured all angular routes.
Assuming I'm on this URL:
http://localhost/CompanyTests/Index/#/tests
My angular route opens up companytestindex.html, I have a form that submits a POST request on one of the action on CompanyTests MVC controller and I'm returning RedirectToAction Index after processing the file upload which takes me to the url below
http://localhost/CompanyTests/Index
And after angular route takes control it rightly considers it as /#/ and executes the default route which is not what i want. I want the user to be direct to same screen where he uploaded the file.
The summary of the question is, for multiple asp.net mvc controllers i have angular routes and my html templates post data to asp.net mvc actions. After executing the action it returns back to Controller/Index and angular considers it as the default endpoint and opens up the incorrect html.
I have already spent days trying to look for articles explaining angularjs routing with multiple asp.net mvc controllers but haven't found any help. I just need a little direction here.
Thanks
I have an ASP.NET MVC project that will have an Angular SPA inside it. At first, I decided to create a new Area for the SPA but then I realized that I'm not going to use any Models or Controllers inside the area but just JavaScript files. So, now my idea is to place all the scripts for the SPA in the main ~\Scripts\ folder of the ASP.NET MVC project but inside another folder ~\Scripts\MySPAName\ and load the SPA just trough a ASP.NET MVC View.
What's the best way to structure a project in this scenario?
Well, if you want to create such kind of project I suggest you use MVC + WebAPI + Angularjs. You really need only 2 MVC controllers: Account for all login/logout logic and Home with only one simple method Index This Index method returns view which contains only one line of code - div or section or whatever you want ng-view attribute. This will be your main application page. Why its better to use WebAPI? Because these controllers works faster than MVC ones and WebAPI provide you with great REST possibility. What bout project structure. I can suggest you my personal structure of MVC + Angularjs project:
So you have API folder for WebAPI controllers, standard Controllers folder for MVC controllers. In Scripts folder you have separate folders for your angular controllers services ang general libraries and one .js file - its your angular module and application file. Moreover, its better and cleaner if you have additional subfolders in Scripts/Controllers folder so you can split all you *.js file by category (e.g Home, Mangers, Prices etc). Also you can see that I have folder Templates in root of my project. Here you can place all your html files which you will use as angular views/templates. And I also suggest you to create additional subfolders here as in Scripts/Controllers subfolder for better and cleaner structure
Hope that will help you
ASP.NET MVC is better suited to traditional web sites. For a single page app, use ASP.NET Web API instead. Here's a tutorial:
http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/build-a-single-page-application-(spa)-with-aspnet-web-api-and-angularjs
In this, There are two web projects, one is or web api and another one is for client web page (SPA).
You just need a empty web project to start an angular project.
Index.html - It is the main html page for your application. All other pages (partial pages) for your project can be placed Inside the directory Pages.
Scripts - All your js files can be placed inside this directory. You can differentiate all your js files into it's sub-directories.
I want to create an application where backend is driven by CodeIgniter and frontend by AnuglarJS.
As of now, I have an idea that we can use Angular JS $http service to get data from Codeigniter. But I am confused how to treat views.
For example:
My default controller is 'Login'. I created a login.php file in controllers folder and render the view of login form in index method. Now if I go with only CodeIgniter flow, I will simply place the form action to the doLogin() method of login controller and form there I will redirect user to his dashboard.
How can we achieve this in AngularJS so that when a user fill the form and hit login button, the page does not get refreshed and the dashboard appears?
check this GitHub project CodeIgniter AngularJS App. Another interesting answer is: Combining Angularjs and CodeIgniter. I hope I have helped...
Try using this seed, https://github.com/rmcdaniel/angular-codeigniter-seed come with JWT auth (no dealing with cookies)
Or you can create 2 different project. Angularjs & Codeigniter backend. Make Codeigniter backend work as RESTFul Server.
Now you can put CI backend project folder inside Angular Project folder or you can separate them.
In case of separate project folder, if CI backend fail to handle get/post due to "Cross-Origin Request Blocked", you can allow it from php/.htaccess file.
2 folder structure are like below.(according to xampp folder)
Nested folder structure
xampp/htdocs/my_ng_project/ (Angular project)
xampp/htdocs/my_ng_project/backend/ (CI project)
Separate folder structure
xampp/htdocs/my_ng_project/ (Angular project)
xampp/htdocs/backend/ (CI project)
I was thinking in doing a full SPA application with AngularJS that would download all the views code on the initial request and then just communicate with the server through AJAX requests.
The big advantage is that it would look like the application is running locally.
The disadvantage is that maybe on the initial request the application would take maybe 2 minutes to load because it would make about 40 page requests to the server.
Isn't there a way to download all the application views in a single request like using some kind of ASP.Net MVC bundles?
I did something similar. I'm using Asp.net MVC & WebApi with AngularJS.
My first request is to an MVC Action -> It returns a kind of master page(including bundles).
When the page gets down to the client, AngularJS kicks in and gets in charge.
Now my template views are also rendered via the Razor view engine(since I needed a special in house engine to locate my relevat templates) - I can use bundles and other .net stuff inside instead of fetching plain html.
Now using templates this way can be BAD.
I put red lines about what I want the Razor view engine to do in the process. It's easy to misuse AngularJS when you use Razor views\templates in your project.
you could use the $templateCache service to download multiple views at once. In the run phase you define them all (of some of them).
var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
$templateCache.put('template1.html', 'This is the content of the template 1');
$templateCache.put('template2.html', 'This is the content of the template 2');
$templateCache.put('template3.html', 'This is the content of the template 3');
});
I recently started to digg in to angularjs, and would help me a lot with my new project, but im stucked with the view structure part.
So what i dont really understand is, how to build it up.
Is it okay if i create html angular partials and not creating laravel views, so laravel would only handle the database instert fecth edit delete, and the angular partial views would handle the result show, and forms.
So my buold up would look like this.
My assets folder
/css
/img
/js
/lib
/partials
/home
index.html
/users
users.html
details.html
And creating restful controllers for them what handlets listed above
Or if someone could show my a basic exaple about this, just the controller and view part, how to build up a singple page with showing result, and one with grabing by id i would really be grateful.
Thank you
When starting a Laravel & AngularJS project you are in charge of the backend and frontend. Basically you have 3 options.
Keep the entire app in the same folder, and the angularjs stuff in the public folder.
Keep the entire app in the same folder and AngularJS views in the laravel view folder.
Separate your backend and frontend completely.
The first & second option are the simplest, and its OK if you have a small/medium sized application. In this case just keep all the AngularJS files in the public folder, or if you choose to mix them with laravel views just drop the .blade extension (or change the laravel blade/angularjs template syntax)
I see its best to keep the backend as restful as possible when doing a SPA app, the point is to push the logic to the browser, this means your app can become a mess if you mix php with js too much.
The folder structure is totally up to you, and it does not matter what option you choose. But a good start is separating you app into a logical parts.
/app
application.js
/partials
user.html
login.html
etc.html
/vendor
Angular.js
Lodash.js
Etc.js
/controllers
User.js
Etc.js
/directives
Charts.js
Etc.js
/filters
Custom.js
Etc.js
/services
Backend.js
Etc.js
You can also check this for a good angularjs styleguide.
The above is a basic folder structure, just customize it as you see best. If you have a small app, you could drop the folders and just have a controllers.js directives.js and services.js (etc)and keep all your javascript in the same file. This is totally up to you. Separate when the application grows, and always refactor.
If you choose the third option you will have to customize the backend a bit. This might be the hardest option, but it also gives you great flexibility. Basically you could drop laravel all together, and build the backend in node.js, or use laravel as a backend for another SPA app written in Ember.js without making any changes in the code. Note if you are choosing this option you cannot make use of some laravel stuff, like the blade templating. You will also have to setup your laravel app for CORS, and note, there can be some more coding when it comes to security, like CSRF tokens and such.
When going to production with you app you can use a build tool to min & concat you frontend app into one file. Checkout ng-min for minification.
This is one of the project I am working on. You can see the way how I have partial views in angular js. As suggested above, there is no need putting your view files in public folder.
https://github.com/naveensky/wm-demo-tracker