Important: Read this first!
This article covers a template for Framework7 apps built on TypeScript, SASS, Grunt and AngularJS. From my experience so far I discovered that TypeScript is really complicated and not much fun to use with F7 and Angular. Also, some people seem to struggle with the grunt compile process. So, I created a new, easier template without any fancy stuff, just plain HTML, CSS and JavaScript which I can recommend to get started before diving into the funky stuff: https://github.com/valnub/Framework7-Pure-Angular-Template (There is also a video screencast tutorial available)
I am a big fanboy of Framework7, strict typing and MVC, so I tried to combine Framework7 with TypeScript and Angular with a flavor of SASS boiled on top of Grunt. The result is this ready-to-use template: Check on Github
How to build the Framework7 template
- No complicated bower or yeoman stuff. Just get from Github.
- Then, do
npm install
and thengrunt compile
to compile and copy everything from /src to /build. Default task for grunt is “watch” which you can use for auto-compile and -reload in the browser when you do changes in /src.
Example app
If you need an example check out this demo app that I created on top of this template. It simply lists current and upcoming movies from rottentomatoes by getting the data via Ajax using Angular’s $http service as well as its integrated data binding technique to render the view.
Let me know if you have any feature requests for the template.
Hi, I have done npm install and then grunt compile to compile and copy everything from /src to /build.
Upto above it is successfull, after that I am not getting what to do?
Can you please tell me how to emulate / run the app?
Until now I have used ionic, am very new for this Framework7, please guide me.
Just run the content of /build on your webserver by copying it to htdocs and open index file with a browser. No rocket science there ;-)
Note: This is not the best practice how to use Framework7. It is recommended to not use TypeScript. Instead, just use this: https://github.com/valnub/Framework7-Pure-Angular-Template
If you want to run it as an app, you have to use Cordova/PhoneGap:
http://cordova.apache.org
http://www.phonegap.com
Thank you :) , I got it.