valnub / framework7-pure-angular-template Goto Github PK

⛔️ Unmaintained and deprecated! Don't use any more! Instead check official F7 templates: http://framework7.io/templates/

License: MIT License

CSS 0.54% HTML 54.55% JavaScript 44.90%

deprecated unmaintained

framework7-pure-angular-template's People

Stargazers

Watchers

framework7-pure-angular-template's Issues

ng-repeat doesn't work on device

Hi, I'm using angular, framework7 and phonegap. I followed the video tutorial step by step but
I can't manage to get ng-repeat working on iOS, even if on chrome works fine.
If I load JSON data from an external URL it works only on my notebook but not on the phone. On the other hand, if I load JSON data from a local .json file it works fine both on the phone and on the notebook.
Here's the code I'm using:
[DataService.js]:

Unimib.angular.factory('DataService', ['$document', '$http', function ($document, $http) {
  'use strict';

  var pub = {};

  pub.getNews = function () {
    return $http.get("news.json");
  };

  return pub;

}]);

[IndexPageController.js]:

Unimib.angular.controller('IndexPageController', ['$scope', '$http', 'InitService', 'DataService', 
  function ($scope, $http, InitService, DataService) {
    'use strict';

    InitService.addEventListener('ready', function () {
      DataService.getNews().then(function (result) {
        $scope.news = result.data;
      }, function (err) {
        console.log(err);
      });
    });  
}]);

[index.html]

<!-- Page 1 -->
          <div data-page="index" class="page" ng-controller="IndexPageController">
            <!-- Page content-->
            <div class="page-content">
              <div class="content-block-title">Ultime news</div>
              <div class="list-block media-list">
                <ul>
                  <li ng-repeat="newsItem in news">
                    <a href="#" class="item-link item-content">
                      <div class="item-media"></div>
                      <div class="item-inner">
                        <div class="item-title-row">
                          <div class="item-title">{{newsItem.title}}</div>
                        </div>
                        <div class="item-subtitle">{{newsItem.subtitle}}</div>
                        <div class="item-text">{{newsItem.body.und[0].summary}}</div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>

I see no errors on the Chrome console, even if I load the JSON data from an external URL.
I've seen a similar issue here but it has been closed without the reporter's solution.
Any help would be appreciated :) :)
Thanks!

ng-repeat doesn't work on device

Hi.. I follow these tutorial, but in my html, when I use ng-repeat.. in android or iOS doesn't work, doesn't render the HTML...

Any tips for these?

How can I use UI-router with your template

The controller value from DetailspageController is not getting reflected in HTML Page

The controller value from DetailspageController is not getting reflected in HTML Page. Can you please guide as to where I might be doing wrong.

Index.HTML:

<!DOCTYPE html>
<html ng-app="MyApp">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <title>MyApp</title>
    
    <!-- Styles -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.3.1/css/framework7.ios.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.3.1/css/framework7.ios.colors.min.css">
    <link rel="stylesheet" href="css/main.css">
	 <!-- Path to Framework7 Library CSS, Material Theme -->
    <link rel="stylesheet" href="css/framework7.material.min.css">
    <!-- Path to Framework7 color related styles, Material Theme -->
    <link rel="stylesheet" href="css/framework7.material.colors.min.css">
	<!-- Path to Framework7 Icons Livrary, Material Theme -->
    <link rel="stylesheet" href="css/framework7-icons.css">

    <!-- Scripts -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.3.1/js/framework7.min.js"></script>
    <script type="text/javascript" src="js/config.js"></script>
    <script type="text/javascript" src="js/service/InitService.js"></script>
    <script type="text/javascript" src="js/controller/IndexPageController.js"></script>
    <script type="text/javascript" src="js/controller/DetailPageController.js"></script>
    
  </head>
  <body>
    <div class="views">
      <div class="view view-main">
        
        <!-- Navbar -->
        <div class="navbar no-border">
          <div class="navbar-inner">
            <div class="left"></div>
            <div class="center sliding">MyApp Index Page</div>
            <div class="right"></div>
          </div>
          <div class="navbar-inner cached" data-page="detailsPage">
            <div class="left sliding">
              <a href="index" class="link back">
                <i class="icon icon-back"></i><span>Back</span>
              </a>
            </div>
            <div class="center sliding">Detail page</div>
            <div class="right"></div>
          </div>
        </div>
        
        <!-- Pages -->
        <div class="pages navbar-through toolbar-through">
          
          <!-- Page 1 -->
          <div data-page="index" class="page" ng-controller="IndexPageController">
            <!-- Page content-->
            <div class="page-content">
			  <form id="my-form" class="list-block">
			<div class="content-block-title">Acheievement Tracker</div>
