- Notifications
You must be signed in to change notification settings - Fork29
Integration of Framework7 with Angular Js - Try ithttp://ashvin777.github.io/framework7.angular/kitchen-sink-material/#!/home.html
ashvin777/framework7.angular
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Full Featured Mobile HTML Framework For Building iOS & Android Apps with the Power of AngularJS.
https://github.com/ashvin777/framework7.angular2
https://github.com/ashvin777/framework7.angular/
http://ashvin777.github.io/framework7.angular/kitchen-sink-material/#!/home.html
http://ashvin777.github.io/framework7.angular/examples/#!/home.html
From Bower
bowerinstallframework7.angular
From NPM
npminstallframework7.angular
<scripttype="text/javascript"src="../build/js/framework7.js"></script><!-- Framework7 Hook for AngularJS --><scripttype="text/javascript"src="bower_components/framework7.angular/dist/framework7.angular.hook.js"></script><scripttype="text/javascript"src="js/index.js"></script>
Then initialize the application by setting angular:true and pushState:true in options
varmyApp={};varmainView={};var$$=Dom7;angular.module("AngularApp",[]).run(function(){myApp=newFramework7({modalTitle:'Framework7',material:true,pushState:true,//set it true. It will enable the hash based navigationangular:true//set it to true to enable angular binding in Framework pages});mainView=myApp.addView('.view-main',{});})
After this setup, you can define the controller, directives, services, factories or provider as per your requirement. The code structure will remain same as Framework7 standard app.
For now use Framework7 default routerhttp://framework7.io/docs/router-api.html
Controller can be directly assgined to the template root element. By doing so while the Framework7 will initialize the page then AngularJS hooks compiler will compile the template and bind the data based on the scrope of the controller.
So you html template should look like this
<divdata-page="calendar"class="page"ng-controller="CalendarCtrl">... ...</div>
The templates of side panels, popover, modals etc, wrap them in a element directive and add that directive in html. Like below
Side Panel
<bodyng-controller="RootCtrl"ng-cloak> ...<panel-left></panel-left><panel-right></panel-right> ...</body>
Directive
app.directive("panelLeft",function(){return{templateUrl:"panel-left.html"}});app.directive("panelRight",function(){return{templateUrl:"panel-right.html"}});
And defind a controller in the root element of the panels template and use it as required.
Framework7 components can be used as it is. Inside the controller those can be initialize like below
...controller("CalendarCtrl",["$scope",function($scope){....varcalendarDefault=myApp.calendar({input:'#ks-calendar-default',}); ....}]);
Use ng-cloak for each controller declaration in html templates.
No limitation
No License is required for this plugin.
About
Integration of Framework7 with Angular Js - Try ithttp://ashvin777.github.io/framework7.angular/kitchen-sink-material/#!/home.html
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.