We Keep Coding

How can I link an angular .ts file to an already created html page?

I am working on a website and I am completely done with the html pages but I need to use angular in order to complete the website.
I have only ever used angular while working on ionic apps and I’m aware that the CLI generates the html, ts and css pages but I was wondering if it’s possible to link the html pages I’ve already created to the ts file?

There is no "right" answer to this question, but there are two ways to go about this.
Break down the HTML into components
Honestly, this is the preferred way. Break down your page into reuseable components and compose them like you would do in an ionic app.
Enhance the existing HTML
You could put your HTML into your index.html, or better, your app.component.html, and only extract components where you need to make your html dynamic. This is not really the angular way though and will be difficult to maintain on the long run - but technically, this works.

Moving between views without refreshing/reloading

I'm currently looking at putting together a website with ASP.NET MVC that gives the viewer the ability to move around from page to page (view to view) without it being refreshed each time.
The way I'm currently thinking of doing it treating views as 'areas' (or mini master pages) and using partial views in the place of views. I'll then switch the partial views in and out as needed using AJAX calls to the controller (which will load the partial view) and JavaScript.
I feel like I could have explained this better but I'm not quite sure how to phrase it, so hopefully this diagram will help somewhat:
Here's a look at my current folder structure. Index.vbhtml is acting as the aformentioned 'area'.
Views/
Accounts/
Partials/
ViewAccount.vbhtml
CreateAccount.vbhtml
Index.vbhtml
I'm loading my partials views in using a JS function along the lines of: nav.navigateToView("Action", "Controller")
For example: nav.navigateToView("ViewAccount", "Accounts" will load the ViewAccount.vbhtml partial view onto my page.
What I'd like to know is: Is there currently a defined method for doing this, or perhaps a library I can use to aid me? If not, could you give some helpful advice on how to achieve this? I'm not convinced the method I've described will be adequate.
Apologies if this question has already been asked! I've had a tough time trying to find anything relevant on this topic. Am I missing something simple?
Thanks,Aaron.

From the description you have provided, I think what you are describing is a single page application (SPA). Needless to say, there is a bunch of articles available so sorry for not being more specific.
One approach would be to use Angular.js which is a Javascript framework, described here and here (and thousands of other sites).

ASP.NET Single Page Application (SPA) helps you build applications that include significant client-side interactions using HTML 5, CSS 3 and JavaScript. It’s now easier than ever before to getting started writing highly interactive web applications.
Please see this site.

How to get full html from SPA by ajax?

I'm trying to get full html generated by SPA done in AngularJS.
$.get('http://localhost:3388/' + d.response.path, function (d) {
$('#templateContainer').html(d);
});
But it's retuning only the basic html structure, not the dynamic html which in SPA is generated by AJAX (I'm wondering if this is why SPA are not good for SEO).
I believe might exist some technique/trick to solve this problem. Chrome for example when you inspect elements it's able to render all html from AJAX.
Maybe I'm not using the right keywords on google. What people has been doing to workaround this problem?
UPDATE:
Just to be clear about my case. I'm trying to get the full html from this SPA to display to the user a template preview.
I have many different SPA with different templates. I want to display these live templates by AJAX instead IFRAME. With IFRAME works but isn't great.

You can generate a full page in a SPA, but that's not the goal you should not use a SPA in that case.
Because the goal of a SPA is to get only some pieces of the page and load them when necessary you should try a middleware if you care about SEO crawlers like prerender.io you can create you own server with it or use their services its open source.
but generating a full page in SPA is killing all the reasons why you should use a SPA. Best Regards :)

You'll get the raw html because the server doesn't render your app and this is the expected behaviour, there is no bug.
S.P.A are usually ClientSide applications, it means that the browser have to render at rountime the AngularApp!
Of course the browser no renders anything because your code is async-injected into the dom, so, you need to program the AngularJS bootstrapping manually not through the ng-app directive.
by the way, there are many ways to have a server-side rendering of your app, have a look on https://prerender.io/...
If your goal is have a good indexing... loading the app via jQuery is a bad solution because search-engine-crawlers aren't able to process javascript, this is not a angular specific issue, each app built in javascript has this problem.
The best solution should be have a full angular-app and, only for crawlers, implement a server-side prerendering (using prerender.io).
Hope helps!

