I have created a navbar and, as far as I can realise, I have to create a component for each page and subpage. And if you have a lot of navigation options with sub-navigational options for each, like shown in the picture, then it seems redundant to create a lot of components.
https://imgur.com/a/9uTLbhu
Is it really necessary to create 20+ components? What is normal Angular structure and how do you handle?
Yes, it is a common and good practice to create component for each page.
In case you serve content depending on a parameter (in your case it looks like an url parameter), you can configure route to take in a parameter:
{ path: 'article/:articleId', component: ArticleComponent }
then, in the component do:
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.params.subscribe((params) => {
// get your article with id params[articleId]
});
}
this will help you with parametrized routes.
You can use this to create page 'Portfolio', each subpage will then redirect to the same component with different parameters (Webdesign, Graphic design, etc.)
Related
Hi guys I am trying to click a button in my Vue.js page to a different .html page that exist in my public folder.
So I am using this way
<button #click="window.location='public/test.html'">See Results</button>
However I get an error that says
"Property or method "window" is not defined on the instance but referenced during render"
How do i navigate to a different page in Vue.js?
I would recommend using vue-router if you're doing the spa approach. It will prevent your page from refreshing when you go to a different page and it will be much faster. But if you don't want to do that you could just use an anchor tag to handle the navigation for you.
<a href="/test.html">
<button>See Results</button>
</a>
You can try to call a method #click="navigateToTestHtml" and put your code in it
methods: {
navigateToTestHtml() {
window.location='public/test.html'
}
}
However, as Vue is a Single Page Application I think it would be better to create another page and add routing for it. Vue Routing Docs
You can't write 'window' into button tag, because window is not defined.I suggest that can write into 'methods',eg:
methods: {
goToHtml() {
window.location = 'public/test.html';
}
}
But, if you use vue.js, I recommend you use vue-router. One page navigate to another page, eg:
methods: {
goToPage() {
this.$router.push('/another/page');
}
}
vue-router navigation usage
I'd like to create an app made of completely dynamic pages configured by JSON.
I chose ngx-formly for creating dynamic forms, it works nicely, but I could not figure out how to make a step forward and create the screens dynamically, while being able to add dynamic templates and pass form configuration to it. Is it possible? I appreciate every help, advice or code samples.
Goals:
Build an app completely from JSON configuration. AppComponent gets the JSON config on init, builds screen components with given component type, template and data, adds them to router config, and displays Home page.
NOT losing AOT
Simplified config:
import BaseFormScreen, FormScreenLayoutComponent, BaseScreen, HomeScreenLayoutComponent from '';
export const screens: [
{'title','Form1', 'path':'/form1', 'type':BaseFormScreen, 'template':FormScreenLayoutComponent, 'formdata':{...}},
{'title','Form2', 'path':'/form2', 'type':BaseFormScreen, 'template':FormScreenLayoutComponent, 'formdata':{...}},
{'title','Form3', 'path':'/form3', 'type':BaseFormScreen, 'template':FormScreenLayoutComponent2, 'formdata':{...}},
{'title','Home', 'path':'', 'type':BaseScreen, 'template':HomeScreenLayoutComponent},
]
[BaseScreen] provides base logic and data to its template, i.e. title, logging, services (smart comp, no template)
[BaseFormScreen] extends BaseScreen, builds a dynamic form from input json, and adds submit functionality
[HomeScreenLayoutComponent] template-only component would render navigation buttons on the page, one for each screen,
[FormScreenLayoutComponent] template-only component renders a title, a dynamic form, a submit button, and adds a 'home' button
On my MVC project I have to incorporate 40 static pages.
I want these pages to use the Layout page.
What is the best way to do that?
I know this question was asked before but I didn't find any good answer.
Any advise?
I don't relly know ASP, but I try to give a generic answer.
So I think if you have a lot of similar static pages, somehow you could make a controller action that handles all these pages. For example the action gets the name of the page as a path variable in the URL, and return the view according to that.
But if that is not possible in the language you are using, you can just make simple separate actions for these pages. Maybe you could group the related ones into the same controller, so you would have a few controllers that handle these pages, and they are not stuffed in one controller.
Basically the solution is very simple, you have to create views for you static HTML (cshtml), then you should add a Route to your Route.Config like this:
routes.MapRoute(
"OrdeForm",
"OrderForm/{file}",
new { controller = "MyController", action = "Page", file} = "" }
);
Where "File" is a dynamic parameter that gets the View name from the URL and renders the right View.
The global controller should be something like this:
public class OrderFormController : Controller
{
public ActionResult Index(string file)
{
return View(file);
}
}
That works perfectly!
Thank you #Erik Philips for the excellant answer!
I'm working with restangular ngroute and playframework and I'm trying to do my CRUD following this tutorial : http://plnkr.co/edit/d6yDka?p=info
the list.html and detail.html in the index page (in the tutorial), I have them all in customer.scala.html page which call the main page by using this : #main("MyApp") So all my controllers and models are defined in this main page.
So how can I do the routing, the way that when I click on a button I can call the link (localhost:9000/custd) definded here in my js page:
app.config(function($routeProvider, RestangularProvider) {
$routeProvider.
when('/custd', {
controller:ListCtrl,
templateUrl:'list.html'
}).
UPDATE:
this is the link in customer.scala.html
<li>Customers</li>
in the file Application.scala I have this:
def custDetail = Action {
Ok(views.html.custDetail("Your new application is ready."))
}
in routes I have this:
GET / controllers.Application.index
GET /custdetail controllers.Application.custDetail
so how can I link this : /custd (in the angular controller) with my html page
So I think you're jumping in at the deep end a bit here. If you don't understand how to make a simple play web app, and you don't understand how to make a simple angular app then it might not be the best idea trying to integrate both straight away (I tried the same thing when I was new to this and it was complicated!).
Why have you chosen Angular for this given job? If you are not planning to create a single page application (which it sounds like you're not), then just using play templating should be sufficient for your needs (ands there's lots of docs available!).
If you are adamant on using the two, angular routing is geared towards angular applications. Looking at the routing you've provided:
app.config(function($routeProvider, RestangularProvider) {
$routeProvider.
when('/custd', {
controller:ListCtrl,
templateUrl:'list.html'
}).
In this you have provided a controller and a template. These are in reference to Angular controllers html templates, not Play. If you're not sure on how Angular controllers work, Angular has great documentation:
https://docs.angularjs.org
You need to work out exactly what information you need from the server side, create an endpoint to serve that data to your Angular app (using AJAX calls). I know this is a high level answer but really integrating the two is quite complex and hard to summarise in a single reply. My advice would be focus on creating an Angular OR Play app, then once you have the basics down move to integrating the two, but be clear as to the reasons behind chosing your technology as it sounds like you may not be
I have been researching dynamic content for MVC views and partial views but have not successfully found an architecture to fit my needs.
Basically I am required to create a landing page based on parameters pass by the URL.
For basics
http://mydns.com/myconroller/myview/?landingpage=Param1
The controller will need to find the HTML that will be used to create the view.
The view is going to be different based on the landing page.
(for the sake of the question, I am using landingpage as an example)
My goal is to be able to deploy a Landing page and based on the URL use that HTML Landing page in the view based on the landingpage parameter that is passed.
There are other views that are working currently in the controller. I am trying to add functionality to be able to add a new one time page without having to recompile.
I have searched through various ideas on how to load dynamic views but cannot seem to find a solution that fits this need based on what I have read.
I can possibly RedirectToAction but I am still in the dark on where to deploy and I am getting several problems with Razor as it is not in the shared directory and then I am stuck with deployment issues as I want to organize the landing pages differently than I am organizing the views.
Solution:
I decided to take a different approach and use the ContentResult Action in the controller. I still have the Main View and I use the HTML extensions to render the HTML pages that I have deployed in my customer's directory.
#{
Html.RenderAction("LandingPageContent", "Controller", Model);
}
Then in the controller I load the HTML directly and return the ContentResult
public ContentResult LandingPageContent(object model, FormCollection collection)
{
MySRCHelper helper = new MySRCHelper();
ContentVariables variables = helper.getContentSRC(model.EntryCode);
model.ContentSRC = variables.LandingPageSRC;
return Content(System.IO.File.ReadAllText(Server.MapPath(model.ContentSRC)));
}
I can then configure the path to the raw HTML file to be used and it will be loaded into the View. The View can then house all of the paths to load jQuery, CSS and other necessary javascript to integrate with the raw HTML and allow me to deploy the HTML files into any directory structure that I want. The configuration XML file allows me to find XML elements and use those values for any HTML that I am looking for, like a welcome and thank you page. The helper object will open the XML and find the configuration based on the parameters passed to the View.
<ContentLandingItem entrycode="1" customerID="Cutomer1">
<ContentLandingPageSRC>~/Customers/Customer1/Customer1Landing.htm</ContentLandingPageSRC>
<ContentThankyouSRC>~/Content/Default/GenericThankyou.htm</ContentThankyouSRC>
</ContentLandingItem>
<ContentLandingItem entrycode="2" customerID="Cutomer2">
<ContentLandingPageSRC>~/Customers/Customer2/Customer2Landing.htm</ContentLandingPageSRC>
<ContentThankyouSRC>~/Customers/Customer2/Customer2Thankyou.htm</ContentThankyouSRC>
</ContentLandingItem>
The view still performs its duties and works independently on it own letting the raw HTML decorate the View. The model is still intact and can be used as I wish. The FormCollection is there in case a form submit posts the values to the view and provides some things that I omitted from this question as it did not pertain to this subject.
I don't want to answer my own question and I found the pieces that helped me on another site, so I am putting what I did here in case anyone needs this functionality.
This sounds like using the you can inherit from the virtual path provider view engine and decide based on the URL parameters (or other) which view to return. Some example that you can adjust to your needs:
public class CustomViewEngine : VirtualPathProviderViewEngine
{
public MyViewEngine()
{
this.ViewLocationFormats = new string[] { "~/Views/{1}/{2}.mytheme ", "~/Views/Shared/{2}.mytheme" };
this.PartialViewLocationFormats = new string[] { "~/Views/{1}/{2}.mytheme ", "~/Views/Shared/{2}. mytheme " };
}
protected override IView CreatePartialView(ControllerContext controllerContext, string partialPath)
{
var physicalpath = controllerContext.HttpContext.Server.MapPath(partialPath);
return new RazorView(controllerContext, physicalpath);
}
protected override IView CreateView(ControllerContext controllerContext, string viewPath, string masterPath)
{
var physicalpath = controllerContext.HttpContext.Server.MapPath(viewPath);
return new RazorView(controllerContext, physicalpath);
}
}
In there you can return a RazorView or WebFormView and set your desired path for the view to use.