I am using HTML pages in my angularjs MVC application instead of cshtml page.
Now I am trying to bundle all the js files , I know for script rendering I can use this syntax
#System.Web.Optimization.Scripts.Render("~/app/main.js")
What is the equivalent of using #script.render on a plain htm page ?
You can just use a normal script tag to load your Javascript.
<script src="app/main.js"></script>
Related
I am trying to use ng-quill text editor in nested view (not the index.html) in AngularJs project.
Using Angular version 1.2.28.
Able to get ng quill on index.html page but not in other views.
https://github.com/rkmr039/Ng-Quill-example
Not getting any error either on welcome page or nested view
I have a vue application, I have created a build using webpack, now the build index.html and static folder I have copied in my Angular js application inside src by renaming my vue index.html so that different framework's html should not conflict.
Now in one of the Angular html file I have added my vue html file using 'ng-include' directive.
Vue Application gets loaded but router-view is not working and that all components that renders under router is not loading
I tried to add VueRouter cdn in my angularjs index.html, this gives me this error in console
Uncaught TypeError: Cannot redefine property: $router
Can Gatsby or Jekyll or any other static site generators render a React-authored site into purely static HTML? I'm looking to host on S3/CloudFront or similar and also have little to no JS in the output.
Basically I'm looking to create a static website but would like to use React as development tool to take advantage of reusable UI components. Actual runtime interaction is minimal and can be done without React at runtime.
I looked at react-static which seems to be exactly what I'm looking for but the rendered html pages still reference and load the React library.
With my minimal needs I could probably roll my own thing to create each page as a separate React SPA and then use ReactDOMServerto render each to a static HTML file. I'm looking to see if there are simpler/better options.
You can use pupeteer to get the rendered html of any webpage, including SPA. Or use rendertron, which uses pupeteer underneath.
Another one is react-snap, which will crawl your web on build and create the html for each page.
With Gatsby, sure you can. Gatsby has a html.js that serves as a template for all generated pages. You can simply remove Gatsby's javascript from that html.
/* Generated html */
...
<body>
<div id="___gatsby">...</div>
<script src="/common.js"></script> <-- remove this
</body>
First copy the default html to your src:
cp .cache/default-html.js src/html.js
Then, edit this line:
/* src/html.js */
<body {...this.props.bodyAttributes}>
{this.props.preBodyComponents}
<div
key={`body`}
id="___gatsby"
dangerouslySetInnerHTML={{ __html: this.props.body }}
/>
- {this.props.postBodyComponents}
+ {process.env.NODE_ENV !== 'production' && this.props.postBodyComponents}
</body>
This ensures you can still make use of gatsby's hot reload in development, but generated htmls will not include React & webpack generated scripts.
A more meticulous approach would be to loop over postBodyComponents & only removes the script tag that link to common.js, but for most case I think it'll be fine.
This definitely defeats the purpose of Gatsby, which has its own convention & complex process just so it can generate a progressive web app. For your case, if you're not already familiar with Gatsby, maybe it'd be simpler to roll your own SSR. My answer is only to show whether it's possible with Gatsby or not.
I am trying to build and app using Angular 2 which has several tabs. I want one of these tabs to be as the already created angular 1.3.17 app. More specifically, I want to embed Netflix Vector into one of my tabs. My Angular 2 app is uploaded here (at the moment does nothing) here. Would this be possible?
I don't intend to have any interaction between the Angular 2 components and Angular 1.x. I simply want to embed it.
I also tried the following:
The way to run Netflix Vector is simply doing a gulp build and then running a simple server inside the dist directory.
So, to ease the way of embedding such a large application, I tried to put the dist directory inside my angular 2 component directory and then just modifying the index.html to remove the inclusion of scripts and css. I loaded those scripts and css through my main index.html.
Then I loaded index.html through my angular 2 component. I have made sure that the angular libraries and all other js files are loaded. However, it doesnt seem to work just by providing a ng-app directive inside index.html
I want to know how to build my own Ext JS with only the js files I need, or if there is a feature in Ext JS where I can just load the individual components that I need. Ext JS is a lot of the size of my application, and it is not working without including ext-all.js.
Sollution:
Use a php script to serve compressed css or js scripts like in the example in the link below:
http://www.thewebdevelopmentblog.com/2008/10/tip-speed-up-your-websites-using-gzip-and-merging-files/