I've been working on my first app and I'm stuck on the routing on the application.
There are in total 4 templates (Login,Overzicht,Settings,Toevoegen)
First the login template needs to show up (Which I got working.) and when I press login, it'll either let it pass or stop it. If I click login it takes me to the other 3 tabs.
From that point on, It doesn't work anymore! I have the following line:
$urlRouterProvider.otherwise('/login');
And it indeed goes back to /login everytime.
I'll paste my code below
controllers.js
.controller('LoginCtrl', function($scope, LoginService, $ionicPopup, $state) {
$scope.data = {};
$scope.login = function() {
LoginService.loginUser($scope.data.username, $scope.data.password).success(function(data) {
$state.go('tab.toevoegen');
}).error(function(data) {
var alertPopup = $ionicPopup.alert({
title: 'Login failed!',
template: 'Please check your credentials!'
});
});
}
})
App.js
.controller("SettingsCtrl", function($scope, $stateParams, $ionicHistory){
$scope.goBack = function(){
$ionicHistory.goBack();
}
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
// setup an abstract state for the tabs directive
.state('tab', {
url: 'templates/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.toevoegen', {
url: 'templates/toevoegen.html',
views: {
'toevoegen': {
templateUrl: '/toevoegen.html',
controller: 'TodoCtrl'
}
}
})
.state('tab.overzicht', {
url: 'templates/overzicht',
views: {
'tabs-overzicht': {
templateUrl: '/overzicht.html',
controller: 'TodoCtrl'
}
}
})
.state('tab.settings', {
url: '/templates/settings.html',
templateurl: '/settings.html',
controller: 'SettingsCtrl'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
services.js
angular.module('starter.services', [])
.service('LoginService', function($q) {
return {
loginUser: function(name, pw) {
var deferred = $q.defer();
var promise = deferred.promise;
if (name == undefined && pw == undefined) {
deferred.resolve('Welcome ' + name + '!');
} else {
deferred.reject('Wrong credentials.');
}
promise.success = function(fn) {
promise.then(fn);
return promise;
}
promise.error = function(fn) {
promise.then(null, fn);
return promise;
}
return promise;
}
}
})
Login template
<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/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>
<!-- your app's js -->
<script src="js/controller.js"></script>
</head>
<body ng-app="todo" ng-controller="TodoCtrl">
<ion-view view-title="Login" name="login-view">
<ion-content class="padding">
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Username" ng-model="data.username">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="data.password">
</label>
</div>
<button class="button button-block button-calm" ng-click="login()">Login</button>
</ion-content>
</ion-view>
</body>
</html>
tabs.html
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Dashboard Tab -->
<ion-tab title="Add" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/toevoegen">
<ion-nav-view name="tab-toevoegen"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="Overzicht" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/overzicht.html">
<ion-nav-view name="tab-overzicht"></ion-nav-view>
</ion-tab>
<!-- Account Tab -->
<ion-tab title="Settings" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/settings">
<ion-nav-view name="tab-setttings"></ion-nav-view>
</ion-tab>
</ion-tabs>
overzicht.html
<script type="text/ng-template" id="tabs.overzicht">
<ion-content>
<div ng-show="shouldShowInkomsten.checked">
<ion-list>
<div class="item item-divider">
<p class="dividerclass">Inkomsten</p>
</div>
<ion-item ng-repeat="info in inkomsten" id="testborder1">
<ion-option-button class="button-dark" ng-click=Spliceinkomen($index);startAgain() >Delete</ion-option-button>
<div class="inkomsten-content">
{{info.Description}} <p class="swiper"><strong>{{ info.Value | currency: "€" : 2}}</strong></p><p class="dateaddedtext"><br />Added: {{ info.Date | date:'dd-MM'}}</p>
</div>
</ion-item>
</ion-list>
</div>
<!-- Uitgiften lijst-->
<div ng-show="shouldShowUitgiften.checked" >
<ion-list >
<div class="item item-divider">
<p class="dividerclass">Uitgiften</p>
</div>
<ion-item ng-repeat="info in uitgiften" id="cat">
<ion-option-button class="button-dark" ng-click=Spliceuitgiften($index);startAgain()>Delete</ion-option-button>
{{ info.Description }} <p class="swiper"><strong>{{info.Value | currency: "€" : 2}} </strong></p><p class="dateaddedtext"><br />Added: {{ info.Date | date:'dd-MM'}}</p>
</ion-item>
</ion-list>
</div>
<div class="item item-divider">
<p class="dividerclass">Uitkomst</p>
</div>
<div class="list list-inset">
<div class="item">
<p>Uw rest saldo is: {{endOutcome}} </p>
<strong>Maand: {{ info.date | date:'MM' }}</strong>
<p>{{Cate}}</p>
</div>
</div>
</ion-content>
</script>
Your help would be really appreciated. :)
Thanks in advance!
EDIT 10:17 19-01-2016
All of my templates are stored in ~/templates
I think you suggest I would change the url to url:'/templates' and then t the templateUrl to templateUrl:'/overzicht' right?
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tabs',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.toevoegen', {
url: '/toevoegen',
views: {
'toevoegen': {
templateUrl: 'templates/toevoegen.html',
controller: 'TodoCtrl'
}
}
})
.state('tab.overzicht', {
url: '/overzicht',
views: {
'tabs-overzicht': {
templateUrl: 'templates/overzicht.html',
controller: 'TodoCtrl'
}
}
})
.state('tab.settings', {
url: '/settings',
templateurl: 'templates/settings.html',
controller: 'SettingsCtrl'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
Related
I have a custom dircetive "3-test-directive" which I want to call to display a text. When I use this directive in the page partial-home.html, it does not diaplay me with any text from the directive(it seems the directive did not work).
When I use the same code <3-test-directive/> inside of index.htm, the directive is correctly parsed. Why did not the one with the partial-home.html did not work and how can I fix this ?
Demo for this code : https://plnkr.co/edit/wy5gkUlXmbRpyrdqwHwd?p=preview
index.html
<!-- CSS (load bootstrap) -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
.navbar { border-radius:0; }
</style>
<!-- JS (load angular, ui-router, and our custom js file) -->
<script src="https://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app to our site -->
<body ng-app="routerApp">
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
<!-- MAIN CONTENT -->
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div class="container">
<div ui-view></div>
</div>
<div class="text-center">
<p>A tutorial by scotch.io</p>
<p>View the tutorial: AngularJS Routing using UI-Router</p>
</div>
</body>
</html>
app.js
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
// nested list with custom controller
.state('home.list', {
url: '/list',
templateUrl: 'partial-home-list.html',
controller: function($scope) {
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
})
// nested list with just some random string data
.state('home.paragraph', {
url: '/paragraph',
template: 'I could sure use a drink right now.'
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
.state('about', {
url: '/about',
views: {
'': { templateUrl: 'partial-about.html' },
'columnOne#about': { template: 'Look I am a column!' },
'columnTwo#about': {
templateUrl: 'table-data.html',
controller: 'scotchController'
}
}
});
});
routerApp.controller('scotchController', function($scope) {
$scope.message = 'test';
$scope.scotches = [
{
name: 'Macallan 12',
price: 50
},
{
name: 'Chivas Regal Royal Salute',
price: 10000
},
{
name: 'Glenfiddich 1937',
price: 20000
}
];
});
You can't include scripts in templates...they get stripped out.
Just register the directive in your js file
var routerApp = angular.module('routerApp', ['ui.router'])
.directive("w3TestDirective", function() {
return {
restrict:'E',
template : "<h1>Made by a directive!</h1>"
};
})
DEMO
I began following a tutorial to AngularJs today, but implementing something slightly different, now I'm stuck, seems that Angular is not recognizing the inline template "home".
P.S: To run this locally on chrome I had to install a webserver.
angular.module('little_tweet', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
})
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}])
.factory('posts', [function() {
var o = { posts: []};
return o;
}])
.controller('MainCtrl', ['$scope', 'posts', function($scope, posts){
$scope.posts = posts.posts;
$scope.current_user = 'me';
$scope.addPost = function() {
if(!$scope.message || $scope.message === '') { return; }
$scope.posts.push({
user: $scope.current_user,
message: $scope.message,
time: new Date()
});
$scope.message = '';
};
}])
.controller('PostsCtrl', ['$scope', '$stateParams', 'posts', function($scope, $stateParams, posts) {
$scope.post = posts.posts[$stateParams.id];
}]);
<html>
<head>
<title>Little Tweet</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="app.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="little_tweet">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
<div class="page-header">
<h1>Little Tweet</h1>
</div>
<div ng-repeat="post in posts">
<span style="font-size:20px; margin-left:10px;">
{{{post.user}}: {{post.message}} at {{post.time}}
</span>
</div>
<form ng-submit="addPost()"
style="margin-top:30px;">
<h3>Add a new post</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Message"
ng-model="message"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</div>
</div>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Little tweet</h1>
</div>
<!-- rest of template -->
</script>
</body>
</html>
Remove the / from template url in routes.
EDIT
there is an extra { in {{{post.user}}: {{post.message}} at {{post.time}}.
When i run my ionic / angular mobile app on my iphone 4 with ios 7 i get this error when i click a navigation link in the side menu, and it blocks the rest of the app from running
typeerror: 'null' is not an object (evaluating 'content.offsetx')
anyone ever get this before?
heres some code but I'm not sure if it will help
// 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'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'arvak.forms', 'angular-locker', 'ngSlider', 'arvak.configs', 'widgets.camera', 'widgets.signature', 'ngCordova', 'widgets.barcodeScanner' ])
.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) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
//iOS 8 bug
//http://forum.ionicframework.com/t/click-a-input-field-whole-app-jumps-down-and-back-to-the-original-place/10876/15
if(window.cordova && window.cordova.plugins.Keyboard) {
window.cordova.plugins.Keyboard.disableScroll(true);
}
});
})
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
//$locationProvider.html5Mode(true);
//$urlRouterProvider.when('', '/');
$stateProvider
.state('index', {
url: '/',
templateUrl: 'index.html'
})
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.search', {
url: "/search",
views: {
'menuContent': {
templateUrl: "templates/search.html",
controller: 'SearchController'
}
}
})
.state('app.form', {
url: "/forms",
views: {
'menuContent': {
templateUrl: "js/forms/templates/forms/formWrapper.html",
controller: 'FormsController'
}
}
})
.state('app.browse', {
url: "/browse",
views: {
'menuContent': {
templateUrl: "templates/browse.html",
controller: 'BrowseController'
}
}
})
.state('app.playlists', {
url: "/playlists",
views: {
'menuContent': {
templateUrl: "templates/playlists.html",
controller: 'PlaylistsCtrl'
}
}
})
.state('app.single', {
url: "/playlists/:playlistId",
views: {
'menuContent': {
templateUrl: "templates/playlist.html",
controller: 'PlaylistCtrl'
}
}
})
.state('app.camera', {
url: "/camera",
views: {
'menuContent': {
templateUrl: "templates/camera.html"
//controller: 'CameraControler'
}
}
})
.state('app.signature', {
url: "/signature",
views: {
'menuContent': {
templateUrl: "templates/signature.html"
//controller: 'CameraControler'
}
}
})
.state('app.barcode', {
url: "/barcode",
views: {
'menuContent': {
templateUrl: "templates/barcode.html"
//controller: 'CameraControler'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/forms');
});
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</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-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item nav-clear menu-close ng-click="login()">
Login
</ion-item>
<ion-item nav-clear menu-close href="#/app/search">
Search
</ion-item>
<ion-item nav-clear menu-close href="#/app/forms">
Form
</ion-item>
<ion-item nav-clear menu-close href="#/app/playlists">
Tasks
</ion-item>
<ion-item nav-clear menu-close href="#/app/camera">
Camera
</ion-item>
<ion-item nav-clear menu-close href="#/app/signature">
signature
</ion-item>
<ion-item nav-clear menu-close href="#/app/barcode">
barcode scanner
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<!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="lib/ng-slider/css/ng-slider.min.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>
<script src="lib/jquery/jquery-1.11.2.min.js"></script>
<script src="lib/angular-locker.js"></script>
<script src="lib/angular.ng-modules.js"></script>
<script src="lib/cross-storage/client.js"></script>
<script src="lib/lodash/lodash.js"></script>
<script src="lib/moment/moment.js"></script>
<script src="lib/bootstrap/dateTimePicker.js"></script>
<script src="lib/ng-slider/js/ng-slider.min.js"></script>
<!-- bower installs -->
<script src="lib/ng-cordova.min.js"></script>
<script src="lib/signature_pad.min.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/configs/configs.js"></script>
<script src="js/forms/forms.js"></script>
<script src="js/forms/directives/formDirective.js"></script>
<script src="js/forms/directives/fieldDirective.js"></script>
<script src="js/forms/directives/fields/fancySelect.js"></script>
<script src="js/forms/directives/validation/validationDirectives.js"></script>
<script src="js/forms/directives/validation/maxLengthValidator.js"></script>
<script src="js/common/directives/signatureDirective.js"></script>
<script src="js/forms/directives/sections/formSection.js"></script>
<script src="js/forms/services/formsService.js"></script>
<script src="js/forms/controllers/formsController.js"></script>
<script src="js/common/directives/cameraDirective.js"></script>
<script src="js/common/controllers/cameraController.js"></script>
<script src="js/common/controllers/signatureController.js"></script>
<script src="js/common/controllers/barcodeController.js"></script>
<!-- BMA: This has to be last script! -->
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view class="slide-left-right"></ion-nav-view>
</body>
</html>
I am new to the ionic framework and was trying to achieve using the tabs component on a side menu page which works fine but the navigation animations from page to page with the slide-left-right animation declaration don't work.
for e.g.
there is a base state (app) which holds the side menu code
.state('app', {
url: '/app',
abstract: true,
templateUrl: "templates/menu.html",
controller: "appController"
})
and its loaded into
<body>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
...
side menu pages are loaded with the parent (app.pageOne, app.pageTwo etc)
Login and register pages are loaded at the root so is no need to include a side menu (login, register etc)
I created a tabs template to use on a side menu page with another base state for the tabs
.state('app.tabs', {
url: '/tab',
abstract: true,
views: {
'menuContent' :{
templateUrl: "templates/tabs.html"
}
}
})
and is loaded in the side menu view
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
Now if I have a page 'app.pageOne' and navigate to 'app.pageTwo' the slide animations works as expected.
But if I'm on a tab page 'app.tabs.home' and click a link to go to 'app.pageTwo' the nav-bar don't update nor is there any animation transition.
I'm aware it looks like a parent child issue but I just can't solve it, any ideas?
state are as follows eg
login
register
app ____page1
|____page2
|____Tabs
|____Home
|____Contact etc
page1 animation to page2 works fine
Home to page2 doesn't animate (It just loads straight away)
Hope that makes more sense.
check this url http://codepen.io/calendee/pen/JdtuG?editors=101
it works for me :)
html
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="http://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/0.9.27/js/ionic.bundle.min.js"></script>
</head>
<body>
<!-- ALL VIEW STATES LOADED IN HERE -->
<ion-nav-view></ion-nav-view>
<script id="entry.html" type="text/ng-template">
<ion-nav-bar animation="nav-title-slide-ios7"
type="bar-positive"
back-button-type="button-icon"
back-button-icon="ion-ios7-arrow-back">
</ion-nav-bar>
<ion-view title="{{navTitle}}" class="bubble-background">
<ion-content has-header="true" padding="true">
<h1>Entry Page!</h1>
<a class="button button-positive" ng-click="signIn()" ui-sref="main.home">Sign In</a>
</ion-content>
</ion-view>
</script>
<script id="tabs.html" type="text/ng-template">
<ion-view title="{{navTitle}}" left-buttons="leftButtons">
<ion-tabs tabs-type="tabs-icon-only">
<ion-tab title="Tab 1" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
<ion-content has-header="true" padding="true">
<h2>Tab 1 Content</h2>
</ion-content>
</ion-tab>
<ion-tab title="Tab 2" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
<ion-content has-header="true" padding="true">
<h2>Tab 2 Content</h2>
</ion-content>
</ion-tab>
<ion-tab title="Tab 3" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
<ion-content has-header="true" padding="true">
<h2>Tab 3 Content</h2>
</ion-content>
</ion-tab>
</ion-tabs>
</ion-view>
</script>
<script id="mainContainer.html" type="text/ng-template">
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar type="bar-positive"
back-button-type="button-icon"
back-button-icon="ion-ios7-arrow-back"
animation="nav-title-slide-ios7"
>
</ion-nav-bar>
<ion-nav-view name="main"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-assertive">
<div class="title">Side Menu</div>
</header>
<ion-content has-header="true">
<ul class="list">
<a ui-sref="entry" class="item">Back To Entry Page</a>
<a ui-sref="main.home" class="item" ng-click="toggleMenu()">Home</a>
<a ui-sref="main.tabs" class="item" ng-click="toggleMenu()">Tabs</a>
</ul>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="home.html" type="text/ng-template">
<ion-view title="{{navTitle}}" left-buttons="leftButtons">
<ion-content has-header="true" padding="true">
<h1>Home Page!</h1>
<a ui-sref="main.info" class="button button-positive">Info</a>
</ion-content>
</ion-view>
</script>
<script id="info.html" type="text/ng-template">
<ion-view title="{{navTitle}}" left-buttons="leftButtons">
<ion-content has-header="true" padding="true">
<h1>Info Page!</h1>
</ion-content>
</ion-view>
</script>
</body>
</html>
javascript
angular.module('ionicApp', ['ionic'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('entry', {
url : '/entry',
templateUrl : 'entry.html',
controller : 'EntryPageController'
})
.state('main', {
url : '/main',
templateUrl : 'mainContainer.html',
abstract : true,
controller : 'MainController'
})
.state('main.home', {
url: '/home',
views: {
'main': {
templateUrl: 'home.html',
controller : 'HomePageController'
}
}
})
.state('main.info', {
url: '/info',
views: {
'main': {
templateUrl: 'info.html',
controller : 'InfoPageController'
}
}
})
.state('main.tabs', {
url: '/tabs',
views: {
'main': {
templateUrl: 'tabs.html',
controller : 'TabsPageController'
}
}
})
$urlRouterProvider.otherwise('/entry');
}])
.controller('MainController', [ '$scope', function($scope) {
$scope.toggleMenu = function() {
$scope.sideMenuController.toggleLeft();
}
}])
.controller('EntryPageController', [ '$scope', '$state', function($scope, $state) {
$scope.navTitle = 'Entry Page';
$scope.signIn = function() {
$state.go('main.home');
}
}])
.controller('HomePageController', [ '$scope', '$state', function($scope, $state) {
$scope.navTitle = 'Home Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function(e) {
$scope.toggleMenu();
}
}];
}])
.controller('InfoPageController', [ '$scope', '$state', function($scope, $state) {
$scope.navTitle = 'Info Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function(e) {
$scope.toggleMenu();
}
}];
}])
.controller('TabsPageController', [ '$scope', '$state', function($scope, $state) {
$scope.navTitle = 'Tab Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function(e) {
$scope.toggleMenu();
}
}];
}])
it took some tweaks but finally worked on my scenario
The UI-Router docs shows that you can use dots in route name:
<!-- partials/state1.html -->
<h1>State 1</h1>
<hr/>
<a ui-sref="state1.list">Show List</a>
<div ui-view></div>
But however in my app this doesn't work. This is an example that worked fine until I changed client to client.ts everywhere:
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>AngularJS: UI-Router Quick Start</title>
<!-- Bootstrap CSS -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" ui-sref="index">Quick Start</a>
<ul class="nav">
<li><a ui-sref="index">Home</a></li>
<li><a ui-sref="clien.ts">Clients</a></li>
<li><a ui-sref="route1">Route 1</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="span6">
<div class="well" ui-view=""></div>
</div>
<div class="span6">
<div class="well" ui-view="viewB"></div>
</div>
</div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<!-- App Script -->
<script>
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider){
$stateProvider
.state('index', {
url: "",
views: {
"": {
template: "index.viewA-index"
},
"viewB": {
template: "index.viewB"
}
}
})
.state('route1', {
url: "/route1",
views: {
"": {
template: "route1.viewA-route1"
},
"viewB": {
template: "route1.viewB"
}
}
})
.state('clien.ts', {
url: "/clients",
views: {
"viewB": {
template: "clients.viewA-route2"
},
"": {
controller: function($scope, ClientService) {
console.log('Controller code being run');
$scope.clients = ClientService.clientList();
},
templateUrl: 'client-list-template.html'
}
}
})
})
.service('ClientService', function() {
this.clientList = function() {
clients = [{'name': 'Acme Food', 'description': 'Makers of fine food'},
{'name': 'Dog Biscuits Inc', 'description': 'Cruncy creations for canines'},
{'name': 'Parrot treats Ltd', 'description': 'Puveyors of bird food'},
{'name': 'Pond supplies', 'description': 'Sell fish and gravel'}];
return(clients);
}
});
</script>
</body>
</html>
Plunker here: http://plnkr.co/edit/ZD7WlC9aKzpwte9dVMxC?p=preview
As you can see the link can't be clicked :/
What you need to do is add an abstract state for clien in that case.
Here's the plunkr, with the added state: plunkr
Whenever you define states with the dot. You still need to at least define the abstract state for the child. In your case for clien.
Also something from the docs
If you register only a single state, like contacts.list, you MUST define a state called contacts at some point, or else no states will be registered. The state contacts.list will get queued until contacts is defined. You will not see any errors if you do this, so be careful that you define the parent in order for the child to get properly registered.