routing using $state failed in Angularjs - javascript

I used below code and gotten blank for the result. But when I check the result the markup are there, seeing expression of {{welcome}} etc.. I guess I'd done wrong somewhere and it failed to render. I didn't see any error in console of Chrome.
my app.js
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('threadListing', {
url: '/',
templateUrl: 'threadListing.html',
controller: 'AppCtrl'
})
.state('threadDetail.php', {
url: '/threadDetail',
templateUrl: 'threadDetail.html',
controller: 'AppCtrl'
})
$urlRouterProvider.otherwise("/");
})
my html is like this
<ion-content>
<script id="threadListing.html" type="text/ng-template">
<ion-view>
<h1>Welcome {{name}}</h1>
</ion-view>
</script>
<script id="threadDetail.html" type="text/ng-template">
<ion-view>
<h2>{{age}}</h2>
</ion-view>
</script>
</ion-content>

Related

Why is my simple Angular ui.router not working?

I have the simplest ui.router example which doesn't seem to work.
See below:
var routerApp = angular.module('mainApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
//$urlRouterProvider.otherwise('/home'); When I uncomment this, it loads /home without a problem but why is it going to the "otherwise" condition?
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'main.html'
})
});
My index file.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="/angular/angularApp.js"></script>
</head>
<body ng-app="mainApp">
<div class="container">
<div ui-view></div>
</div>
</body>
</html>
I have been going on and on into this but I think I now have tunnel vision. Someone please help me out here. Thanks in advance!
I do not see any issue except you having the same controller for both, can you check the example below
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider.state('top', {
url: "",
templateUrl: "header.html",
controller: 'topCtrl'
})
.state('top.side', {
url: '/app',
templateUrl: "side.html",
controller: 'filterCtrl'
})
.state('top.side.list', {
url: "/items?query",
templateUrl: "items.html",
controller: 'listCtrl'
})
.state('top.side.item', {
url: "/:id",
templateUrl: "item.html",
controller: 'itemCtrl'
});
});
DEMO

angular $stateProvider not routing as expected

In my main index.html file I have the following simple markup...
<body ng-app="starter" ng-controller="AppCtrl">
<div ui-view></div>
</body>
In my app.js I am using $stateProvider to create routes so I can display certain pages...
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/app');
$stateProvider
.state('app', {
url: '/app',
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.accounts', {
url: '/accounts',
templateUrl: 'templates/accounts.html'
})
});
When the page loads, the first state is loaded, meaning I can see the contents of menu.html in my main index.html and the controller AppCtrl is passed to this state.
My AppCtrl loads an API that I am using on click of a button from menu.html, the API provides a UI for a user to login, and once the credentials are good, the success is called...
app.controller('AppCtrl', function($scope, $ionicModal, $timeout, $state) {
$scope.create = function() {
var linkHandler = Plaid.create({
env: 'tartan',
clientName: 'Example Project',
key: 'test_key',
product: 'connect',
onSuccess: function(token) {
$state.go('app.accounts');
},
});
linkHandler.open();
}
});
What the API does is pretty irrelevant, but as you can see, I am passing $state.go('app.accounts'); on success. But instead of changing the state to app.accounts, I believe the otherwise statement is called because all I see is the contents of the app state.
Why is this so? I've been stuck on this issue for some time now.
app.accounts is a child state of app. That means in menu.html there must be <ui-view> in order to display accounts.html.
If you don't want to display accounts.html inside menu.html, you shouldn't make accounts a child state of app:
<body ng-app="starter">
<div ui-view></div>
</body>
and
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/app');
$stateProvider
.state('app', {
url: '/app',
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('accounts', {
url: '/accounts',
templateUrl: 'templates/accounts.html'
})
});

How to refactor separate states and abstract state in UI Router?