<div class="list-block">
  <ul>
    <!-- Text inputs -->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon f7-icons">compose</i></div>
        <div class="item-inner">
          <div class="item-input">
            <input type="text" name="title" id="title" placeholder="Title">
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon f7-icons">document_fill</i></div>
        <div class="item-inner">
          <div class="item-input">
            <input type="text" name="achievement" id="achievement" placeholder="Describe Achievement">
          </div>
        </div>
      </div>
    </li> 
    <!-- Date -->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon f7-icons">calendar</i></div>
        <div class="item-inner">
          <div class="item-input">
            <input type="date" name="date" id="date" placeholder="Enter the Date">
          </div>
        </div>
      </div>
    </li>
  </ul>
  </div> 
  </form>
  <div class="content-block">
  <p><a href="#" class="button" id="getData">Get Data</a></p>
   <p><a href="#detailsPage" class="button">Navigate</a></p>
</div>
</div>
            </div>

          <!-- Page 2 -->
<div data-page="detailsPage" class="page cached" ng-controller="DetailPageController">
            <!-- Page content-->
            <!-- Scrollable page content -->
    <div class="page-content">
		<div class="timeline-item">
					<div class="timeline-item-date">25 <small>DEC</small></div>
					<div class="timeline-item-divider"></div>
				<div class="timeline-item-content">
						<div class="timeline-item-title" id="timeline_name">{{getTitle()}}</div>
						<div class="timeline-item-text">item2</div>
				</div>
		</div>
		<div class="timeline-item">
				<div class="timeline-item-date">26 <small>DEC</small></div>
				<div class="timeline-item-divider"></div>
			<div class="timeline-item-content">
					<div class="timeline-item-title">Title</div>
					<div class="timeline-item-text">Item Text</div>
			</div>
		</div>
			
	</div>
</div>
</div>
    </div>
	</div>
  </body>
</html>

IndexController JS:

/*jslint browser: true*/
/*global console, MyApp*/

MyApp.angular.controller('IndexPageController', ['$scope', '$http', 'InitService', function ($scope, $http, InitService) {
  'use strict';
  var $$ = Dom7;
  $$('#getData').on('click',function(){
		//for title
		var userName = $$('#title').val();
		var titleStorage = JSON.parse(localStorage.getItem('TitleValue'));
		if(titleStorage){
			titleStorage.push(userName);
			localStorage.setItem('TitleValue', JSON.stringify(titleStorage));
		}
		else{
			localStorage.setItem('TitleValue', JSON.stringify([userName]));
		}
		console.log("local storage value,"+JSON.parse(localStorage.getItem('TitleValue')));
		
		//for achievements
		var achieve = $$('#achievement').val();
		var achieveStorage = JSON.parse(localStorage.getItem('AchieveValue'));
		if(achieveStorage){
			achieveStorage.push(achieve);
			localStorage.setItem('AchieveValue', JSON.stringify(achieveStorage));
		}
		else{
			localStorage.setItem('AchieveValue', JSON.stringify([achieve]));
		}
		console.log("local storage value,"+JSON.parse(localStorage.getItem('AchieveValue')));
		
		//for Date
		var dateValue = $$('#date').val();
		var dateStorage = JSON.parse(localStorage.getItem('DateValue'));
		if(dateStorage){
			dateStorage.push(dateValue);
			localStorage.setItem('DateValue', JSON.stringify(dateStorage));
		}
		else{
			localStorage.setItem('DateValue', JSON.stringify([dateValue]));
		}
		console.log("local storage value,"+JSON.parse(localStorage.getItem('DateValue')));
		
		
	});
  
  InitService.addEventListener('ready', function () {
	  // Export selectors engine
    // DOM ready
    console.log('IndexPageController: ok, DOM ready');
    
    // You can access angular like this:
    // MyApp.angular
    
    // And you can access Framework7 like this:
    // MyApp.fw7.app
	
	//to retrieve form data
	//var titleStorage = 
	
	
//$scope.title = "Hello";
	
	
  });
  
}]);

