Angular 2 Module / Application Structure - css

I'm just evaluating how to use Angular 2 for some web applications that sharing some services and components. As far as I understand I can create component libraries to share components. Each component may have it's own css which only effects the component. What is the best approach to share services?
I'm currently using Angular 1 and the bootstrap components. One requirement is, that our application should offer the possibility to create custom skins for it. The application on itself should work in every website by adding a java script snippet. This is a big different to other SPA that are just made to run in one specific website. Currently we offer a bootstrap less variables file which can be customized an uploaded to create via less a new skin. The advantage of this is, that nearly every web designer knows how bootstrap works. But this also means that the css is defined global and not inside the components. What is the best approach to offer people customize css in angular 2 in a very easy way?
In our case it might be needed that two applications interact with each other. In example imagine you have a hotel booking application and a flight booking application. After a user books a flight you may like to offer also the hotel booking application within the same page. Both applications may share the components like a date range selection form or a result page.Is it correct to talk about different applications or would I only create two modules (hotel + flight)? What about lazy load to load only that part that is needed for the current application to reduce the initial loading time on bigger projects?
Any ideas what would be the best structure for that kind of projects?

The way I can picture it is .
Application with two main routes
/Flights
|--Holds other routes for the Flights part of the application
|i.e.
/Flights/flights
/Flights/seating
/Flights/payment
/Hotels
|--Holds other routes for the Hotels part of the application
|i.e.
/Hotels/booking
/Hotels/payment
So it'll be one application with two main routes that nest routes for their specific needs.

Related

Angular5 app conditionally load script and styling according to component

My angular application consist of 2 parts based on public and private pages:
1- Landing Page (Before Login)
2- Dashbaord and other Pages (For Authorized User)
Landing page component contain signup/login functionality and some other static html elements.
Both are seprate components and have different stylings. I have already mentioned landing page's styling in it's own style file.
After login user can access multiple pages including dashboard,users pages etc, and they share common stylings, they also have common components like header,sidebar etc, since they all share same styling, i will have to mention it in app component so that it inherit all stylings automatically.
How can i seprate rest of the page stylings with landing page ?
What will be the bets approch to handle this situation?
PS: I was also thinking about creating seprate applications under same project, is this method relevant handling multiple applications with angular cli
?
Yes, having multiple applications makes sense for your case. However, I would recommend keeping login pages free from any framework. We are developing something similar at work. We have login pages with plain html and css. When user logged in successfully, s/he can access angular application. Angular is great and we all love it but it comes with bunch of dependencies you are not aware of. Keeping pages, related to security, free of any framework is better in my opinion. It would mean you have to duplicate stylings for header, footer etc. but it would worth it.
Take a look at this article that is published recently. It lays out a great security risk if you don't know what you are shiping to your users.
P.S: Dependencies of angular are probably OK, however you cannot assume things are safe when it comes to security.

What's exactly the purpose of Components, Layouts and Pages folders in a Meteor-React project?

I'm starting a new project with Meteor and I would like to use the --full architecture when creating the project: meteor create myApp --full
However, I don't really understand the purpose and differences of some folders in imports/ui/ :
components
layouts
pages
Especially the difference between layouts and pages. What type of code should they contain ?
It actually becomes clear as soon as you try to master React. However, its also very valuable to understand it in regards to Blaze.
Components
These are react components or blaze templates that are self-contained. This means that they are not bounded to anything else in the application. Meteor describes 2 types of components: Reusable and Smart. Reusable components are generic, reusable and don't contain any business logic. They receive their data via parent components.
Smart components typically don't contain too much UI related logics, but simply act as a layer between the data and the reusable components. These smart components contain business logic and push data to reusable components.
Layouts
Literally just layouts. The structure of your app's user interface is a layout. It should not contain any logics. Layouts contain mostly references to react smart components that in their turn load reusable components.
Pages
Same as layouts, but on a page level. Each page contains a layout and references components.
A better explanation can be found here:
https://guide.meteor.com/ui-ux.html

Is it worthy to learn Angular 2, when i know Symfony 3?

