I intend to build a typical information website that has a number of pages that do not require authorization to view them, however I also want to have a private section for staff to log in. For simplicity I am hoping I can do one Web API project and have everything within it to simplify my publishing to azure, simplify domain names and certificates etc.
Is it ok for me to have index.html as a container and use ui-router to navigate through even the public pages or would it be better to have all public pages as full html files and do typical href navigation between them?
Below is the possible structure I was thinking of
app/ -> all angularjs stuff including private views and controllers
Models/
Controllers
Index.html -> public home page
public/ all public pages
What I am trying to achieve is that all public views can be accessed via http but once the login page is accessed all traffic must from then on be https, does anyone have any experience of this?
Update:
I have decided to force https for all pages, does this take the structure worry away in that everything just goes under app?
Best way to keep this is as a full Angular SPA, using ui-router to move between views instead of having static pages (even if your partial views are just plain HTML without functionality). You can affect the UX by alternating between dynamic routing with Angular and typical old href navigation. The less the you make the user reload pages, the better user experience he/she will get, plus you must be consistent in the way the application flows overall so the user doesn't have bad impressions of it.
Related
I am working on an application which uses angularjs 1.6 for the frontend and codeigniter for the backend. Till now the home page in my application had the login form and the logic for that functionality was written in homeCtrl.js. Due to new design changes for the application, the login form is now part of the header. So I am clueless about how to implement the login functionality throughout the application as the header will be a part of all the pages. Can I use the existing code without breaking the functionality as I have a deadline to meet.
Yes, you can implement this logic. Use proper routing.
You can refer to this link.
Make use of UI-Router
This article makes use of ui-router library which you need to include.
In normal scenarios you will be having only simple states and one
state will be assoaciated with one view. But here you can configure
multiple views with your state.
UI Router with Multiple Views
In your case, for the home page header will contain the login form.
And for the other pages it will contain the actual header or whatever
you want. You can configure as many sub screens as you want.
You may get the UI-Router cdn path here
I've angular app with lots of states and modules etc. Now, I want to send a link to the user. When user'll hit this url, I want to redirect him to a new tab rendering only that particular state (specified in URL) i-e I don't want anything else to be visible to the user. Or you can say, I want to open a popup window rendering that particular state's html in popup window . This is the approach that comes to my mind to sort it out.
Ps. There are Rest APIs at the backend which I am calling through angular resource service to bind data with the model of the views
Option
I've rest APIs on backend, So, I was thinking to developing s separate Nodejs application, And I will send nodejs application url to the user and in the default/home route I'll call backend API and, the returned resultset will be rendered in html file within nodeJs application and this way, I'll render the corresponding data to user's browser window.
This is the flow for that
I don't know if that is right or clever approach. Please suggest me what will be the best approach to sort it out.
Thanks in advance.
This is what my app looks like
Everything in the left side-nav is a module and clicking on this I am routing to a different state. I am using angular-material and lots of other dependencies in this project.
And this is what I want.
I'll refer a link to the user for example www.myapp.com/specificpage.html. And hitting this url, a new tab/popup will be opened rendering state defined in the same app but with some non-editable url. And it should like.
There are multiple ways to achieve this and each approach has advantage and disadvantage. You have to choose depending on requirement and architecture. Details are below-
Create a separate app - You can do it through separate code base or use the module based build process and include this module only for new app.
Divide application is two part, public pages and private pages - Include this page and required APIs for this page in the public modules for your app.
Send token in the link - If you want to make secure page, send short lived token in the eMail and validate token on the server before displaying page to the user.
I have recently worked in a pure Scala-Play application and later in a pure AngularJS application. I'm very impressed with both and I'm wondering what is the sweet spot of combining the two frameworks together. Since the two frameworks can be complementary but also overlapping in different areas e.g. MVC and page routing, as far as I know these are some of the possibilities:
Single Page design, use AngularJS MVC-only and use Scala-Play as "dull" service layer backend with no full page refreshes.
Allow page reloads and each page reload becomes a different AngularJS root application. This seems quite flexible e.g. the client side is not bloatted with so much data for larger applications but better partitioned for the different use-cases. The downside is that I'd need different AngularJS MVC applications and I'm not even sure how to organize it as a project. Are there examples of this?
Typical server side Web App, use Play MVC-only and AngularJS for handling UI models for each separate page.
My choice of IDE for these types of architecture would of course be WebStorm but unfortunately I can't have all client-side (AngularJS and JavaScripts) and sever-side (Scala-Play) codes in a single project.
I believe that there is no the ultimate optimal architecture for combining Play and Angular. It depends on the specificity of the project, team etc.
The decision to develop UI part with Angular and the server side back-end with Play is very reasonable. Technically it may be done as following:
Development:
Both parts are developed as detached projects with the preferable IDE.
The client should have some entry point HTML page. It is reasonable to name it index.html, but is may be any other name.
For client-server integration do on the Play side as following:
Select a sub-folder under the play application root, which will serve as the "home" for the client files. The default solution is to use the folder public, since all files under it are automatically deployed.
All client files should be copied under the public folder. The files may be organized in any structure.
Add a route for the default URL as a route to the index.html. The argument path in the route should be the full path of the index.html relatively to the application root.
If index.html is directly in the public folder, the route is like this:
GET /defaultUrl controllers.Assets.at(path="/public", file ="index.html")
Add routing to the client files:
GET /*file controllers.Assets.at(path="/public", file)
Now the distribution package will include all the client files.
Putting of the client files into the public folder should be done automatically, for example by organizing the client directory structure and appropriate configuration of the client IDE.
You can find more examples in this post.
I am developing a web app that has a sign in page for signing in. But also, for example, there is a public page for facebook sharing page.
If a user wants to go into the panel, url is:
http://127.0.0.1:3000/#/shops/:id/
If someone makes a Facebook share, we have a public page like:
http://127.0.0.1:3000/#/public/56af5229d0ae74e324c662f9
My problem is, I have 1 index.html for this app, and it includes css, js links and a ui-view for ui-router. For public page, all those unnecessary files are loaded.
In index page, I have:
<div ng-if="isPublic()" ng-include="'views/public.base.html'"></div>
Also, I cannot control the meta tags of the page.
How you can handle separation of pages in such a case?
I have a site with public/private parts, but I took a different approach in terms of resources. I did not separate them since it would be just to much work, instead I did this:
Minification
Bundling
Pre-compressing
Caching-forever with the hash-string
Putting all the html templates in a js bundle
Yes, this will make all the js/css that is not needed for everyone to load, but you can think of this as a standalone application: you have to download the whole executable/package and install it but you don't use all the functionality (e.g. think of Office). If you optimize all as much as possible, the few additional kilobytes won't do any difference and the data will be already there when the user logs on to private part.
P.S You can see how to do some of the points in here.
I've been reading alot about AngularJS and I just absobutely love the concept behind it and want to get my feet wet. I've read up on several tutorials and eventually downloaded Visual Studio Template SPA and that's where the "fun" stops. The way I see it - using that template seems to go against the grain of creating a SPA - there are very little examples to go on.
By default, the SPA Template installed sets up this like:
app
app_start
Content
Images
Routing
Scripts
Vendor
app.js
controller.js
(the rest you get the idea)
Views
you get the idea.
The question is really bugging me. For example,I want to insert a hockey player and coach page (two separate SPA) to work under the current masterpage content. This is where I'm a bit lost on "separation"
The way I see it, I would have to add a route to app.js and a controller to controller.js for coach and player but I don't like that because I want to separate the player and coach controller code and put it under the player and coach modules like this.
But what I tried to do and fail is:
Module
Player
playerApp.js
playerControl.js
player.cshtml
Coach
coachApp.js
coachControl.js
coach.cshtml
I'm struggling to "hook" them up. I certainly do not want to put the coach controller and the player controller in the control.js file under the scripts folder and the views (player and coach) under the Views folder. It would become too difficult to read and eventually become messy.
Any guidance would be appreciate on what I should be reading on.
thanks,
This is somewhat of an opinionated question and answer, but I want to offer one possible scenario which I have found works well.
Unless you have a compelling need for Razor (i.e. existing user controls), your path of least resistance is to not use ASP.Net MVC at all. Instead, you can leverage ASP.Net WebAPI, which operates similarly to MVC, but provides a REST interface to handle JSON data instead of using Views and Server Routing.
In your Web App, you can simply use a single index.html which can be hooked up with angular, and your individual modules can be separated without needlessly being concerned with multiple "app" pages, how to interact between them, etc.
On the server, you can either run the WebAPI from a different URL, or more commonly, from something like http://yoursite.com/api/. IIS would be configured to redirect anything that is not static files (.css, .js, images, etc.) or api calls back to the single index.html.