text: Include Angular file in layout.cshtml
  I want to include my angular file(Layout.js) inside my _Layout.cshtml. So I added it at the end of the page like this:-
  @section Scripts{ <script src="~/Angular_Files/Layout.js"></script> }
  This does work but only for the index page. Whenever I click on another link say course.cshtml, my angular file(Layout.js) doesn't get included.
  PS: I tried to explain the best I can. Feel free if you need any more clarification.
  See also questions close to this topic
  - Angular with Razor views & .NET MVC5
  I've been trying to make PathLocation(i.e without ' # ' in the URL) routing angular work with razor views in .NET MVC and have had no luck so far.
  AppComponent
  // app component import { Component} from '@angular/core' @Component({ moduleId: module.id, selector: 'app-root', templateUrl: '/Harness2.0/Main/app',// -> MVC controller styleUrls: ['app.component.css'] })
  AppHeader TS
  // app-header.ts import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'app-header-demo', templateUrl: '/Harness2.0/Component/AppHeader', })
  Angular Routing Module:
  const appRoutes: Routes = [ { path: 'appheader-test', component: AppHeaderTestComponent }, { path: '', redirectTo: '/', pathMatch: 'full' }, ];
  Index.cshtml
  @{ ViewBag. <title>@ViewBag.Title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Load styles --> @Styles.Render("~/Content/css") @Styles.Render("~/Content/material") <!-- Load libraries & Configure SystemJS --> @Scripts.Render("~/scripts/ng") <script> System.import('src').catch(function (err) { console.error(err); }); </script> </head> <body> <app-root>Loading app-root...</app-root> </body> </html>
  RouteConfig.cs
  routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional, } ); routes.MapRoute( name: "NotFound", url: "{*catchall}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } );
  HomeController.cs
  public class HomeController : Controller { public ActionResult Index() { return View(); } }
  MainController.cs
  public class MainController : Controller { public ActionResult App() { return View(); } }
  ComponentsController.cs
  public class ComponentController : Controller { public ActionResult AppHeader() { return View(); } }
  When the application fist loads the URL is the MVC rotuer defaults to HomeController & Index.cshtml is loaded where
  <app-root>is present.When I navigate to components view is loaded & on browser refresh(F5) I get Not found 404 which makes sense as the entire URL goes over to the server & there's no Controller action associated with that particular URL.
  One solution I tried was IIS URL Rewrite
  <rewrite> <rules> <rule name="Rewrite URL" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="./" /> </rule> </rules> </rewrite>
  This renders the Index on refresh but instead of bootstrapping the AppModule it directly enters the
  app.component.tswhere I have some console logs in the constructor which run infinitely until call stack size exceeds.
  Any help in this would be much appreciated.
  P.S:
  I have tried the hash location strategy by using useHash property in RouterModule & everything works fine with it. But I've to make it work with PathLocation which I haven't been able to so far.Also I'm not using .NET Core.
  Other related links:
  -****
  - angular libraries and git workflow
  I'm developing angular libraries with a tool called ng-packagr
  When building a library you may have multiple projects using this library. What would be the git workflow used when you develop such libraries with ng-packagr or any library ?
  For example you have a lib-1.0.0 developed with agular 4.x. This lib-1.0.0 is used by clients cl_1 and cl_2.
  Now what happens when you want the same library to work with angular 5. Then I suposse your new library will be called lib-2.0.0 developed with angular 5.x giving the same functionality for clients that also use angular 5. This lib-2.0.0 is used by clients cl_3 and cl_4.
  Now my question is: What would be the best way to structure a git repository and what would be its workflow for a library like the ones like lib-1.0.0 and lib-2.0.0 ?
  should lib-1.0.0 and lib-2.0.0 be in the same git repo.
  master ----------------------------------------- \ branch 1 lib-1.0.0 (angular4.x)------------------------ \ branch 2 lib-2.0.0 (angular5.x)
  Here I have one repo and two branches. branch 1 will be for the library that uses angular 4.x and branch 2 will be for the library that uses angualr 5.x
  Both libraries do the same functionality and the only difference should be the version of angular If a bug appears in lib-1.0.0 how should it be handled ? Should it be solved in lib-1.0.0 and then ported to lib-2.0.0 ? We can never merge both branches to master because one is for angular 4.x and the other for angular 5.x.
  This article is explaining a workflow for applications using git called git flow. Here is the link. Basically the questions boil to how to incorporate those ideas to the libraries taken into account my prior questions ? How do the angular guys deal with the angular itself and how do they handle versions ?
  If you ahve thoughts about it please share them. I think they would be very interesting. thanks
  Or should we have two different repos for the same library ?
  - How to show circle on Google Maps?
  I know that this question is asked frequently, but I have a problem to show circles on my Google Map.
  Actually, I get markers on my maps.
  import htmlTemplate from './activityDetails.html'; export default { template: htmlTemplate, require: { parent: '^main' }, bindings: { activity: '<' }, controller: function controller(MapsService, GeolocationService, NgMap, $log) { 'ngInject'; this.$onInit = () => { // Load Google Maps API script MapsService.loadGoogleApi().then(() => { this.loaded = true; NgMap.getMap().then((map) => { this.map = map; $log.info('activityDetails component init'); this.activity.lat = this.activity.location.coordinates[0]; this.activity.lng = this.activity.location.coordinates[1]; // Save each marker in its user object to facilitate hover this.createMarkers(); // Set geolocation notification hook this.setGeolocationHook(); }); }); }; } };
  <div class="block-map col m6"> <ng-map <marker position="{{$ctrl.activity.lat}}, {{$ctrl.activity.lng}}"></marker> </ng-map> </div>
  My question is: How to replace my markers by circles?
  Thanks a lot !
  - } ] } ] } ] }
  - Asp.net MVC - post value from select2 in for loop of razor view
  I have a List view like this:
  @model List<ABC.Models.InfoDetails>
  I use a for loop to display the values in a table in order to be able to edit each row and use a submit button (at the bottom of the table) to post the data back to the controller.
  @using (Html.BeginForm("UpdateUsers", "User")) { <table ... <tbody> @for (var i = 0; i < Model.Count(); i++) { ... }
  The values are posted back like this:
  [0].Title [1].Title
  etc.
  This is fine and I get the correct values in the controller.
  The only problem I have is posting the selected value from a select2 dropdown element of each row.
  <select class="js-select2 form-control" name="user" id="select2-user">
  The name value ("user") is posted to the controller instead of the name
  [0].User
  My Javascript:
  var users = [ { id: '0', text: 'Please choose...' }, { id: '1', text: 'Paul' } ]; $("[name='user']").select2({ placeholder: "Select a user", data: users });
  Is there any way to put the value to the according index of each user property?
  I hope you can help me.
  Thank you.
  - using ASP.NET MVC C# and the bootstrap datepicker won't function
  This is the CSHTML code.. when placing the same code with scripts in normal html document it opens/functions, however when using the cshtml in asp.net mvc c# gives errors in the browser indicating $()not a function. (Bootstrap datepicker '#birthdate' won't fuction).... Any suggestions
  <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http- <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="~/Scripts/bootstrap.css" rel="stylesheet" /> <!--<link href="~/Scripts/bootstrap.min.css" rel="stylesheet" />--> <link href="~/Scripts/daterangepicker.css" rel="stylesheet" /> <!-- jQuery --> <script src="~/Scripts/jquery.min.js"></script> <script src="~/Scripts/daterangepicker.js"></script> <script src="~/Scripts/moment.min.js"></script> <!---<script src="~/Scripts/bootstrap.min.js"></script>--> <script src="~/Scripts/bootstrap.js"></script> <script src="~/Scripts/bootstrap-datepicker.min.js"></script> <link href="~/Scripts/bootstrap-datepicker3.standalone.css" rel="stylesheet"/> <script type="text/javascript"> $(document).ready(function () { $("#birthdate").datepicker({ autoclose: true, format: 'yyyy-mm-dd', todayHighlight: true, clearBtn: true, orientation: 'bottom' }); }); </script> </head> <body> <div class="form-group"> <label for="usr">Birthdate:</label> <div class='input-group date' id='birthdate'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </body> </html>
  -?