Styling and Connecting the Backbone to a Ruby Server

So I've been doing a lot of learning on Backbone, Sass, RoR, Bootstrap, etc. and I am extremely frustrated that no sources I've found (including in Tuts+ and Code School) mention any way of putting it all together...I have no clue how to style a web page if all of the contents I want in the page are being built through backbone...so if I want to click on the "About" page on a website, have all that page's Backbone contents styled correctly when appended to the DOM.
Secondly, I'm not sure how I should be creating these web pages for a website; should I be creating the whole page in Backbone and then keep that on the server until someone clicks on, for example, that "About" page and then have the whole page loaded into the view? Or am I totally misunderstanding one of the ways you can use Backbone? Along with this then, how am I supposed to communicate Backbone to a Ruby Server? just using Ajax?
I'm looking for sources and anyone who can help me understand this stuff in clear terms!
Thanks so much,
-Stu.

Presuming that you want to build a single page app it is important to understand each one responsibilities:
Rails
Create a full stack application that runs on server
Create a consumable API
Manage assets pipeline
...
Backbone
To manage your frontend javascript application
Decouple data from the views using Models
Connect an API over a RESTful JSON interface
...
Keep in mind this is a oversimplification of both...
Rails will handle the backend, retrieving an API to be consumed by Backbone. The Rails assets pipeline will deliver all files that Backbone needs, including the css that will style you app.
It might be somehow confusing since you will hear concepts that eventually will clash between them, like in both ends will have Models, Views and Router, but they will live live independently from each other, one will work on the server-side (Rails) and the other on the client-side (Backbone).
To give an example:
Rails would render:
domain
|-index.html
|-js/*.js
|-css/*.css
`-api/*.json
Backbone would use the DOM (index.html) and the js scripts to execute logic, append the views into the DOM and Read/Write data using ajax through the API.
Another confusing thing would be views, since Rails will generate those for you, and backbone will also have their own views, so the usual setup:
In the client-side, Backbone will be have at least the following parts:
Router — it will orchestrate your app, binding an event a route, let's say /#about page and create a view and pass the respective model:
Model — it will request data from the API and dispatch an event when done
View — it will use a template to render the model data
In this case Rails would manage the page assets and provide the API, Backbone would have it own router, models, views and templates to render the page on the client-side.
This also means that the way you combine both it could be only answered regarding the project specificities, and there a lot of ways to use both.
That said, IMHO it's really important to first understand how a full Backbone app works,
then use something like backbone-rails gem, to see how both can be managed in a consistente way.

I know what you mean--there's a lot of random tutorials out there for Backbone but not a lot that put it all together. To a certain extent that's just how it is, unfortunately, but I'd say once you're past learning the basics from Code School and others, the hands down best resource for how to actually build complicated apps is:
BackboneRails: http://www.backbonerails.com/
It covers the stack you're talking about mostly. The first few screencasts are free and then subsequent ones are paid but well worth it. Building on the skills I've learned from BackboneRails and I've built several fairly complicated apps that turned out great. Good luck!

Merging HTML files in a SinglePage application

I'm developing pure JS + HTML application. To keep the code clean I would like to separate my application into the several html files (i.e. ClientView.html, HistoryView.html etc). Based on user actions one or another view (or several views) would be displayed. Each view is supposed to have an underlying code in a separate JS file.
What I really want to achieve is following:
Develop view as HTML page (do not use any kind of javascript templating)
Views and viewmodels are loaded on the fly (only loaded when needed)
Some way to control dependencies.
I would be very thankful if you advice me a good start for that, as I'm quite new to modern html applications development. I myself is from WPF world, and I've been working with MVVM applications for a very long time, probably I'm wrong trying to bring same experience to javascript development.
I've found several posts about "compiling" html - (HTML "compiler" / merging application), but I don't think that it is what I need.
p.s. In my project I'm very dependent from several features from Twitter Bootsrap (first of all from grid systems)

Use a master page which contains some div to make the layout. Use JQuery to dynamically load various pages and insert into the div in the master page as required.