Skip to main content
SimilarExport ZIP
100%

Use systemjs/plugin-text to import html directly to $routeProvider or $templateCache, works great with jspm bundle.

✓ Published0🌍 Public
HHypercubed
Last edited Jul 30, 2015
Created on Jul 30, 2015

This example shows how to load HTML templates as AngularJS module dependencies using SystemJS’s text plugin, avoiding separate HTTP requests. The code demonstrates three approaches: a directive’s `template` property, `$templateCache.put` for reuse, and `$routeProvider.when` for route-specific templates. Each snippet imports the template string via `import somethingHTML from './something.html!text'`, which SystemJS resolves at build time. The examples rely on AngularJS’s dependency injection and SystemJS’s bundle-friendly module loading, making templates directly available in the application’s JavaScript bundle.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist cf65d4442946f9016d84d3562f267824

This example demonstrates a dynamic plugin system for an Angular application that loads and initializes modular features at runtime. The code uses Angular’s `Compiler` and `Injector` APIs to asynchronously compile and instantiate modules, while the `SettingsService` supplies the list of plugins to activate. It shows how plugins can be defined either as direct Angular injector definitions or as objects containing an `ngModule` and optional providers, which are then compiled and attached to the application’s root injector. The rendering approach is code-based, with no visual output, focusing on the service layer that orchestrates lazy-loaded functionality.

HHypercubed
63% match
Loading thumbnail…

Gist 8019475

This example demonstrates an AngularJS directive that integrates the Marked library to render Markdown text as HTML. The directive supports both static content and dynamic bindings, dynamically updating the output when the bound value changes. It can be applied as an attribute or element, accepts optional configuration options through the `opts` attribute, and enables file inclusion via Angular's built-in `ng-include` directive. The code defines an Angular module named `marked` and uses dependency injection for the Marked library and HTTP service.

HHypercubed
61% match
Loading thumbnail…

Improved angularjs markdown provider/filter/directive

This example demonstrates an AngularJS provider, filter, and directive that render Markdown into HTML. It uses the Showdown converter to process text, with a provider that allows configuring default options, such as enabling GitHub-flavored extensions. The filter and directive both invoke `makeHtml` to transform input, while the directive supports binding to scope elements, external files via `ng-include`, and attribute-based text or options. The code also includes a filter that applies the converter to any AngularJS expression, showcasing a reusable approach for embedding Markdown content in views.

HHypercubed
60% match
Loading thumbnail…

JS in HTML

This example demonstrates how JavaScript code can be integrated directly into an HTML page using D3 v7. It defines three modules—`index.js`, `something.js`, and `thing.js`—that import from each other using ES6 syntax. The `index.html` file loads the D3 library from a CDN and displays a simple “Hello HTML” message styled with CSS. The JavaScript modules log text and the D3 `select` function to the console, showcasing modular code organization alongside standard HTML rendering.

EEd Smale
57% match
Loading thumbnail…

JS in HTML

This example demonstrates how JavaScript modules can be seamlessly integrated into an HTML page using D3 v6. The page displays the text "Hello HTML" in large type, while the accompanying JavaScript logs greetings and exports to the browser console. It uses D3’s `select` import and modular exports from custom `something.js` and `thing.js` files, showcasing ES module syntax and dependency chaining. The rendering approach is simple static HTML with a CDN-hosted D3 script.

CCurran Kelleher
57% match
Loading thumbnail…

JS in HTML

This example demonstrates the integration of JavaScript within an HTML page, displaying the static text “Hello HTML!” styled with CSS. The code imports `something` from `./something.js`, which itself combines a string with the export from `./beautiful.js`, logging the concatenated result to the console. It also references the global `d3` object, though the D3 library is not loaded in the page due to the commented-out script tag. The example illustrates module-based code organization and console output without any interactive visualization.

GGullyPlook
56% match
Loading thumbnail…

JS in HTML

This example demonstrates how JavaScript modules and dependencies are handled within an HTML page, highlighting the contrast between traditional script tags and ES6 module imports. It shows the console output of a string concatenated from variables exported across separate files, including `GetRekt.js` and `lmfao.js`, using named exports. The code uses ES6 `import` and `export` statements, which are bundled by Vizhub’s internal Rollup process when the file is named `index.js`. It visualizes the concept of topological sorting for script dependencies, though the actual rendering is limited to a plain HTML text display.

JJaga-droid
56% match
Loading thumbnail…

JS in HTML

This example demonstrates a basic HTML page that loads D3.js and executes a simple JavaScript logging sequence. It shows how D3 can be integrated directly into an HTML file alongside custom modules, with the page displaying the text "Hello HTML!" styled at a large font size. The code imports D3 v7 from a CDN and uses ES module imports (`something.js`, `thing.js`) to log a concatenated message to the console. The visualization relies on standard DOM manipulation and console output rather than D3-specific rendering methods.

Aajoua
56% match