framework7.angular

v2.1.0

Published

3 years ago

Full Featured Mobile HTML Framework For Building iOS & Android Apps using Angularjs

Downloads

949

0High
0Medium
0Low

ashvin777

mobile framework ios 7 ios7 ios8 ios 8 iphone ipad apple phonegap native touch appstore app f7 material android google googleplay

Framework7 + AngularJS

Full Featured Mobile HTML Framework For Building iOS & Android Apps with the Power of AngularJS.

Anuglar 2 Integration (UNDER DEVELOPMENT)

https://github.com/ashvin777/framework7.angular2

Full Documentation

https://github.com/ashvin777/framework7.angular/

Kitchen Sink App

http://ashvin777.github.io/framework7.angular/kitchen-sink-material/#!/home.html

Demo App

http://ashvin777.github.io/framework7.angular/examples/#!/home.html

Install

From Bower

bower install framework7.angular

From NPM

npm install framework7.angular

    <script type="text/javascript" src="../build/js/framework7.js"></script>
    <!-- Framework7 Hook for AngularJS -->
    <script type="text/javascript" src="bower_components/framework7-angularjs/framework7.angular.hook.js"></script>
    <script type="text/javascript" src="js/index.js"></script>

Then initialize the application by setting angular:true and pushState:true in options

var myApp = {};
var mainView = {};
var $$ = Dom7;

angular.module("AngularApp", [])

.run(function() {
    myApp = new Framework7({
        modalTitle: 'Framework7',
        material: true,
        pushState: true, //set it true. It will enable the hash based navigation
        angular: 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.

Screenshots

Routing - WIP

For now use Framework7 default router http://framework7.io/docs/router-api.html

Controller

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

<div data-page="calendar" class="page" ng-controller="CalendarCtrl">
	...
    ...
</div>

Framework7 Template

The templates of side panels, popover, modals etc, wrap them in a element directive and add that directive in html. Like below

Side Panel

<body ng-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.

Using Framework7 Components

Framework7 components can be used as it is. Inside the controller those can be initialize like below

..
.controller("CalendarCtrl", ["$scope", function($scope) {
	....
    var calendarDefault = myApp.calendar({
        input: '#ks-calendar-default',
    });
    ....
}]);

To avoid issues

Use ng-cloak for each controller declaration in html templates.

Limitation

No limitation

Contact

[email protected]

Licence

No License is required for this plugin.