Security News
The Hidden Blast Radius of the Axios Compromise
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.
By Ahmad Nassri - Apr 01, 2026
New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
framework7.angular
Advanced tools
framework7.angular
Full Featured Mobile HTML Framework For Building iOS & Android Apps using Angularjs
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
Licence
No License is required for this plugin.
FAQs
Full Featured Mobile HTML Framework For Building iOS & Android Apps using Angularjs
We found that framework7.angular demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 19 Nov 2017
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Research
Supply Chain Attack on Axios Pulls Malicious Dependency from npm
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.
By Socket Research Team - Mar 31, 2026
Research
TeamPCP Compromises Telnyx Python SDK to Deliver Credential-Stealing Malware
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
By Socket Research Team - Mar 27, 2026