In my js app I have this in config $stateProvider section via angular ui-router:
.state('login', {
url: '/login',
templateUrl: 'app/login/login.tmpl.html',
controller: 'LoginCtrl as login'
})
.state('app', {
abstract: true,
url: '/',
views: {
'main': { templateUrl: 'app/main/main.html' }
}
})
.state('app.reports', {
url: 'reports',
views: {
'': {templateUrl: 'app/templates/reports.tmpl.html'},
'devices#app.reports': {
templateUrl: 'app/templates/devices.tmpl.html',
controller: 'DevicesCtrl as devicesCtrl'
},
'graphics#app.reports': {...}
}
})
In index.html I have:
<body ng-controller="MainCtrl as main" >
<section ui-view>
<div ui-view="main"></div>
</section>
....
</body>
It works only if I have nested ui-view="main" in ui-view.
Is it correct way to work with ui-router?
In main.html I have header, footer and some common information for some pages.
But I have another state, 'login', in which I'll have their own templates. But in index.html their will be loading with ui-view, not ui-view="main".
How can I refactor my index.html and js to avoid nested ui-view in index.html?
Or I have a correct way?
You could refactor your app state like this:
.state('app', {
abstract: true,
url: '/',
templateUrl: 'app/main/main.html'
})
That should allow you to ony have the following in your index.html:
<body ng-controller="MainCtrl as main" >
<section ui-view>
</section>
....
</body>

Angular JS controller called twice (ng-controller)

I'm developping an ionic application and when using angular for login my controller is called twice,
I've looked through all the others similar questions but didn't find a solution .
The problem is even when I remove the ng-controller="LoginCtrl as lgnCtrl"
I get my controller called once but without two-way databinding.
here is my route file :
$stateProvider
.state('login', {
url: "/login",
views: {
'main': {
templateUrl: "app/user/loginView.html",
controller: "LoginCtrl",
controllerAs: "lgnCtrl"
}
}
})
$urlRouterProvider.otherwise('/login');
here is my controller
angular.module('starter.controllers')
.controller('LoginCtrl', LoginCtrl);
function LoginCtrl($state, $storage, $translate, $ionicPopup, LoginService, messageService) {
var lgnCtrl = this;
console.log("user dash 1zz");
return lgnCtrl;
}
and here is my views:
loginView.html :
<ion-view view-title="loginView" id="signinBlk">
<ion-content>
<div class="list list col span_1_of_2 " ng-controller="LoginCtrl as lgnCtrl">
</div>
</ion-content>
</ion-view>
index.html:
<body ng-app="starter">
<ion-nav-view name="main"></ion-nav-view>
</body>
if you already define your controller in route you dont need to define controller in html template remove the ng-controller attribute with value form html template then run it will run just once
Instead of having this
ng-controller="LoginCtrl as lgnCtrl"
in html, we can have this in the controller when the route is defined with a controller, for example in the controller, it will go like this
$routeProvider
.when("/", { templateUrl: "views/abc.html", controller: "LoginCtrl as lgnCtrl", caseInsensitiveMatch: true });
it worked like a charm
the functions in the controller are only called once.

Can't display content page in state with Angular UI Router

I'm beginner in AngularJS and I have a problem when use Angular UI Router.
index.html
<body ng-app="app" ng-controller="AppController" layout="column">
<ui-view></ui-view>
</body>
login.html
<h1>Login page content</h1>
And in my $stateprovider...
.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "views/app.html",
controller: "AppController"
}).state('app.login', {
url: "/login",
templateUrl: "views/login.html",
controller: "LoginController"
});
$urlRouterProvider.otherwise('/login');
})
It can't display a content of login.html page. But when i change state from app.login to login. It can be displayed. How should i do now?
Out of curiosity could you try:
$urlRouterProvider.otherwise('/app/login');
I saw the abstract nested classes routed in that format in some examples,
though i don't have time to test it in jsfiddle.
edit:
Maybe if you try setting the base url to "/" ?
.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
$stateProvider
.state('app', {
url: "/",
abstract: true,
templateUrl: "views/app.html",
controller: "AppController"
}).state('app.login', {
url: "/login",
templateUrl: "views/login.html",
controller: "LoginController"
});
$urlRouterProvider.otherwise('/login');
})

Categories

Resources