I just started a new app with ionic. my other views are working well but after creating new views since i jump into routing i just see a blank page and i don't get my mistake.
this is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
<link href="css/vtabs.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/ng-map.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="lib/ngstorage/ngStorage.js"></script>
<script src="js/geocode.js"></script>
<script src="js/vtabs.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
<script src="js/angular-local-storage.js"></script>
<script src="js/angular-local-storage.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-messages.min.js"></script>
<!-- <script type="text/javascript">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for device API libraries to load
//
document.addEventListener("deviceready",onDeviceReady,false);
// device APIs are available
//
function onDeviceReady() {
// alert("device");
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
alert("image"+imageData);
// Uncomment to view the base64-encoded image data
// console.log(imageData);
alert("photoData");
// Get image handle
// //
var smallImage = document.getElementById('smallImage');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The in-line CSS rules are used to resize the image
//
smallImage.src = "data:image/jpeg;base64," + imageData;
// alert(smallImage);
// alert(smallImage.src);
// return smallImage.src;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
alert("Photo uri");
// Uncomment to view the image file URI
// console.log(imageURI);
// Get image handle
// //
var largeImage = document.getElementById('largeImage');
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The in-line CSS rules are used to resize the image
//
largeImage.src = imageURI;
}
// A button will call this function
//
function capturePhoto() {
alert("Capture Photo");
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.DATA_URL });
}
// A button will call this function
//
function capturePhotoEdit() {
alert("Capture Edit");
// Take picture using device camera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
destinationType: destinationType.DATA_URL });
}
// A button will call this function
//
function getPhoto(source) {
alert(source);
alert("get Phot");
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
</script> -->
</head>
<body ng-app="ionicApp">
<!--
The nav bar that will be updated as we navigate between views.
-->
<!-- <ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar> -->
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view animation="slide-left-right"></ion-nav-view>
<!-- <ion-nav-view></ion-nav-view> -->
</body>
</html>
this is ma app.js file:
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('ionicApp', ['ionic', 'ionicApp.controllers','ionicApp.directives', 'ionicApp.services','LocalStorageModule','ngAnimate', 'vTabs','ngCordova','ngMap','geolocate','ngStorage'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider,localStorageServiceProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('registration', {
url: '/registration',
templateUrl: "templates/registration.html",
controller: 'RegisterCtrl'
})
.state('login', {
url: "/login",
templateUrl: "templates/login.html",
controller: 'LoginCtrl'
})
.state('setting', {
parent: 'app',
url: '^/setting',
views: {
'menuContent': {
templateUrl: "templates/setting.html",
controller: 'SettingCtrl'
}
}
})
.state('app.tasks', {
url: '/tasks',
views: {
'menuContent': {
templateUrl: 'templates/tasks.html',
controller: 'TasksCtrl'
}
}
})
.state('app.task', {
url: '/task/:id',
views: {
'menuContent': {
templateUrl: 'templates/task.html',
controller: 'TaskCtrl'
}
}
// views: {
// 'menuContent': {
// templateUrl: 'templates/task.html',
// controller: 'TaskCtrl'
// },
// 'detail': {
// templateUrl: 'report-table.html',
// controller: function($scope){ console.log("... controller stuff just for detail view ..."); }
// },
// 'note': {
// templateUrl: 'report-graph.html',
// controller: function($scope){ console.log("... controller stuff just for note view ..."); }
// }
// }
})
.state('app.newtask',{
url:'/newtask',
views: {
templateUrl: 'templates/newTask.html',
controller: 'newTaskCtrl'
}
})
.state('app.project', {
url: '/project',
views: {
'menuContent': {
templateUrl: 'templates/project.html',
controller: 'projectCtrl'
}
}
})
.state('app.saleOrder',{
url:'/saleOrder',
views:{
templateUrl:'templates/saleOrder.html',
controller:'saleOrderCtrl'
}
})
.state('app.maps', {
url: '/maps',
views: {
'menuContent': {
templateUrl: 'templates/maps.html',
controller: 'MapsCtrl'
}
}
})
.state('app.map', {
url: '/map/:id',
views: {
'menuContent': {
templateUrl: 'templates/maps.html',
controller: 'MapsCtrl'
}
}
})
.state('app.direction', {
url: '/direction/:id',
views: {
'menuContent': {
templateUrl: 'templates/directions.html',
controller: 'NavigationCtrl'
}
}
})
.state('app.customers', {
url: '/customers',
views: {
'menuContent': {
templateUrl: 'templates/customers.html',
controller: 'CustomersCtrl'
}
}
})
.state('app.customer', {
url: '/customer/:id',
views: {
'menuContent': {
templateUrl: 'templates/customer.html',
controller: 'CustomerCtrl'
}
}
})
.state('app.quotations', {
url: '/quotations',
views: {
'menuContent': {
templateUrl: 'templates/quotations.html',
controller: 'QuotationsCtrl'
}
}
})
.state('app.quotation', {
url: '/quotation/:id',
views: {
'menuContent': {
templateUrl: 'templates/quotation.html',
controller: 'QuotationCtrl'
}
}
})
.state('app.addquotation', {
url: '/addquotation',
views: {
'menuContent': {
templateUrl: 'templates/AddQuotation.html',
controller: 'AddQuotationCtrl'
}
}
})
.state('app.products', {
url: '/products',
views: {
'menuContent': {
templateUrl: 'templates/products.html',
controller: 'ProductsCtrl'
}
}
})
.state('app.product', {
url: '/product/:id',
views: {
'menuContent': {
templateUrl: 'templates/product.html',
controller: 'ProductCtrl'
}
}
})
.state('app.user', {
url: '/user/:id',
views: {
'menuContent': {
templateUrl: 'templates/user.html',
controller: 'UserCtrl'
}
}
})
.state('app.note', {
url: '/note/:id',
views: {
'menuContent': {
templateUrl: 'templates/note.html',
controller: 'AddNoteCtrl'
}
}
})
.state('app.material', {
url: '/material',
views: {
'menuContent': {
templateUrl: 'templates/AddMaterial.html',
controller: 'AddMaterialCtrl'
}
}
})
.state('app.login-into-menucontent', {
url: "/login-into-menucontent",
views: {
'menuContent' :{
templateUrl: "templates/login.html",
controller: 'LoginCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
localStorageServiceProvider
.setPrefix('odoo')
.setStorageType('localStorage')
.setNotify(true, true)
});
and this should be my template (setting.html)
<ion-view view-title="Setting">
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content>
<ion-list class="list">
<ion-item class="item item-icon-right" href="#/app/project">
<i class="icon ion-edit"></i>
Add Project
</ion-item>
<ion-item class="item item-icon-right" href="#/app/project">
<i class="icon-remove-sign"></i>
Delete Project
</ion-item>
</ion-list>
</ion-content>
</ion-view>
newTask.html
<ion-view view-title="New task">
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
<!-- <ion-nav-buttons side="right" >
<button class="button button-icon fa fa-map-marker" ui-sref="app.maps">
</button>
</ion-nav-buttons> -->
</ion-nav-bar>
<ion-content >
<div ng-controller="newTaskCtrl">
<form name="newTaskForm" novalidate="true">
<label class="item item-input ">
<span class="input-label">Task Name</span>
</label>
<input type="text" name="tasknm" ng-model="user.tasknm"></input>
<!-- <h1>{{user.tasknm}}</h1> -->
<label class="item item-input item-select item-light">
<span class="input-label">Employee</span>
<select ng-model="user.selectedItem" ng-options="item.name for item in users">
<option value="">Add New Employee</option>
</select>
</label>
<input class="input-block-level ng-valid ng-dirty" ng-model="user.new_list_category" ng-show="!user.selectedItem" type="text" placeholder="new employee name">
<label class="item item-input item-select item-light">
<div class="input-label">Customer</div>
<select ng-model="user.id" ng-options="s as s.name for s in customer" ng-change="changeCust(customer.name)">
<option value="">Add New Company</option>
</select>
</label>
<input class="input-block-level ng-valid ng-dirty" ng-model="user.new_list_company" ng-show="!user.id" type="text" placeholder="new employee name">
<button class="button button-calm" ng-disabled="newTaskForm.$invalid" ng-click="save(newTaskForm.$valid)">Save</button>
<button class="button button-stable" ng-click="cancel()">Cancel
</button>
</form>
</div>
</ion-content>
</ion-view>
Your states should be nested states of you main "abstract" state.
.state('app.registration', {
url: '/registration',
templateUrl: "templates/registration.html",
controller: 'RegisterCtrl'
})
Related
The short story:
When I open up the index page using gulp watch, I see nothing.
I get the error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.12/$injector/modulerr?p0=confusionApp&p1=Er…0(http%3A%2F%2Flocalhost%3A3000%2Fscripts%2Fmain-94e7868a45.js%3A1%3A18165)
When I hit the link to see what the error is, it says that:
Failed to instantiate module {0} due to:
{1}
It then goes into ngRoute issues which I'm not using at this point, as I am using angular-ui-router.
I can't go any further without solving this problem so I'm throwing it up to you guys.
The code is below, but bear in mind,I am only including the areas I have changed in the assignment as it would be too long for this post. So if there's any other code you'd like to see, please put them into the contents.
Thanks.
header.html
...
<ul class="nav navbar-nav">
<li class="active">
<a ui-sref="app">
<span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li><a ui-sref="app.aboutus">
<span class="glyphicon glyphicon-info-sign"
aria-hidden="true"></span> About</a></li>
<li><a ui-sref="app.menu">
<span class="glyphicon glyphicon-list-alt"
aria-hidden="true"></span>
Menu</a></li>
<li><a ui-sref="app.contactus">
<i class="fa fa-envelope-o"></i> Contact</a></li>
</ul>
...
footer.html
...
<ul class="list-unstyled">
<li><a ui-sref="app">Home</a></li>
<li><a ui-sref="app.aboutus">About</a></li>
<li><a ui-sref="app.menu">Menu</a></li>
<li><a ui-sref="app.contactus">Contact</a></li>
</ul>
...
app.js
'use strict';
angular.module('confusionApp',['ui.router'])
.config(function($stateProvider, $urlRouteProvider){
$stateProvider
//route for the home page
.state('app', {
url:'/',
views: {
'header': {
templateUrl: 'views/header.html',
},
'content': {
template: '<h1>To be completed</h1>',
controller: 'IndexController'
},
'footer': {
templateUrl: 'views/footer.html',
}
}
})
//route to aboutus page
.state('app.aboutus', {
url:'aboutus',
views: {
'content#': {
template: '<h1>To be completed</h1>',
controller: 'AboutController'
}
}
})
//route to contactus page
.state('app.contactus', {
url:'contactus',
views: {
'content#': {
templateUrl: 'views/contactus.html',
controller: 'ContactController'
}
}
})
//route to menu page
.state('app.menu', {
url:'menu',
views: {
'content#': {
templateUrl: 'views/menu.html',
controller: 'MenuController'
}
}
})
//route to dishdetail page
.state('app.dishdetail', {
url:'menu/:id',
views: {
'content#': {
templateUrl: 'views/dishdetail.html',
controller: 'DishDetailController'
}
}
});
$urlRouteProvider.otherwise('/');
})
;
menu.html
...
<div class="media-left media-middle">
<a ui-sref="app.dishdetail({id: dish._id})">
<img class="media-object img-thumbnail" ng-src={{dish.image}} alt={{dish.name}} />
</a>
</div>
...
index.html
<body>
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
<!-- build:js scripts/main.js -->
<script src="../bower_components/angular/angular.min.js"></script>
<!-- <script src="../bower_components/angular-route/angular-route.min.js"></script> -->
<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
<!-- endbuild -->
</body>
When I downloaded the new app.js file, it fixed everything, but there wasn't that much different between the two files. (Much frustration.)
The templates were replaced with templateUrls which I had actually done and everything was the same, but when I just copied and pasted the code over my code, it worked.
Here is the new working code:
'use strict';
angular.module('confusionApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// route for the home page
.state('app', {
url:'/',
views: {
'header': {
templateUrl : 'views/header.html',
},
'content': {
templateUrl : 'views/home.html',
controller : 'IndexController'
},
'footer': {
templateUrl : 'views/footer.html',
}
}
})
// route for the aboutus page
.state('app.aboutus', {
url:'aboutus',
views: {
'content#': {
templateUrl : 'views/aboutus.html',
controller : 'AboutController'
}
}
})
// route for the contactus page
.state('app.contactus', {
url:'contactus',
views: {
'content#': {
templateUrl : 'views/contactus.html',
controller : 'ContactController'
}
}
})
// route for the menu page
.state('app.menu', {
url: 'menu',
views: {
'content#': {
templateUrl : 'views/menu.html',
controller : 'MenuController'
}
}
})
// route for the dishdetail page
.state('app.dishdetails', {
url: 'menu/:id',
views: {
'content#': {
templateUrl : 'views/dishdetail.html',
controller : 'DishDetailController'
}
}
});
$urlRouterProvider.otherwise('/');
})
;
And if you are facing the same issue with the same course, then please copy and paste the app.js code even if you've filled everything in correctly.
I want to build an app that uses both tab interface and side menu for going to states.
Now what I want is that side menu linked views also have original tabs under their selected tabs, once on those new views.
router.js
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "js/base/menu.html"
})
.state('app.tabs', {
url: '/tabs',
views: {
'menuContent': {
templateUrl: 'js/base/tabs.html',
controller: 'TabsController as tabsController'
}
}
})
.state('app.tabs.old', {
url: '/old',
views: {
'old': {
templateUrl: 'js/old/old.html',
}
}
})
.state('app.tabs.new', {
url: '/new',
views: {
'new': {
templateUrl: 'js/new/new.html',
}
}
})
.state('app.tabs.profile', {
url: '/profile',
views: {
'profile': {
templateUrl: 'js/profile/profile.html'
}
}
});
$urlRouterProvider.otherwise('/app/tabs');}
Here old and new are in tabs, while profile should be accessed from side menu, and also have old and new tabs on bottom on its view.
menu.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="header-style">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="right">
<ion-content>
<ion-list>
<!--THE MOST IMPORTANT PART-->
<ion-item nav-clear class="item item-avatar" href="#/profile">
<img src="../images/img/avatar/header-avatar-2.png">
<h2 class="item-text-center">{{user}}'s Profile</h2>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Now the most important is in ion-item, I tried everything, from
href
onclick
ng-click to go to state
ui-sref
and obviously did not do it right.
Any suggestions how to connect the profile view to the app?
My app uses tabs, a side menu, and the master details pattern. But, for some reason, when I try to navigate to the details page of an item in the list, nothing comes up. I'm not sure if I have the routing wrong or something.
If someone could help me out, I would really appreciate it! This is driving me crazy!
Thanks!
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: '/tab',
controller: 'TabsCtrl',
templateUrl: 'templates/tabs.html'
})
.state('tabs.feed', {
url: '/feed',
views: {
'tab-feed': {
templateUrl: 'templates/tab-feed.html',
controller: 'FeedCtrl'
}
}
})
.state('event-detail', {
url: '/event-detail/:name',
templateUrl: 'templates/event-detail.html',
controller: 'EventDetailCtrl'
})
tab-feed.html
<ion-view view-title="Feed" class="tab-feed">
<ion-nav-buttons side="right">
<button class="button icon ion-funnel" ng-click="modal2.show()">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="search">
</label>
<ion-list>
<ion-item class="item item-thumbnail-left" ng-repeat="event in events | orderBy:'name' | searchEvents:search" type="item-text-wrap" href="#/event-detail/{{event.name}}">
<img ng-src="http://placehold.it/300x300">
<h2>{{event.name}}</h2>
<p><i class="ion-clock"></i> {{event.date | date: 'MM/dd/yy'}} | {{event.time | date: 'shortTime'}}</p>
<p><i class="ion-location"></i> {{event.location}}</p>
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar align-title="center" class="bar-positive">
<div class="title" ng-click="modal.show()">Add Event</div>
</ion-footer-bar>
</ion-view>
EventDetailsController
.controller('EventDetailCtrl', ['getLocalStorage', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {
$scope.openMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
};
var name = $stateParams.name;
$scope.event = getLocalStorage.getEvent(name);
}])
getLocalStorage Service
.factory('getLocalStorage', function () {
var eventList = [];
return {
list: eventList,
updateEvents: function (eventsArr) {
if (window.localStorage && eventsArr) {
localStorage.setItem("events", angular.toJson(eventsArr));
}
//update the cached version
eventList = eventsArr;
},
getEvents: function () {
eventList = angular.fromJson( localStorage.getItem("events") );
return eventList ? eventList : [];
},
getEvent: function(name){
for(i=0;i<eventList.length;i++){
if(eventList[i].name == name){
return eventList[i];
}
}
}
};
})
Can you try the following:
1) Add abstract: true to your tabs state:
.state('tabs', {
url: '/tab',
controller: 'TabsCtrl',
abstract: true,
templateUrl: 'templates/tabs.html'
})
2) In your EventDetailsCtrl, if you're thinking of minification, add all your injection parameters, in order, before function... like this:
.controller('EventDetailCtrl', ['$scope', 'getLocalStorage', '$stateParams', '$ionicSideMenuDelegate', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {
If the above doesn't help, please post your tabs.html code.
My app uses tabs, a side menu and a master detail pattern. But, for some reason, I can't figure out how to make it navigate to the detail page of an item in the list. I've been trying to figure it out for days but I'm pretty new to Ionic and Angular...
If anybody could tell me what's wrong, I would really appreciate it.
tab-feed.html
<ion-view view-title="Feed">
<ion-nav-buttons side="right">
<button class="button icon ion-funnel" ng-click="modal2.show()">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="search">
</label>
<ion-list>
<ion-item class="item item-thumbnail-left" ng-repeat="event in events | orderBy:'name' | searchEvents:search" type="item-text-wrap" href="#/feed/{{event.name}}">
<!-- <ion-item class="item item-thumbnail-left" ng-repeat="event in events" type="item-text-wrap" ui-sref="event({eventId:event.id})">-->
<img ng-src="http://placehold.it/300x300">
<h2>{{event.name}}</h2>
<p><i class="ion-clock"></i> {{event.date | date: 'MM/dd/yy'}} | {{event.time | date: 'shortTime'}}</p>
<p><i class="ion-location"></i> {{event.location}}</p>
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar align-title="center" class="bar-positive">
<div class="title" ng-click="modal.show()">Add Event</div>
</ion-footer-bar>
</ion-view>
tabs.html
<ion-view view-title="Tabs">
<ion-tabs class="tabs-icon-top tabs-positive">
<!-- Feed Tab -->
<!-- <ion-tab title="The Feed" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" ui-sref="app.tabs.feed">-->
<ion-tab title="The Feed" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/feed">
<ion-nav-view name="tab-feed"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
controller: 'LoginCtrl',
templateUrl: 'templates/login.html'
})
.state('tabs', {
url: '/tab',
controller: 'TabsCtrl',
templateUrl: 'templates/tabs.html'
})
.state('tabs.feed', {
url: '/feed',
views: {
'tab-feed': {
templateUrl: 'templates/tab-feed.html',
controller: 'FeedCtrl'
}
}
})
.state('tabs.event-detail', {
url: '/feed/:eventId',
views: {
'tab-event-detail': {
templateUrl: 'templates/event-detail.html',
controller: 'EventDetailCtrl'
}
}
})
...
$urlRouterProvider.otherwise('/tab');
});
controllers.js
.controller('FeedCtrl', ['$scope', 'getLocalStorage', '$ionicModal', '$ionicSideMenuDelegate', function($scope, getLocalStorage, $ionicModal, $ionicSideMenuDelegate) {
$scope.info = {};
$scope.events = getLocalStorage.getEvents();
$scope.clearSelected = function() {
$scope.events = $scope.events.filter(function(item) {
return !item.selected;
});
getLocalStorage.updateEvents($scope.events);
};
$scope.addEvent = function() {
$scope.events.push($scope.info);
$scope.modal.hide();
getLocalStorage.updateEvents($scope.events);
$scope.info = {};
};
$ionicModal.fromTemplateUrl('new-event.html', function(modal) {
$scope.modal = modal;
}, {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true
});
}])
.controller('EventDetailCtrl','getLocalStorage', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {
$scope.openMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
};
var eventId = $stateParams.name;
$scope.event = getLocalStorage.getEvent(eventId);
})
Your name of parameter in the URL doesn't match the requested parameter in the controller and the link in tab-feed.html.
app.js
.state('tabs.event-detail', {
url: '/feed/:eventId', // <-- The parameter is defined as eventId
views: {
'tab-event-detail': {
templateUrl: 'templates/event-detail.html',
controller: 'EventDetailCtrl'
}
}
})
controller.js
.controller('EventDetailCtrl','getLocalStorage', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {
$scope.openMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
};
var eventId = $stateParams.eventId; // <-- here you request the parameter
$scope.event = getLocalStorage.getEvent(eventId);
})
And last you also need to correct the href-attribute in
tab-feed.html
<ion-item class="item item-thumbnail-left" ng-repeat="event in events | orderBy:'name' | searchEvents:search" type="item-text-wrap" href="#/feed/{{event.eventId}}">
Of course, you also can use the name as parameter, but you have to be consistent.
I found the article from angularcode
and this link is helpful.
But I have some problem with my webpage structure that doesn't want to have the div tag for containing data-ng-view attribute. How do I get data, but no this div tag?
This is some code from the tutorial:
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/login', {
title: 'Login',
templateUrl: '/login.php',
controller: 'authCtrl'
})
.when('/logout', {
title: 'Logout',
templateUrl: '/login.php',
controller: 'logoutCtrl'
})
.when('/signup', {
title: 'Signup',
templateUrl: 'partials/signup.html',
controller: 'authCtrl'
})
.when('/dashboard', {
title: 'Dashboard',
templateUrl: '/dashboard.php',
controller: 'authCtrl'
})
.when('/', {
title: 'Login',
templateUrl: '/login.php',
controller: 'authCtrl',
role: '0'
})
.otherwise({
redirectTo: '/login'
});
}])
.run(function ($rootScope, $location, Data) {
$rootScope.$on("$routeChangeStart", function (event, next, current) {
$rootScope.authenticated = false;
Data.get('session').then(function (results) {
if (results.uid) {
$rootScope.authenticated = true;
$rootScope.uid = results.uid;
$rootScope.name = results.name;
$rootScope.email = results.email;
} else {
var nextUrl = next.$$route.originalPath;
if (nextUrl == '/signup' || nextUrl == '/login') {
} else {
$location.path("/login");
}
}
});
});
});
I want to separate the structure for each page. What's any method to link to other page instead show like templateURL on data-ng-view but the function of user authentication session still work?
UPDATE
This is my code from my project
Note that I have try templateURL both .html and .php are the same result.
index.php
<div ng-app="myApp" data-ng-view="" id="ng-view"></div>
<toaster-container toaster-options="{'time-out': 3000}"></toaster-container>
<!-- authentification script -->
<script src="/pooh/dist/js/angular.min.js"></script>
<script src="/pooh/dist/js/angular-route.min.js"></script>
<script src="/pooh/dist/js/angular-animate.min.js"></script>
<script src="/pooh/dist/js/toaster.js"></script>
<script src="/pooh/app/app.js"></script>
<script src="/pooh/app/data.js"></script>
<script src="/pooh/app/directives.js"></script>
<script src="/pooh/app/authCtrl.js"></script>
app.js
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/login', {
title: 'Login',
templateUrl: '/pooh/login.php',
controller: 'authCtrl'
})
.when('/logout', {
title: 'Logout',
templateUrl: '/pooh/login.php',
controller: 'logoutCtrl'
})
.when('/signup', {
title: 'Signup',
templateUrl: 'partials/signup.html',
controller: 'authCtrl'
})
.when('/dashboard', {
title: 'Dashboard',
templateUrl: '/pooh/dashboard.php',
controller: 'authCtrl'
})
.when('/', {
title: 'Login',
templateUrl: '/pooh/login.php',
controller: 'authCtrl',
role: '0'
})
.otherwise({
redirectTo: '/login'
});
}])
.run(function ($rootScope, $location, Data) {
$rootScope.$on("$routeChangeStart", function (event, next, current) {
$rootScope.authenticated = false;
Data.get('session').then(function (results) {
if (results.uid) {
$rootScope.authenticated = true;
$rootScope.uid = results.uid;
$rootScope.name = results.name;
$rootScope.email = results.email;
} else {
var nextUrl = next.$$route.originalPath;
if (nextUrl == '/signup' || nextUrl == '/login') {
} else {
$location.path("/login");
}
}
});
});
});
login.php
<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/head.php');?>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<b>Pooh</b>Furniture
</div>
<!-- /.login-logo -->
<div class="login-box-body">
<p class="login-box-msg">Sign in to start your session</p>
<form method="post">
<div class="form-group has-feedback">
<input ng-model="login.email" class="form-control" placeholder="Email">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input ng-model="login.password" type="password" class="form-control" placeholder="Password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
<div class="checkbox icheck">
<label>
<input type="checkbox"> Remember Me
</label>
</div>
</div>
<!-- /.col -->
<div class="col-xs-4">
<button ng-click="doLogin(login)" data-ng-disabled="loginForm.$invalid" type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
</div>
<!-- /.col -->
</div>
</form>
<a class="hidden" href="#">I forgot my password</a><br>
</div>
<!-- /.login-box-body -->
</div>
<!-- /.login-box -->
<!-- jQuery 2.1.4 -->
<script src="/pooh/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="/pooh/bootstrap/js/bootstrap.min.js"></script>
<!-- iCheck 1.0.1 -->
<script src="/pooh/plugins/iCheck/icheck.min.js"></script>
<script>
$(function () {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});
});
</script>
</body>
</html>
dashboard.php
<?php
//check if already logged in move to home page
//if logged in redirect to members page
//if( $user->is_logged_in() ){ header('Location: login.php'); }
?>
<?php $page = 'summary'; ?>
<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/header.php');?>
<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/sidebar.php');?>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Dashboard
<small>Overall information</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Level</li>
<li class="active">Here</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<!-- Your Page Content Here -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/footer.php');?>
some of code from header.php
to show that the body tag has class attribute
<body class="hold-transition fixed skin-blue sidebar-mini">