TFC.config(function($routeProvider){
$routeProvider
.when('/bookings', {
templateUrl: '/mybookings.html',
controller: 'accountCtrl'
})
.when('/credits', {
templateUrl: '/mycredits.html',
controller: 'myCreditsCtrl'
})
.when('/membership', {
templateUrl: 'membership.html',
controller: 'membershipCtrl'
})
.when('/profile', {
templateUrl: 'profile.html',
controller: 'profileCtrl'
})
.when('/invoices', {
templateUrl: 'invoice.html',
controller: 'invoiceCtrl'
})
.when('/team', {
templateUrl: 'team.html',
controller: 'teamCtrl'
})
.when('/benefits', {
templateUrl: 'benefits.html',
controller: 'benefitsCtrl'
})
.when('/refer', {
templateUrl: 'refer.html',
controller: 'referCtrl'
})
.when('/support', {
templateUrl: 'support.html',
controller: 'supportCtrl'
})
.when('/about', {
templateUrl: 'accountabout.html',
controller: 'accountAboutCtrl'
})
})
and this my html in which I am injecting views
<!DOCTYPE html>
<html ng-app="TFC">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Founder's Cafe</title>
<link href="https://fonts.googleapis.com/css?family=Lato:400,900" rel="stylesheet">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<section style="background: black;">
<div class="navbar navbar-default" style="position: static;">
<div class="navigation-wrapper">
<img src="assets/img/webLogo.png" alt="TFC Logo">
<ul class="custom-navbar nav navbar-nav">
<li class="about-link active">About Us</li>
<li>Facilities</li>
<li>Pricing</li>
<li>Events</li>
<li>Gallery</li>
<li><button type="button" class="btn btn-default btn-lg navbar-btn" name="button">LOGIN</button></li>
</ul>
<div class="ham-wrapper">
<div class="hambar-1"></div>
<div class="hambar-2"></div>
<div class="hambar-3"></div>
</div>
</div>
</div>
<div style="position: relative; height: 35em; overflow: hidden; background: url('http://www.planwallpaper.com/static/images/cool-wallpapers-hd-8087-8418-hd-wallpapers.jpg'); background-attachment: fixed;">
<div class="overlay"> </div>
</div>
</section>
<section>
<div class="account-wrapper">
<div class="account-items">
<div class="header">
<div class="user-image"><img src="" alt=""></div>
<div class="user-header">
<h3>{{user.name}}</h3>
<h4>heading</h4>
</div>
</div>
<div class="user-items">
<div class="item">
<div class="item-main">
<img src="assets/img/account/icn-booking.png" alt="">
<h5 class="item-name">My Booking</h5>
</div>
<div class="item-arrow"><img src="" alt=""></div>
</div>
<hr>
<div class="item">
<div class="item-main">
<img src="assets/img/account/icn-logout.png" alt="">
<h5 class="item-name">Logout</h5>
</div>
</div>
</div>
</div>
<div class="account-display">
<div ng-view=""></div>
</div>
</div>
</section>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script>
<script src="node_modules/angular/angular.min.js" charset="utf-8"></script>
<script src="node_modules/ng-dialog/js/ngDialog.min.js" charset="utf-8"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js" charset="utf-8"></script>
<script src="node_modules/jwt-decode/build/jwt-decode.min.js" charset="utf-8"></script>
<script src="assets/js/style.js" charset="utf-8"></script>
<script src="assets/js/app.js" charset="utf-8"></script>
</body>
</html>
the mybookings.html is in the root folder.
<div class="bookings-header">
<img src="assets/img/account/icn-booking.png" alt=""><h4>My Bookings</h4>
</div>
<div class="bookings-info-wrapper"></div>
<div class="bookings-info">
<h5>Coworking:</h5>
<div class="coworking-info">
<div></div>
<div>
<p>Dedicated Desk(Dec 1-Dec 30)</p>
</div>
</div>
</div>
the ng-view directive is inside div.account-display and as a test I am trying to show just the mybookings.html when user clicks on the my bookings list item which is inside the first div.item inside div.user-items
The ng-view isn't showing anything, nor am I getting any error. An interesting thing is that when I looked into the network tab of my dev console, mybookings.html is not mentioned in it.
My angular js and angular-route versions are 1.6.2. The jquery version is 3.1.1
Need help with this
i created demo and it seems to working fine. If you sure the html file paths are exist then other possible downfall might be version conflict.Check the angular route and angular version is compatible with each other.
<script data-require="angular.js#1.6.1" data-semver="1.4.9" src="https://code.angularjs.org/1.4.12/angular.js"></script>
<script data-require="angular-route#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-route.js"></script>
Edited
Routes in Angular 1.6 need to add ! when redirecting to state.
<h5 class="item-name">My Booking</h5>
Use <ng-view></ng-view> tag
instead of <div ng-view=""></div>
and also the default URL in route provider
.otherwise({
redirectTo: '/bookings'
})
For the mybookings.html file to load default, you have to specify the default url parameter in the route provider. This is the method for that. I hope this will fix your issue.
TFC.config(function($routeProvider){
$routeProvider
.when('/bookings', {
templateUrl: '/mybookings.html',
controller: 'accountCtrl'
})
....
.otherwise({
redirectTo: '/bookings'
})
})
now by default mybookings.html will load
Related
I am trying an application with AngularJS 1.0 but I am facing issues with routing. The route is not working at all. I can't see my templates being displayed inside ng-view. My code is as shown below.
package.json
"main": "server.js",
"dependencies": {
"angular": "^1.4.3",
"angular-route": "1.6.10",
"body-parser": "latest",
"ejs": "latest",
"express": "latest",
"fabric-ca-client": "^1.0.2",
"fabric-client": "^1.0.2",
"grpc": "1.11.0"
}
app.js
'use strict';
var app = angular.module('application', ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'client/index.html'
})
.when('/vault', {
templateUrl: 'client/vault.html'
})
.when('/store', {
templateUrl: 'client/store.html'
})
.when('/til', {
templateUrl: 'client/til.html'
})
.when('/order', {
templateUrl: 'client/order.html'
})
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>Demo Application</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- require jquery and bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="application" ng-controller="appController">
<header>
<div id="left_header">Demo Application</div>
</header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Store</li>
<li>About</li>
</ul>
</div>
</nav>
<div ng-view></div>
</html>
There are two more pages for store and about with only one tag in them.
I should be able to see the changes in the view part i.e. 'This is About page' but it is not being displayed.
I am referring to this URL
Any help would be appriciated.
Update-1
Added angular-route package but still not working.
Getting following error:
" Error: [$injector:modulerr] http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=application&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.3%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1"
Update-2
Entire console output, which shows some error but don't understand a bit of it. It has several warnings as well.
https://pastebin.com/j06ku3yG
Update-3
I didn't added the minified js files for angular-route in to my html and that was the reason I was getting issues. Further more the existing angular script in html page also had version mismatch.
I also corrected some issues with routes after this I faced recursion related issues (could see multiple pages within the same page) Had to make changes to routs.
Thank you all for helping :)
I have modified your code a bit to give you a basic working demo of your app. The routing required an angular-route.js script for 1.2+ AngularJS versions. For both scripts their versions must match. I decided to use 1.6.5. I also replaced bootstrap and jquery with ui.bootstrap - angularjs version.
Here is a working demo:
/* Use `ui.bootstrap` module instead of jQuery + Bootstrap */
var app = angular.module('application', ["ngRoute", "ui.bootstrap"]);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'client/index.html'
})
.when('/about', {
templateUrl: 'client/about.html'
})
.when('/store', {
templateUrl: 'client/store.html'
})
});
app.controller('appController', function($scope, $location) {
$scope.isActive = function(path) {
return path === $location.path();
}
});
<!DOCTYPE html>
<html>
<!-- Matching angular.js and angular-route.js versions -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div ng-app="application" ng-controller="appController">
<header ng-init="isNavCollapsed=true">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="isNavCollapsed = !isNavCollapsed">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
</div>
<div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
<ul class="nav navbar-nav navbar-left">
<li ng-class="{ active: isActive('/')}">Home</li>
<li ng-class="{ active: isActive('/store')}">Store</li>
<li ng-class="{ active: isActive('/about')}">About</li>
</ul>
</div>
</div>
</nav>
</header>
<div ng-view></div>
<!-- Separate files -->
<script type="text/ng-template" id="client/index.html">
index
</script>
<script type="text/ng-template" id="client/about.html">
about
</script>
<script type="text/ng-template" id="client/store.html">
store
</script>
</div>
</body>
</html>
First, you still needs to link the NgRoute from the angular-route.js.
Secondly, to link templates use href="#!store" instead of href="#store"
Here's a working example using angularjs 1.6.9
'use strict';
var app = angular.module('application', ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'home.html'
})
.when('/store', {
templateUrl: 'store.html'
})
.when('/about', {
templateUrl: 'about.html'
})
});
<!-- require jquery and bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<div ng-app="application" >
<script type="text/ng-template" id="home.html">
<div class="view">
<h2>home</h2>
</div>
</script>
<script type="text/ng-template" id="store.html">
<div class="view">
<h2>store</h2>
</div>
</script>
<script type="text/ng-template" id="about.html">
<div class="view">
<h2>about</h2>
</div>
</script>
<header>
<div id="left_header">Demo Application</div>
</header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Store</li>
<li>About</li>
</ul>
</div>
</nav>
<div ng-view></div>
</div>
I have a index page which is divided to 4 divs. What i m trying to do is when the user clicks on a link in the navigation bar, the template is loaded in the div. For example, if the user clicks on the ex1 then the first div in the html supposed to show the content of the template. Any ideas how can i do it ?
<body ng-controller="MainController">
<nav class="navbar navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div>
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('#ex1')}">Ex1</li>
<li ng-class="{ active: isActive('#ex2')}">Ex2</li>
<li ng-class="{ active: isActive('#ex3')}">Ex3</li>
<li ng-class="{ active: isActive('#ex4')}">Ex4</li>
</ul>
</div>
</div>
</nav>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<div ng-view>
</div>
<footer ng-include="'partials/footer.html'" style="position: fixed; bottom: 0"></footer>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="controllers/Ex1Ctrl.js"></script>
<script src="controllers/Ex2Ctrl.js"></script>
<script src="controllers/Ex3Ctrl.js"></script>
<script src="controllers/Ex4Ctrl.js"></script>
<script src="services/ex1Service.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
app.js
use strict';
// Declare app level module which depends on views, and components
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/ex1', {
templateUrl: 'partials/ex1.html',
controller: 'Ex1Ctrl'
});
$routeProvider.when('/ex2', {
templateUrl: 'partials/ex2.html',
controller: 'Ex2Ctrl'
});
$routeProvider.when('/ex3', {
templateUrl: 'partials/ex3.html',
controller: 'Ex3Ctrl'
});
$routeProvider.when('/ex4', {
templateUrl: 'partials/ex4.html',
controller: 'Ex4Ctrl'
});
$routeProvider.otherwise({
redirectTo : '/'
});
}]);
app.controller('MainController', ['$scope', function ($scope) {
}]);
Ex1 template
<div id = "ex1">
<div >click to see your lucky number<button class="btn btn-default" style="margin-left: 5px" ng-click="findRandom()">Click</button></div>
<div>{{random}}</div>
</div>
Ext1 controller
angular
.module('app')
.controller('Ex1Ctrl', ['$scope','Calculator', function ($scope,Calculator) {
$scope.findRandom = function(){
$scope.random=Calculator.number();
}
}]);
Currently your template will populate the <ng-view> view tag when you navigate to '/ext1'. If I understand you correctly you want the template contents to appear inside div1 when '/ext1' is navigated to...
Off the top of my head below code would achieve that by listening for the $routeUpdate event...
app.directive('luckyNumberGenerator', function(){
return {
templateUrl: '/path/to/the/template.html',
controller: function($scope, $location){
$scope.$on('$routeUpdate', function(){
$scope.showLuckyNumberGenerator = $location.path() === '/ext1';
});
}
}
});
... add an ng-show to your template...
<div id = "ex1" ng-show="showLuckyNumberGenerator">
<div >click to see your lucky number<button class="btn btn-default" style="margin-left: 5px" ng-click="findRandom()">Click</button></div>
<div>{{random}}</div>
</div>
.. and put the directive into the div.
<div id="div1">
<lucky-number-generator></lucky-number-generator>
</div>
It's worth noting that when you want to do any complex routing of panels and nested partial views you should look into using ui.router...
my code seems ok but i cannot view the html using angularjs (exercise "reader" in codecademy course")
according to my knowledge seems to be working but I am beginner so likely i have to do some tweaking
here my codes
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300,900' rel='stylesheet' type='text/css'>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
<script src="js/vendor/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>
<body ng-app="ReaderApp">
<div class="header">
<div class="container"> Reader </div>
</div>
<div class="main">
<div class="container">
<div ng-view></div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/BookshelfController.js"></script>
<script src="js/controllers/BookController.js"></script>
<script src="js/controllers/ChapterController.js"></script>
<!-- Services -->
<script src="js/services/books.js"></script>
</body>
</html>
the service
app.factory('books', ['$http', function($http) {
return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/books-api/books.json')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
the view (routed)
<div class="bookshelf row">
<!-- TODO: Loop through myBooks and display each one with this HTML -->
<div class="book col-md-3" ng-repeat="book in myBooks">
<a href="#/books/{{$index}}"> <img ng-src="{{ book.cover }}" />
<h3 class="title">{{ book.title }} </h3>
<p class="author"> {{ book.author }} </p>
</a>
</div>
</div>
controller
app.controller('BookshelfController', ['$scope','books', function($scope, books) {
books.success(function(data) {
$scope.myBooks = data;
});
}]);
and the module that create the app
var app = angular.module('ReaderApp', ['ngRoute ']);
app.config(function ($routeProvider) {
$routeProvider
.when('/books', {
controller: 'BookshelfController',
templateUrl: 'views/bookshelf.html'
})
.otherwise({
redirectTo: '/books'
});
});
thanks
Paolo
Typo in module dependency array.
var app = angular.module('ReaderApp', ['ngRoute ']);
^ remove this space!
I have a menu in _Adminlayout.cshtml and i define my Route in it , this is all i did in:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/Styles/ThirdParties/Glazzed/Main.css" rel="stylesheet" />
<link href="~/Content/Styles/GlazzedOverride.css" rel="stylesheet" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/Scripts/ThirdParties/Glazzed/Main.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/Scripts/ThirdParties/Angular.js"></script>
<script src="~/Scripts/Scripts/ThirdParties/AngularRoute.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
#DefineApp()
</head>
<body>
<div>
<div class="container">
<div class="col col-md-9 pull-left">
#RenderBody()
#*<ng-view></ng-view>*#
<div ng-view></div>
</div>
<div class="col col-md-2 bg1">
<ul class="main-nav" ng-controller="menuController">
<li ng-repeat="menuItem in menuItems" class="{{ menuItem.submenuItems && menuItem.submenuItems.length > 0 ? 'main-nav--collapsible' : '' }}">
<a class="main-nav__link" ng-href="{{ menuItem.url || 'javascript:void(0);' }}">
<span class="main-nav__icon"><i class="{{ menuItem.icon }}"></i></span>
{{ menuItem.title }}
</a>
<ul ng-if="menuItem.submenuItems && menuItem.submenuItems.length > 0" class="main-nav__submenu">
<li ng-repeat="submenuItem in menuItem.submenuItems"><span>{{ submenuItem.title }}</span></li>
</ul>
</li>
</ul>
</div>
</div>
and this is the script :
<script>
App.config(['$routeProvider', function ($routeProvider) {
debugger;
$routeProvider
.when('/Admin/GetProducts', {
templateUrl: '#Url.Action("GetProducts","Product")'
})
.otherwise({
redirectTo: '/'
});
}]);
App.controller("menuController", function ($scope) {
debugger;
$scope.menuItems = [
{
title: 'ProductList',
icon: 'pe-7f-check',
url: '#/Admin/GetProducts'
}
]});
</script>
</div>
#helper DefineApp()
{
<script>
var App = angular.module("app", ['ngRoute']);
</script>
}
but my route does not work, what is the problem?
You're mixing Angular routing which was designed for SPA's and you also have MVC routing which isn't for SPA's. You have both technologies essentially fighting each other.
If you want to use Angular routing or Angular is general, I would recommend that you stop having your ASP.NET MVC controllers from returning any Views except for maybe "Index.cshtml"
Hello I have a little bit of a problem that I have being trying to solve for 3 days now. It seems to be simple but I don't know what is giving me so much problems.
I have a main parent view that hold a viewA and viewB child views. I want to navigate from viewA to viewB and from viewB to viewA, but the problem is that i can navigate from viewA to viewB but not from viewB to viewA.
I have a working codepen at the bottom.
thi is my 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></title>
<link href="http://code.ionicframework.com/1.0.1/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.1/js/ionic.bundle.min.js"></script>
</head>
<body>
<ion-nav-view></ion-nav-view>
<script id="templates/main.html" type="text/ng-template">
<div class="bar bar-header bar-dark">
<h1 class="title">bar-dark</h1>
</div>
<ion-nav-view name="viewA"></ion-nav-view>
<ion-nav-view name="viewB"></ion-nav-view>
</script>
<script id="templates/viewA.html" type="text/ng-template">
<div style='padding-top: 45px'>
<div class="row">
<div class="col">
<a ui-sref="main.viewB" class="button button-stable">Go to view B</a>
</div>
</div>
</div>
</script>
<script id="templates/viewB.html" type="text/ng-template">
<div style='padding-top: 45px'>
<div class="row">
<div class="col">
<a ui-sref="main.viewA" class="button button-stable">Go to view A</a>
</div>
</div>
</div>
</script>
</body>
</html>
this is my javascript
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/main/viewA");
$stateProvider
.state('main', {
url:'/main',
abstract: true,
templateUrl: "templates/main.html"
})
.state('main.viewA', {
url: '/viewA',
views: {
'viewA': {
templateUrl: 'templates/viewA.html'
}
}
})
.state('main.viewB', {
url: '/viewB',
views: {
'viewB': {
templateUrl: 'templates/viewB.html'
}
}
})
})
codepen example
Few pointers...
You don't need to have multiple- and/or named ion-nav-views in your main template, one is sufficient. Second, bar bar-header bar-dark class and padding-top: 45px inline style pushed some of the elements out of the view (at least on my machine).
So working template could be following.
<body>
<ion-nav-view></ion-nav-view>
<script id="templates/main.html" type="text/ng-template">
<div>
<h1 class="title">parent view</h1>
<ion-nav-view></ion-nav-view>
</div>
</script>
<script id="templates/viewA.html" type="text/ng-template">
<div class="row">
<div class="col">
<a ui-sref="main.viewB" class="button button-stable">Go to view B</a>
</div>
</div>
</script>
<script id="templates/viewB.html" type="text/ng-template">
<div class="row">
<div class="col">
<a ui-sref="main.viewA" class="button button-stable">Go to view A</a>
</div>
</div>
</script>
</body>
And you are making your routing too complex, following will do.
$stateProvider
.state('main', {
url:'/main',
abstract: true,
templateUrl: "templates/main.html"
})
.state('main.viewA', {
url: '/viewA',
templateUrl: 'templates/viewA.html'
})
.state('main.viewB', {
url: '/viewB',
templateUrl: 'templates/viewB.html'
});