DetailsPageController:

/*jslint browser: true*/
/*global console, MyApp*/

MyApp.angular.controller('DetailPageController', ['$scope', '$http', 'InitService' ,function ($scope, $http, InitService) {
  'use strict';
	//$scope.titleName = localStorage.getItem('TitleValue');
	//console.log($scope.titleName);
	//$scope.$digest();
	
	$scope.getTitle = function(){
		//setTimeout(function(){
			//$scope.$apply(function(){
				$scope.titleName = localStorage.getItem('TitleValue');
				//console.log($scope.titleName);
			//});
		//},10);
	}
	//$route.reload();
	
	
  
  InitService.addEventListener('ready', function () {
    // DOM ready
    console.log('DetailPageController: ok, DOM ready');
	

    // You can access angular like this:
   
	// And you can access Framework7 like this:
    // MyApp.fw7.app
  });
  
}]);

Not working in device

Hi,
The blank template is working fine in local server. but when building it with cordova, the html is rendering but when I am clicking on any link nothing happens. No error in console.

How can I use angular on ajax loaded pages?

Hello. Excuse my English, I'm from Spain.

I can use angular controllers within inline pages. I'm trying to load a page using ajax but I can't use an angular controller defined for that page. I think it is logic because the page is not loaded in dom.

Do you know any way to use angular within ajax loaded pages in F7?

Thanks.

Live Preview

Hi!

Can you upload it somewhere so i can post it in Examples section on F7 website?

It's seems to don't work

I have just upload this on my website but it's white page with a text hello world and nothing else. I have to do some other configurations?

ng-include route error

Hi, guys.
I am using Framework7 with Angular.js and everything works fine. But when I try to use ng-include in one of my pages, my app get broken. I realized that url becomes wrong.
Before I call the page which has ng-include, my route is:
app/view/index.html#!/menu.html (and it's OK)
After my page with ng-include load, I got the follow url:
app/view/index.html#/!/requestcategories.html (with a slash between #! – which seems wrong)
My code:

<script type=“text/ng-template” id=“recursiveitem”>
<span>Test</span>
</script>

<div data-ng-include=“'recursive_item'”></div>

Could you help me?
Thank you!

License

Hello,
could you add a license to your project so we know the conditions of forking it?
e.g MIT https://github.com/nolimits4web/Framework7/blob/master/LICENSE or Apache https://github.com/apache/cordova-android/blob/master/LICENSE

Thank you

not working with latest framework7 version

Framework7 seperate page with Angularjs

All the controllers reside in index.html in your template. How can we deal when there is another page other than index.html like in framework7 maintains seperate pages in app. As seperate pages dynamically update in index.html. I have already tried many tweaks like

  myApp.app.onPageInit('otherpage', function (page) {

  'Shoper.angular.controller('otherPageController', ['$scope', '$http', 'InitService', function           ($scope, $http, InitService) {
   'use strict';

    InitService.addEventListener('ready', function () {
           // DOM ready

        });

       }]);

        });

Please help with this scenerio. Thanks!

question

how to use route in f7 with angular?

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.