I know Symfony 3. In my opinion it is great organized framework. I am interested in connecting it with Angular 2, but have some doubts.
I start learning Angular 2 because I can see these advantages:
Using Angular 2 + Ionic 2 I can create mobile app.
Using single page concept I can maintain connection with web-sockets.
Changing state of application i can modify view in real time.
But there are also problems, if I want to write back-end in Symfony 3 and fornt-end in Angular 2:
I have code repetition (definition of classes, and these methods).
I have problem with SEO connected with fact, that Angular is unfriendly for scrapers.
I twice time type tests, routing, forms...
Of course I obtain bonus because:
Back-end and front-end completely disconnected.
Existing of API is forced in this approach.
But typing almost all app two times is high cost. Is there any manner to obtain advantages of single page application in Symfony 3, without Angular 2, or Is worthy to use Angular 2 although of mentioned disadvantages?
You need to make the following decision before jumping to choosing technologies and tools.
Server Side Rendering: Does your App (current and future) and other conditions make a case for HTML fully constructed on the server side - Symphony
Vs.
Client Side Rendering : If App calls for HTML being rendered Client side - AngularJS
Collect all the facts about the application and future where it might lead to and apply those pros and cons of the above two that you can research (Google/stackoverflow). And it will lead to your answers.
As a side note a lot more goes into than just the runtime dymanics of the App like maintainability, debug ability etc. You can find questions already answers to those - if not you can post it as a separate questions as well.
I don't understand why you worry about it.
If you see advantages in Angular2 (ionic framework + mobile app), then go for it !
Ang again, if you worry about the SEO, you should make two fronts : one in plain old HTML for the web version, and another with Angular for the mobile app.

Solution organization with a primary configuration/index project

I have a series of .NET MVC 5 projects I'll be creating that will be used by different departments in my organization with a central index. I'd like to set up a project that contains the css, scripts, images, layouts, error pages, and eventually forms authentication logic/pages. I would then want sub-projects that inherit all of those things so that I don't have to duplicate them for each.
As far as the url structure goes, I'd want to get to the index like this:
www.companyname.com/AppCentral
And to get to one of the sub-projects (TimeKeeping):
www.companyname.com/AppCentral/TimeKeeping/Home
I currently have one project with all of the Controllers/Views/etc for each sub-project lumped in with one another, which can be cluttered. How can I structure my solution so that one project governs css, scripts, images, layouts, error pages, and authentication for sub-projects, so that I may have better separation between projects without having to repeat code/config?
Those structures may have separate solutions, so I numbered them for easier reference. My apologies if this question has been asked a lot, or is often found in references. I was unsure how to find a concept like this using a search engine.
I suppose you searching for areas that appeared in MVC 5.
If you use them you still have all your base logic and styles in the same project but can customize Views, Controller logic and ViewModels.

ASP.NET MVC application level soft coded settings

I am working on a ASP.NET MVC 2.0 Multi-Presentation web application which would use a common codebase to support different websites. These websites would differ in following aspects:
Each website will have their own headers, footers, images, CSS etc (I guess website specific Master Pages)
Some of the UI elements could be different based on soft-coded settings at website level
What is the best approach to handle these requirements? Should I be storing these website level soft-coded settings in Database or multiple config files? I might have to provide a admin UI to manage these soft-coded settings. How do I access these settings in different layers (MVC, Services, Repositories etc) of my application?
I need suggestions from experts.
Regards,
Alex.
Develop some sort of Presentation Object Model (or possibly Aggregate if you're DDD inclined) and then persist that to the db. It could be per-user or per-site (if it's a multi-tenanted app you're building) and with MVC it would be easy to build Html Helpers that accept these Presentation Model Objects and render out your customized header, css, images etc.
Potential long-shot practical example:
Let's say your 'tenant' is called a Site - you'll prob have a Site object in your model. A property of Site could be a WebPresentation object. WebPresentation may have a series of child objects and lists with methods for reading css, css files (for <link> elements in the document head), images, etc. You may also have a Service or set of Service functions for persisting/validating the WebPresentation objects (or you may try to have this functionality come off the objects themselves- think .Save()). I won't go into how you persist this data to the db (don't want to insult you). As for the Views, you would design them (perhaps Partial Views) such that the custom WebPresentation Html helpers render the customizations out into the views or <head> sections of your MasterPages.
I hope this example is useful.

Resources