Template html files for codepen projects


#1

Hi All,

I have been seeing a lot of codepen projects on Ionic that are very useful. But in all of these projects i see only the HTML,CSS and JS content. the related template files are not to be seen. How to get those template files as without it the whole thing does not seem to be run.

I have started using Ionic recently and please advise if this is something simple and i have been missing the link to understand this.

Thanks,
Aadil


#2

Which codepen examples?


#3

For example.

this codepen has the HTML which is pointing to intro.html

<script id="templates/intro.html" type="text/ng-template">

Could you please let me know how to get this template html.

Thanks,
Aadil


#4

No problem, you’re looking at it :smile:

Codepen can’t create additional HTML files like Plnkr.co so the only way to use multiple pages is to do this via some kind of template system. Similar to jQuery Mobile approach, even Onsen UI uses the same logic.

So, this template is not pointing to some specific HTML file, the content is already inside that template script tag. This way we can easily put everything inside a single HTML file and still work with $stateProvider.


#5

Thank you!
I am able to implement it now.

however, i am getting the below error now. Could you please help me on this.

Uncaught SyntaxError: Unexpected token . app.js:9

this is exactly at the below line in my app.js

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {

Here is my module.

var App = angular.module('App', ['ionic']);

and then it shows this error.

Uncaught Error: [$injector:modulerr] Failed to instantiate module App due to:
Error: [$injector:nomod] Module ‘App’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Any help would be great.

Thanks,
Aadil