errors
controllers.js:6 Uncaught SyntaxError: Unexpected token (
ionic.bundle.js:26794 Error: [ng:areq] Argument 'MenuCtrl' is not a function, got undefined
I am working to create an cross platform app with help of Ionic framework using word press as back end, Following are the files with codes
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/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/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<!-- Cordova is bootstrapped by ionic-platform-web-client, uncomment this if you remove ionic-platform-web-client... -->
<!-- <script src="cordova.js"></script> -->
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view>
</ion-nav-view>
</body>
</html>
app.js
// 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('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'templates/menu.html',
controller: 'MenuCtrl'
})
.state('main.contentRecent', {
url: '/contentRecent',
templateUrl: 'templates/menuContent.html',
controller: 'MenuCtrl'
})
.state('main.postDetail', {
url: '/postDetail',
templateUrl: 'templates/postDetail.html',
controller: 'PostCtrl'
});
$urlRouterProvider.otherwise('/main/contentRecent');
})
Controllers.js
angular.module('starter')
.controller( 'MenuCtrl', function ($http, $scope){
$scope.categories = [];
$http.get("http://bijay.sahikura.com/api/get_category_index/").t
function(data){
$scope.categories = data.data.categories;
console.log(data);
}, function ( err){
console.log(err);
}
})
.controller('PostCtrl', function() {
//hello
})
Menu.html
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-view>
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title"> खुला सरकार </h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="category in categories" menu-close href ="#">
<span> {{category.title}} </span> <span class="badge badge-assertiv"> १</span>
category.post_count}}</span>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
It looks like you want to reuse the same controller within your config as well as define a controller 'MenuCtrl' that is visible within the html in the app. In that case you are better off defining the function separately and reusing the function name wherever you need that function. For eg.
function menuCtrlFunc(http, scope) {
$scope.categories = [];
// other stuff
}
angular.module('starter').controller('MenuCtrl', menuCtrlFunc);
angular.module('starter').config(
//....
//....
controller: menuCtrlFunc,
);
HTH
Related
I have had a look through SO and nothing has helped.
This is my app.js
var app = angular.module("qMainModule", ["ngRoute"])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl: 'templates/anonHome/anonHome.html',
controller: 'templates/anonHome/anonHomeController'
})
.when("/about", {
templateUrl: 'templates/anonHome/anonAbout.html',
controller: 'templates/anonHome/anonAboutController'
})
.when("/services", {
templateUrl: 'templates/anonHome/anonServices.html',
controller: '/templates/anonHome/anonServicesController'
})
.when("/contact", {
templateUrl: 'templates/anonHome/anonContact.html',
controller: '/templates/anonHome/anonContactController'
})
.when("/register", {
templateUrl: 'templates/anonHome/anonRegister.html',
controller: '/templates/anonHome/anonRegisterController'
})
.when("/login", {
templateUrl: 'templates/anonHome/anonLogin.html',
controller: '/templates/anonHome/anonLoginController'
})
$locationProvider.html5Mode(true);
})
app.controller("qMainController", function ($scope) {
$scope.Title = " Welcome to Qiao";
$scope.qNavigationTemplatePath = "/templates/topMenu/anonTopNavigation.html";
$scope.copyrightMessage = "Qiao ";
$scope.copyrightYear = new Date();
});
The routing works as expected and the partial templates are being shown but the partial templates controllers are not being recognised as a function.
The Layout Template looks like this
<!DOCTYPE html>
<html ng-app="qMainModule">
<head ng-controller="qMainController">
<base href="/" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Qiao :: {{Title}}</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="../css/modern-business.css" rel="stylesheet" />
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="/scripts/angular.js"></script>
<script src="../scripts/angular-route.js"></script>
<script src="/app/app.js"></script>
<script src="templates/anonHome/anonHomeController.js"></script>
<!-- <link href="../styles/qiao.css" rel="stylesheet" /> -->
</head>
<body ng-controller="qMainController">
<div ng-include="qNavigationTemplatePath">
</div>
<!-- Page Content -->
<div class="container">
<ng-view></ng-view>
</div>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12" ng-controller="qMainController">
Copyright © {{copyrightMessage}} {{copyrightYear | date:'yyyy'}}
</div>
</div>
</footer>
<div >
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</div>
</body>
</html>
The partial template looks like this:
<script src="anonHomeController.js"></script>
<div ng-controller="anonHomeController">
<h1>{{Title}}</h1>
</div>
and its controller is this
function anonHomeController($scope) {
$scope.Title = " Welcome to Qiao";
$scope.qNavigationTemplatePath = "/templates/topMenu/anonTopNavigation.html";
$scope.copyrightMessage = "Qiao ";
$scope.copyrightYear = new Date();
};
The Question: How do I get Angular to recognise and use the partial template's controller?
While defining a controller, don't use any directory paths.
From the docs - https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
controller – {(string|Function)=} – Controller fn that should be associated with newly created scope or the name of a registered controller if passed as a string.
Note that the registered controller never has the entire path, it is the function definition itself or the function's name (a string). You may need module names, if you have exported like that, but that's different from a directory path.
All you need is just use <script> tags in index.html, which will include all your functions. Now if your functions are just plain javascript, and you don't intend using angular.module('app').controller there, use it in the app.js, Just angular.module('app').controller('anonHomeController', anonHomeController); Note that your definition can still remain in the Javascript file /some/path/totemplate/anonHomeController.js. I suggest you try that and see if it works.
app.js
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl: 'templates/main/main.html',
controller: 'MainCtrl'
})
index.html
<script src="controllers.js"></script>
controllers.js
function MainCtrl ($scope) {
$scope.name = 'World';
}
A working plnkr here
You have created your controller for each view as a regular JS function, which is incorrect. It should be like
app.controller("anonHomeController", function ($scope) {
$scope.Title = " Welcome to Qiao";
// rest of the controller code
});
and the file should be anonHomeController.js at the path you have defined in the config. you also do not need to include the scipt tag in the header of the view. Check for some example here
You don't need to add complete path in your app.js for defining controllers.
If you're controllers are defined in the same file, then this should do the job:
$routeProvider
.when("/", {
templateUrl: 'templates/anonHome/anonHome.html',
controller: 'xyzController'
});
app.controller("xyzController", function ($scope) {
// controller function here
});
If you want your controllers to be in an external file, you'll have to do the following:
1. Define the controllers module:
angular.module('app.controllers', [])
.controller("homeController", function(){....})
Name this file as controllers.js
2. Now your main app.js should include this:
angular.module('app', [
'app.controllers',
])
Include controllers.js in your main html file
I am developing an Ionic based Android app. Here is the HTML markup:
<!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">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<link href="css/ionic.app.css" rel="stylesheet">
<script src="js/app.js"></script>
</head>
<body ng-app="app">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content>
<p>This is Page 1</p>
<buton class="button button-positive" ng-click="gotoNextPage()">Go to Page 2</button>
</ion-content>
</ion-view>
</script>
<script id="page2.html" type="text/ng-template">
<ion-view view-title="page2">
<ion-content>
<p>this is page 2</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
...and following is the AngularJS code:
var app = angular.module('app', ['ionic', 'ui.router']);
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
});
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url: '/',
templateUrl: 'home.html',
controller: 'HomeCtrl'
})
.state('page2', {
url: '/page2',
templateUrl: 'page2.html',
controller: 'Page2Ctrl'
});
$urlRouterProvider.otherwise('/');
});
app.controller('HomeCtrl', function($scope, $state) {
$scope.gotoNextPage = function() {
$state.go('page2');
};
});
app.controller('Page2Ctrl', function($scope, $ionicHistory) {
alert('hi');
});
Now, whenever I click on Go To page 2 button, the URL changes from
http://localhost/sample/index.html# to http://localhost/sample/index.html#/page2, but the page doesn't navigate, and if I type the URL manually the content of page 2 is not shown.
You can also work the navigation in HTML with the href
For example
<a class="button button-positive" href="#/page2">Go to Page 2</a>
Ok then I have made a codepen. I just changed the id to <script id="templates/home.html" type="text/ng-template"> and in the route also for both routes and pages and its working but I cannot explain why. Someone might help with explanation http://codepen.io/nabinkumarn/pen/PZgMwg.
Update:
codepen is working without the changing the id also. You might be using older ionic lib and ionicHistory might be undefined.
Use $location instead of $state:
HTML
<button class="button button-positive" ng-click="gotoNextPage('/page2')">Go to Page 2</button>
JS
app.controller('HomeCtrl', function ($scope, $location) {
$scope.gotoNextPage = function (path) {
$location.path("/page2");
}
};
Also, it's cleaner to move each view into it's own html file. So your directory structure could look like this:
www/
--- index.html
--- templates/
------- home.html
------- page2.html
Your index.html body would then be:
<body ng-app="app">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
And your page1.html can be:
<ion-content>
<p>This is Page 1</p>
<buton class="button button-positive" ng-click="gotoNextPage('/page2')">Go to Page 2</button>
</ion-content>
And page2.html:
<ion-content>
<p>this is page 2</p>
</ion-content>
In this case, your states would look like:
.state('home', {
url: '/',
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
})
.state('page2', {
url: '/page2',
templateUrl: 'templates/page2.html',
controller: 'Page2Ctrl'
});
I am new to AngularJs and Ionic, I am trying to follow this example to create simple app but it is just showing blank screen and there is no error on console log.
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/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/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-app="bloggerDemo">
<ion-pane>
<ion-nav-bar class="bar-positive"></ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-pane>
</body>
</html>
latestPosts.html
<ion-view title="Latest Posts">
<ion-content>
<ion-list>
<ion-item ng-repeat="latestPost in latestPosts" class="item item-icon-right" sref="latestPosts.singlePost({post: $index})">
<span>{{latestPost.title}}</span>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
singlePost.html
<ion-view title="Single Post">
<ion-content padding='true'>
<h1>{{post.title}}</h1>
<section>{{post.description}}</section>
</ion-content>
</ion-view>
app.js
var app = angular.module('bloggerDemo', ['ionic'])
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/latestPosts')
$stateProvider.state('latestPosts', {
abstract: true,
url: '/latestPosts',
template: '<ion-nav-view></ion-nav-view>'
})
$stateProvider.state('latestPosts.index', {
url: '/latestPosts',
templateUrl: 'templates/latestPosts.html',
controller: 'PostsCtrl'
})
$stateProvider.state('latestPosts.singlePost', {
url: '/:singlePost',
templateUrl: 'templates/singlePost.html',
controller: 'SinglePostCtrl',
resolve: {
singlePost: function ($stateParams, PostService) {
return PostService.getPost($stateParams.post)
}
}
})
})
app.controller('PostsCtrl', function ($scope, PostService) {
$scope.latestPosts = PostService.latestPosts
})
app.controller('PostCtrl', function ($scope, singlePost) {
$scope.singlePost = singlePost
})
app.factory('PostService', function () {
var posts = [
{
title: 'lkad alkjdflak dfkljad f alkdsjf al',
description: 'adflkajd fjad faldfj aldkjf lkdfj lakdj flaksd flkds flksdj flkadlkfkhaghoiahd fkasdjkasdjfkl ajf sdjfalksdj falj falkf '
},
{
title: 'lkad alkjdflak dfkljad f alkdsjf al',
description: 'adflkajd fjad faldfj aldkjf lkdfj lakdj flaksd flkds flksdj flkadlkfkhaghoiahd fkasdjkasdjfkl ajf sdjfalksdj falj falkf '
}
];
return {
latestPosts: posts,
getPost(function (post) {
return latestPosts[post]
})
}
})
try changing this:
<ion-list>
<ion-item ng-repeat="latestPost in latestPosts" class="item item-icon-right" sref="latestPosts.singlePost({post: $index})">
<span>{{latestPost.title}}</span>
</ion-item>
</ion-list>
for this:
<ion-list>
<ion-item ng-repeat="latestPost in latestPosts" class="item item-icon-right">
<a ui-sref="latestPosts.singlePost({post: latestPost.post_id })">
{{latestPost.title}}
</a>
</ion-item>
</ion-list>
Hope this Help you...
after I read your code, I think I found the problem exist in your app.js
change this:
$stateProvider.state('latestPosts', {
abstract: true,
url: '/latestPosts',
template: '<ion-nav-view></ion-nav-view>'
})
to this:
$stateProvider.state('latestPosts', {
abstract: true,
url: '/latestPosts',
template: "/templates.index.html"
})
It is essential to note that the abstract state always point to where the <ion-nav-view> exist.
Tell me if it works, Happy Coding.
I am currently learning ionic and i am trying to create a basic app. My problem is when i click on the links in the app it doesn't change to the template in the link it only changes the URL.
<!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/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/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
</body>
</html>
app.js
angular.module('starter', ['ionic', 'starter.controllers'])
.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();
}
});
})
// states for each page
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/app');
$stateProvider
// main page that first loads, select region page
.state('app', {
url: '/app',
templateUrl: 'templates/regions.html',
controller: 'regionCTRL'
})
// EU page
.state('app.EU', {
url: '/EU',
views: {
'Regions': {
templateUrl: 'templates/EU.html',
controller: 'APICtrl'
}
}
})
// USCAN page
.state('app.USCAN', {
url: '/USCAN',
views: {
'Regions': {
templateUrl: 'templates/USCAN.html',
controller: 'APICtrl'
}
}
})
})
regions.html template
<!-- user can select which region they want to see -->
<ion-view view-title="Regions">
<ion-content>
<ion-list id="item">
<ion-item href="#/app/EU">
<p>EU</p>
</ion-item>
<ion-item href="#">
<p>ASPAC</p>
</ion-item>
<ion-item href="#/app/USCAN">
<p>USCAN</p>
</ion-item>
<ion-item href="#">
<p>EAGM</p>
</ion-item>
<ion-item href="#">
<p>LATAM</p>
</ion-item>
<ion-item href="#">
<p>CHINA</p>
</ion-item>
<ion-item href="#">
<p>INDIA</p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
To change the state, the ui-sref directive is the correct way to go:
<ion-item ui-sref="/app/EU">
<p>EU</p>
</ion-item>
Few days back i had pushed my code to my repository you can get the idea form here.
Routing Menue
Defined State
Its required that you keep your snippets inside ionic-content like i did here
<ion-view title="courses" hide-back-button="true" left-buttons="leftButtons" right-buttons="rightButtons"
hide-back-button="true">
<ion-content has-header="true" padding="true">
----your elements----
</ion-content >
i got a problem when i try my html.
and when i see on web element i got this error
"Cannot read property 'controller' of undefined"
this is my app.js
angular.module('underscore', [])
.factory('_', function() {
return window._; // assumes underscore has already been loaded on the page
});
// 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('your_app_name', [
'ionic',
'angularMoment',
'your_app_name.controllers',
'your_app_name.directives',
'your_app_name.filters',
'your_app_name.services',
'your_app_name.factories',
'your_app_name.config',
'your_app_name.views',
'underscore',
'ngMap',
'ngResource',
'ngCordova',
'slugifier',
'ionic.contrib.ui.tinderCards',
'youtube-embed'
])
.run(function($ionicPlatform, PushNotificationsService, $rootScope, $ionicConfig, $timeout) {
$ionicPlatform.on("deviceready", 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();
}
PushNotificationsService.register();
});
// This fixes transitions for transparent background views
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
if(toState.name.indexOf('auth.walkthrough') > -1)
{
// set transitions to android to avoid weird visual effect in the walkthrough transitions
$timeout(function(){
$ionicConfig.views.transition('android');
$ionicConfig.views.swipeBackEnabled(false);
console.log("setting transition to android and disabling swipe back");
}, 0);
}
});
$rootScope.$on("$stateChangeSuccess", function(event, toState, toParams, fromState, fromParams){
if(toState.name.indexOf('app.feeds-categories') > -1)
{
// Restore platform default transition. We are just hardcoding android transitions to auth views.
$ionicConfig.views.transition('platform');
// If it's ios, then enable swipe back again
if(ionic.Platform.isIOS())
{
$ionicConfig.views.swipeBackEnabled(true);
}
console.log("enabling swipe back and restoring transition to platform default", $ionicConfig.views.transition());
}
});
$ionicPlatform.on("resume", function(){
PushNotificationsService.register();
});
})
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$stateProvider
.state('head', {
url: "/head",
abstract: true,
templateUrl: "views/app/head.html",
controller: 'HeadCtrl'
})
.state('head.merchantlist', {
url: "/merchantslist",
views: {
'merchantsmenuContent': {
templateUrl: "views/app/merchant/merchantspec-list.html",
controller: "MerchantlistCtrl"
}
}
})
;
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/head/merchantslist');
});
this is my controller.js
angular.module('your_app_name.controllers', [])
.controller('HeadCtrl', function ($scope, $ionicConfig) {
})
.controller('MerchantlistCtrl', function ($scope) {
})
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">
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
<title></title>
<link href="css/ionic.app.css" rel="stylesheet">
<link href="lib/ionic-contrib-tinder-cards/ionic.tdcards.css" rel="stylesheet">
<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/angular-resource/angular-resource.min.js"></script>
<script src="lib/underscore/underscore-min.js"></script>
<script src="lib/ngmap/build/scripts/ng-map.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="lib/moment/min/moment.min.js"></script>
<script src="lib/angular-moment/angular-moment.min.js"></script>
<script src="lib/angular-slugify/dist/angular-slugify.min.js"></script>
<script src="lib/collide/collide.js"></script>
<script src="lib/ionic-contrib-tinder-cards/ionic.tdcards.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="lib/angular-youtube-mb/dist/angular-youtube-embed.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script src="js/factories.js"></script>
<script src="js/views.js"></script>
<script src="js/config.js"></script>
</head>
<body ng-app="your_app_name">
<ion-nav-view></ion-nav-view>
</body>
</html>
this is my head.html
<ion-nav-bar class="bar app-top-bar">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-bar>
<ion-nav-view name="merchantsmenuContent"></ion-nav-view>
and this is my merchants
<ion-view class="merchantspec-view">
<ion-nav-title>
<span>Restaurants</span>
</ion-nav-title>
<ion-content>
</ion-content>
</ion-view>
I see the problem.
my <ion-nav-bar> in head.html doesn't have a close
i forgot "/" on second <ion-nav-bar>