We Keep Coding

Is there a way to use a working HTML page as an Angular 5/6 component?

We are undergoing an project in Angular 5/6 where we get prebuilt HTML pages, that use jQuery, gridstack.js and CSS for UI, that we'll implement as components. Assuming it's not possible to rewrite all the jQuery and JS code in Angular, is there any way to run the jQuery code provided in the tag directly in Angular?
I have already tried importing jQuery as:
import $ from 'jQuery';
Here is a sample of the code:
<script type="text/javascript">
$(function () {
$('.grid-stack').gridstack({
width: 12
});
$(".accordion-toggle").click(function () {
$(this).toggleClass("activu");
$(".accordion-toggle").not(this).removeClass("activu");
})
var options = {
float: true
};
$('.grid-stack').gridstack(options);
</script>

It is possible and could be a good intermediate step on a migration path.
I am working on a project right now where we have a JQuery-based app. It has a lot of CSS and HTML code inside the JS code to handle state changes and change content and styling accordingly. It is relatively messy.
We took a number of steps of migrating to Angular, with the first being what you are describing. It definitely already helped gain an overview of the code base and structure the code in a much more maintainable way than it was before.
I took the HTML and broke it down into Angular components. For this step, we just left the JQuery code in the main AppComponent TS file. You can simply use JQuery in Angular TS files with a declare const $: any;.
I broke down the the JQuery code and migrated everything that was template related (e.g. changing parts of the DOM tree based on events/state) into the Angular HTML files.
I took the one large CSS file and moved the CSS rules to the individual components.
I went through the entire remaining JQuery code and piece by piece migrated it to proper Angular code.
It proved to be a viable strategy. We were first considering re-writing the entire project, but like this we always had a running version, could continuously run UI tests against it and piece by piece migrate.
All of that is to say: I would not see a JQuery/Angular mix as a final solution, but it can be a good migration strategy.

You can use jQuery in your angular project. Normally jQuery based DOM manipulation is not the standard way for angular but in some cases we have to jQuery plugins for certain features.
Steps:
Import jQuery script in your index.html
<script src="assets/js/jquery.min.js"></script>
Import your plugin css/js in .angular-cli.json inside styles and scripts arrays
Inside the component where you want to use it , declare jQuery.
declare var $ : any;
Use in directly in your component. If plugin needs to be initialised , you can do it inside ngOnInit

ember vendor js file does not seem to be working

I am trying to work an admin theme into an ember project. There is a custom.js file that has a lot of the javascript for the sidebar, header stuff etc. I have it in the vendor folder vendor/custom.js. I am including it in ember-cli-build as app.import('vendor/custom.js'); When I look in chrome at the vendor.js file I see the contents listed in it, but the javascript on the page does not work.
If I take some of the sections out of the custom.js and put them in the hbs file within tags the do run and work. I'm wondering why just including importing the file doesn't work.
Any thoughts on what could be wrong?
Here is a link to the custom.js file Custom.js Gist

You are trying to include customjs from the admin theme into your app.
Instead of including the custom.js directly, create custom components for each admin-theme component.
In your component you can register you click-event handler and you jquery custom code. There is a old blog post from a core team member acout this.
http://www.programwitherik.com/how-to-initialize-a-jquery-component-with-ember-js/
But i think you need some basic knowledge about how ember is rendering and what a component is compared to a controller + template. You also need to understand what the admintheme js is trying to achieve.

Angular directive to load JS files for the other directives

I'm trying to minimize js/css/html footrpint for the user and to load only the files really needed. I've utilized RequireJS for that.
For my templates I'm trying to implement someting similar to
using section in C# or ///< reference path='...' > in TypeScript
But somehow depending on my template content it does or doesn't instantiate depends-on directive depending on template I have:
Works:
<depends-on path="..\..\test"></depends-on>
<login-form></login-form>
Doesn't work:
<depends-on path="..\..\test"></depends-on>
<login-form></login-form>
<other-directive></other-directive>
Doesn't work:
<div>
<depends-on path="..\..\test"></depends-on>
<login-form></login-form>
</div>
I'm obviously missing the way Angular parses and processes templates.
Is there a way to achieve what I'm trying to do?

OK, the problem was that it didn't wait until all directive template depends on are loaded. To ensure dependencies are loaded, dependent code should be in callback passed to require function.

Getting undefined is not a function Error with Every Library

I AM trying to use different libraries in ASP.Net MVC4 but almost with all I got " undefined is not a function
" while using jquery functions. what is that and how can I remove it. Every id is correct and everything loaded correctly.
and
why it happen like this and how can i remove it.

Make sure your link references are pointed to the right place. MVC by default bundles referenced scripts and stylesheets. See BundleConfig.cs in your App_Start folder.
So if you have this:
bundles.Add(new ScriptBundle("~/js/tokeninput").Include(
"~/Scripts/tokenInput/jquery.tokeninput.js"));
then your _Layout.cshtml file should have this in the head section to generate the link markup:
#Scripts.Render("~/js/tokeninput")

How to get visual studio to recognize a cshtml file as javascript

I am writing a css/js page that has some dynamic parts in it.
To do this i am using a cshtml file containing css/js - i am using mvc.net and returning the css from a controller action.
The trouble is visual studio recognizes this page as html and not as javascript/css so it does not give me javascript/css coloring and IntelliSense.
My questions:
is there a better/easier way of creating dynamic css/js in .net
How can i get visual studio to recognize a cshtml page as javascript.

I know this is an old post...but...
What I did was just put the script tags around my javascript files in their own .cshtml file.
I created a separate controller (JavascriptController.cs), and I created a filter on that controller that removes the script tags. I set the filter in the OnActionExecuting method. by just doing
this.Response.Filter = new ScriptFilter(Response.Filter, Response.ContentEncoding);
So you get the syntax, you get razor without having to use RazorJS, and you can request the js files like regular routes in an MVC application. You just have to keep the script tags on the partial view while editing.
So you can call
/Javascript/{Action}
and you'll get your javascript file with your razor in it, and the filter will remove the script tags so you can include it like a normal script.
<script src="http://{host}/Javascript/{action}"></script>

What is wrong with putting <script> and <style> tags in a page and put your dynamic js/css there , in the end if it is dynamic there is no way for caching it so this approach will be fine.
you can write something like below:
<script>
function myFunction_#MyFunc(params)(obj) { return obj.field + #MyOtherFunc(params); }
<script>
and razor engine will evaluate #MyFunc(params) and #MyOtherFunc(params) before sending it to browser

The best solution is to follow unobtrusive javascript and unobtrusive styling and put your javascript into a .js file, put your css into a .css file and reference them in the markup in your cshtml file with a <script> and <link> tag.
e.g.
<script src="Scripts/scriptName.js" type="text/javascript"></script>
<link rel="stylesheet" href="Content/styleSheetname.css" type="text/css" />
This is good practice as it keeps your content(markup)/styling/behaviour separate.

For JavaScript you could try the RazorJS nuget package. But we've run into some inconsistencies while using it.
Still trying to find a better way to do this using Controller/Views and still be able to use intellisense and get decent coloring.