I want to build a hybrid mobile app with Ionic. Here is my first trial via plunker. As you can see, my plunker shows a blank page. I did inspect what's the problem, but still not found. My goal is to create a login page in first time my app starts, then users will be redirected into home-page.html. Since it's just example, I don't want any authentication code, I only need to have all those route/links work well.
Please take a look in my index.html, if I replace all those code within ...... with a normal HTML tags, it's displaying as normal.
Head section:
<script src="http://code.ionicframework.com/1.1.1/js/ionic.min.js"></script>
<script src="http://code.ionicframework.com/1.1.1/js/ionic.bundle.min.js"></script>
<link href="http://code.ionicframework.com/1.1.1/css/ionic.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet"/>
<script src="app.js"></script>
Body section
<script id="templates/login.htm" type="text/ng-template">
<ion-view ng-controller="LoginCtrl">
<ion-content>
<h1>Login page</h1>
<button type="button" class="btn btn-default" ng-click="logIn()">Login Press</button>
</ion-content>
</ion-view>
</script>
<script id="templates/home-page.htm" type="text/ng-template">
<ion-view>
<ion-content>
<h1>Home Page</h1>
</ion-content>
</ion-view>
</script>
In my app.js, I defined two states like this:
var app = angular.module('ionicApp', ['ionic']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login', {
url: "/login",
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
.state('home', {
url: "/home",
templateUrl: 'templates/home-page.html'
});
});
app.controller('LoginCtrl', function($scope, $state, $location) {
$scope.logIn = function() {
//$state.go('/home');
alert('Clicked');
};
});
Any solution will be appreciated. Thanks.
not sure why but it seams that your ng-templates are not found, you are getting 404 on 'templates/login.html'. When you are using $stateProvider you need to put ui-view to show/display your content. I have modify your plunker a little bit, move templates to a separate files and add ui-view, all it's working fine now, please check here.
Related
I am new to Angular JS and stuck in an issue...i dont know what is happening.Please help to fix it.
I have index file and app.js is connected ,app is using ngRoute...see code below.
var app = angular.module('routedapp',['ngRoute']);
//app.config("$routeProvider",function($routeProvider)) also tried this
app.config(function($routeProvider) {
$routeProvider.when("/",{
templateUrl: "views/home.html"
})
.when("/post",{
templateUrl: "views/post.html"
})
.when("/contact",{
templateUrl: "views/contact.html",
controller: "contactCtrl"
})
})
app.controller('contactCtrl', function($scope){
$scope.lalteen = function(){
console.log("clicked");
}
})
and have 4 pages... index.html , home.html , post.html and contact.html.
//index.html code
<html>
<head>
<title>Routed</title>
</head>
<body ng-app="routedapp" >
<div>welcome</div>
<div>
<p ng-click="lalteen()">click me</p>
</div>
<!-- views here-->
<div ng-view >
</div>
<script src="vendor/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
initially, when index.html page loaded it shows home.html content in view ,home.html has 3 links to home,post and contact page....when i click any one....it does not change view but keep changing url like:
http://localhost/route/#!/#%2F //for home <a> tag
http://localhost/route/#!/#contact //for contact <a> tag and other like that.
PS: following is structure of my content in post.html, home.html and contact.html looks like...
<div>This is post page</div>
<p><a href="#/">Home<a/></p><br>
<p>post</p><br>
<p>contact</p><br>
I am new...plz dnt mind my long explanition...thanks
UPDATE
OK, so I could figure out what you are trying to do and why your routing is not working.
First revert the change so you will have the link section as per your original format:
<div>This is post page</div>
<p><a href="#">Home<a/></p><br>
<p>post</p><br>
<p>contact</p><br>
And then in your script inject the $locationProvider service and set the default route prefix to an empty string.
app.config(function($routeProvider, $locationProvider) {
//note that this line does the magic ;)
$locationProvider.hashPrefix('');
//normal routing here
$routeProvider.when("/",{
templateUrl: "views/home.html"
})
.when("/post",{
templateUrl: "views/post.html"
})
.when("/contact",{
templateUrl: "views/contact.html",
controller: "contactCtrl"
})
})
Created a working plunker for you here.
At my angular app after I reload the page I get the empty shell html page not my home page as my expectation even when the url point to the home route http://localhost:8444/home.
Please point out what is wrong with my code ?
or what should i do to fix this behavior ?
the app at server side contain one cshtml page with ng-include tag
<!DOCTYPE html>
<html ng-app="app">
<head>
#Scripts.Render("~/bundles/scripts")
<base href="/">
<script type="text/javascript">
(function () {
'use strict';
var app = angular.module('app', ['ui.router']);
app.config(['$stateProvider', '$locationProvider', configurRoutes]);
function configurRoutes($stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state(
'home', {
url: '/home',
template: '<div>At Home Page</div>'
});
}
})();
</script>
</head>
<body>
<div>
<div ng-include="'/app/layout/shell.html'"></div>
</div>
</body>
</html>
shell.html
<div>
In the shell
<hr/>
<a ui-sref="home"> home </a>
<div ui-view></div>
here is the problem at first load I get the empty shell page, Notice that url pointing to home page
after click on go home it is working as expected
Update
after I moved the content of the shell.html to the cshtml it worked as expected but without ng-include
Try adding an otherwise('home') clause to your stateProvider
Good Day,
I'm trying to create an SPA with Angular. Here is my index.html page:
<!DOCTYPE html>
<html lang="en" ng-app="onlineApp">
<head>
<meta charset="UTF-8">
<title>Online</title>
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/mystyle.css">
<base href="/Client/">
</head>
<body ng-controller="mainController">
<div class="container"> <!--- This is the box login -->
<div ng-view></div>
</div>
<script src="components/angular/angular.js"></script>
<script src="components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
</body>
</html>
and here is app.js:
var onlineApp = angular.module('onlineApp', ['ngRoute']);
onlineApp.controller('mainController', function($scope) {
$scope.message = 'Test Message';
});
onlineApp.controller('signupController', function($scope) {
$scope.message = 'Sign up Message';
});
onlineApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
.when('/signup', {
templateUrl: 'pages/signup.html',
controller: 'signupController'
})
.otherwise({
redirectTo: '/'
});
// use the HTML 5 History API
$locationProvider.html5Mode(true);
});
My problem is: Inside the contents of the ng-view (home.html), I have a button. When I click the button, I want to go to a signup page as defined in the route handler and it's not working. I think the problem is "inside" the ng-view.
EDIT:
Here's a snippet of pages/home.html:
<div class="pull-right col-md-4">
<label class="pull-right col-md-12 create-monthly">Create a Monthly Parker Account</label>
<a id="btn-create" class="btn btn-primary" href="#signup" >
Create Account
</a>
</div>
When I click on the button, I want the contents of pages/home.html to be replaced with the contents of pages/signup.html
END EDIT:
All of the examples I see of ng-view being used is when the links are outside of the ng-view.
Can I change the contents of ng-view while I'm inside the ng-view itself? Or is there some sort of project that would allow me to do that.
TIA,
coson
you just have to change the location of the browser to change the route. i do not really understand your problem, probably you will have to rephrase it or post a little bit more code (from inside your ng-view)
potentially either a link of the form
Click me to switch
or a manual location change with the $location service (inject it to your controller)
$location.path("/signup");
should do the job. im not sure what you mean by links inside and outside of ng-view.
The nice thing about using ui-router is that you can treat your view changes as simple page redirects. i.e. you can use an anchor tag to redirect the browser to the specified url and ui-router will catch that before the page refreshes and just update your ui-view without refreshing the page.
Click this link to go to signup.
I am using angular-route.min.js and I have two designs for my navbar.
The First one is the landing page navbar that will appear first on my index.html.
The second navbar is when the user is routed to the /signin page.
I am unsure on how to go about this. I see a lot of different ways that this could be done, but none really that explain how I could change the entire header view when another route is chosen. They just show how to change the links that are contained inside of it. Like this Stack
how can I switch out the header when it is routed to the /signin page?
also, I am working with another person who is doing the backend with Django. That is why I changed the "{{ }}" to "[[ ]]".
var app = angular.module('app', ['ui.bootstrap', 'ngRoute']);
app.config(function($interpolateProvider, $routeProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
$routeProvider
.when('/', {
templateUrl: 'pages/LandingPage.html',
})
.when('/signin', {
templateUrl: 'pages/SignIn.html'
})
.when('/contact', {
templateUrl: 'pages/contact.html'
});
});
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-route.js">
</script>
</head>
<body>
<div ng-view></div>
</body>
</html>
I think ng-include directive could solve the situation you are facing.
In controller code.
.controller('HeaderCtrl', function($scope, $location) {
$scope.$on('$locationChangeSuccess', function(/* EDIT: remove params for jshint */) {
var path = $location.path();
//EDIT: cope with other path
$scope.templateUrl = (path==='/signin' || path==='/contact') ? 'template/header4signin.html' : 'template/header4normal.html' ;
});
})
In Html.
<body>
<div ng-controller="HeaderCtrl">
<div ng-include="templateUrl"></div>
</div>
<div ng-view></div>
</body>
I hope this could help you. :)
The difference of your two navbars are not significant. An alternative is just use ng-class and ng-show to give different styles.
For example, in the navbar.html:
<nav>
<span ng-show="isNormalPage">Inn</span>
<img ng-class="{align-center: isNormalPage}">Logo</img>
<span ng-show="isNormalPage">Sing in</span>
</nav>
In your JS file, add a flag to mark singin page:
.when('/signin', {
controller: [$scope, function ($scope) {
$scope.isNormalPage = false;
};
}]
})
im just starting to learn angular and ioninc to build an app.
I just started a new app with ionic included and made a list of items from a json file. This works perfect, but since im 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">
<title>Spätifinder</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link rel="stylesheet" href="css/ionic.css">
<script src="angular.min.js"></script>
<script src="js/ionic.bundle.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="spaetifinder">
<ion-header-bar type="bar-positive"
animation="nav-title-slide-ios7"
back-button-type="button-icon"
back-button-icon="ion-ios7-arrow-back"></ion-header-bar>
<ion-nav-bar class="bar-energized nav-title-slide-ios7">
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
this is ma app.js file:
var app = angular.module('spaetifinder', ['ionic']);
app.config(function ($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/home');
});
app.controller('StoreController', [ '$http', function($http) {
var store = this;
store.storeList = [ ];
$http.get('http://m.xn--sptifinder-r5a.de/apiv1/jsonp.php?action=list&lat=52.437595&long=12.987900&distance=100').success(function(data){
store.storeList = data;
});
this.loadImage = function(hasImage){
if(hasImage = 0) {
return "http://www.spätifinder.de/images/fotos/no-foto.jpg";
}
else {
return this.ID;
}
};
}]);
and this should be my template for home (home.html)
<!-- our list and list items -->
<ion-list>
<a href="#" class="item item-thumbnail-left" ng-repeat="spaeti in spaetis.storeList">
<img ng-if="spaeti.has_image == 0" ng-src="http://www.spätifinder.de/images/fotos/no-foto.jpg">
<img ng-if="spaeti.has_image == 1" ng-src="http://www.spätifinder.de/images/fotos/{{spaeti.ID}}_crop.jpg">
<h2>{{spaeti.Name}}</h2>
<p>{{spaeti.BusinessHours}}<br>{{spaeti.Street}}, {{spaeti.ZIP}} {{spaeti.City}}</p>
</a>
</ion-list>
Im just don't get it what is wrong with that, maybe you see an mistake there?
thanks in advance
luc
I think that your issue is in your routing configuration. You only define one state at the / URL. You then set your fallback to /home which doesn't exist. You probably want your home state to be located at /home.
EDIT: Scratch that i think i see your problem, you have a ; at the end of your state block, i had to remove mine to get it to work it took me along time last night to figure that our, hope it helps you.
Old answer:
Im not sure maybe this will help but here is mine, the only thing i see wrong with yours is what #Jon7 already pointed out.
.state('main', {
url: "/main",
templateUrl: "templates/main.html",
controller: 'MainController'
})
$urlRouterProvider.otherwise('/main');
I had some trouble understanding the routing too. I learned a lot from this Codepen example.
Codepen example routing
You need to add controller and perhaps a view as well...
so from this
.state('home', {
url: '/',
templateUrl: 'home.html'
});
to
.state('home', {
url: '/',
views: { //optional
'viewname':{
templateUrl: 'templates/home.html'
controller: 'StoreController'
}
}
});
Your mistake is the otherwise statement. It should be:
$urlRouterProvider.otherwise('/')
var app = angular.module('ionicApp', ['ionic'])
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/')
$stateProvider.state('home', {
url: '/',
template: '<p>Hello, world!</p>'
})
})
$stateProvider.state('home', {
url: '/',
templateUrl: 'home.html'
})
http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/