I'm using angular UI Router in Ionic to build an application but my one page news.html is not loading the content.It shows the view-title but not the stuffs inside ion-content , the page is blank.
this code is inside of a template news.html
<ion-view view-title="news">
<ion-content>
<div class="list card" ng-repeat="item in articles">
<div class="item item-thumbnail-left item-text-wrap">
<h2 class="post-title">{{item.name}}</h2>
<p class="post-author">{{item.description}}</p>
</div>
</div>
</ion-content>
</ion-view>
in app.js i have added the following ui route code
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('index', {
url: '/',
templateUrl: 'templates/home.html',
controller: 'mainCtrl'
})
.state('news', {
url: '/news',
templateUrl: 'templates/news.html',
controller: 'newsCtrl'
});
$urlRouterProvider.otherwise('/');
})
and my newsCtrl is
.controller('newsCtrl',function($scope, $http){
$http.get('https://newsapi.org/v1/articles?source=the-next-web&sortBy=latest&apiKey=4ff16a30e00640cab0a2a9731ccc9510').success(function(data){
$scope.articles = data.sources;
console.log('news control');
});
Same code works
carService.controller('newsCtrl', ['$scope', '$http', function($scope, $http) {
$http.get('https://newsapi.org/v1/sources?language=en').success(function(data) {
$scope.articles = data.sources;
console.log(data);
console.log('news control');
});
}]);
DEMO
Related
I have 2 controllers that i want to use. One of them is ModalDemoCtrl amd the other is ReportController. How do i declare both controllers that shares the same state, url and templateUrl?
app.js
angular
.module('app', [
'ui.router',
'lbServices',
'ngAnimate',
'ui.bootstrap'
])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('report', {
url: '/report',
templateUrl: 'views/report.html',
controller: 'ModalDemoCtrl',
authenticate: true
})
.state('report', {
url: '/report',
templateUrl: 'views/report.html',
controller: 'ReportController',
authenticate: true
});
Can you try something like this
<div ng-controller="FirstController">
<p>Stuff ..</p>
</div>
<div class="menu" ng-controller="SecondController">
<p>Other stuff ...</p>
</div>
You can have more than one controllers in single page, but you cannot have multiple ng-app.
You then define this module and define all your controllers in this module:
//app.js
var app = angular.module('app', ['ui.router']);
app.config(['$stateProvider','$urlRouterProvider',
function($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider.
state('report', {
url:'/report',
templateUrl: 'views/report.html'
})
}]);
app.controller('ModalDemoCtrl', function($scope) {
$scope.message = 'This is ModalDemoCtrl';
});
app.controller('ReportController', function($scope) {
$scope.message = 'This is ReportController';
});
//report.html
<div class="container">
//ModalDemoCtrl
<div ng-controller = 'ModalDemoCtrl'>
{{ message }}
</div>
//ReportController
<div ng-controller = 'ReportController'>
{{ message }}
</div>
</div>
I am kind of a noob in Ionic and I need help / guidelines to build something that sounds easy.
I want to have a single page composed of multiple content, the idea is to have multiple views in the same page each of them being linked to a specific controller.
Here is my code:
index.html content:
<ion-pane>
<ion-nav-view></ion-nav-view>
<ion-view ng-controller="FirstController">
<ion-content>
</ion-content>
</ion-view>
<ion-view ng-controller="ScdController">
<ion-content>
</ion-content>
</ion-view>
</ion-pane>
In my app.js:
angular.module('app', [])
.controller('FirstController', function($scope) {
})
.controller('ScdController', function($scope) {
});
In my config.routes.js:
angular.module('app')
.config(configure);
function configure($stateProvider){
$stateProvider
.state('first', {
url: '/',
templateUrl: 'templates/first.html',
controller: 'FirstController'
})
.state('second', {
url: '/',
templateUrl: 'templates/second.html',
controller: 'ScdController'
});
}
Templates are very simple:
first.html:
<div>first</div>
second.html:
<div>Second</div>
Right now nothing is displayed.
What do you guys think?
Thanks for your help!
Your requirement is multiple named views.
Following document is useful to implement multiple views in a single page
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
Example code:
HTML:
<ion-view title="">
<ion-content scroll="true">
<div ui-view="first"></div>
<div ui-view="second"></div>
</ion-content>
</ion-view>
JS:
angular.module('app')
.config(function($stateProvider) {
$stateProvider
.state({
name : 'multiple-views'
views: {
'first': {
url: '/',
templateUrl: 'templates/first.html',
controller: 'FirstController'
},
'second': {
url: '/',
templateUrl: 'templates/second.html',
controller: 'ScdController'
}
}
});
Working example link: http://plnkr.co/edit/kZZ4KikwLITOxR5IGltr?p=preview
I'm developing an application using angularjs starting from https://github.com/firebase/angularfire-seed project. I'm trying to redirect from a controller to another without success. I need to do this from controller because i have some controls to do before redirect. I'm using location object for do it..
Here is my code for redirect:
$scope.infostore = function() {
$location.path( 'store' );
}
Here is my route configuration:
angular.module('myApp.routes', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
authRequired: true,
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
});
$routeProvider.when('/apps', {
authRequired: true,
templateUrl: 'partials/apps.html',
controller: 'appsController'
});
$routeProvider.when('/store', {
authRequired: true,
templateUrl: 'partials/store.html',
controller: 'storeController'
});
$routeProvider.otherwise({redirectTo: '/home'});
}]);
But every time i call the method 'infostore' in appsController angular redirect me to 'home'
Why? I just try to use apply() without success on main scope.
Here is my store controller:
'use strict';
app.controller('storeController', function($location, $firebase, $modal, $scope, database, $http, $rootScope, $routeParams) {
var ref = database.returnRef("users/"+$rootScope.auth.user.uid+"/apps");
$scope.apps = $firebase(ref);
});
Here is store html:
<div class="container">
<br />
<div class="row">
<div class="col-md-12 text-center">
<h3>
<span>{{ 'myappslong' | translate }}</span>
</h3>
</div>
</div>
<br />
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
store
</div>
<div class="col-md-1"></div>
</div>
</div>
Here is the URL from the first controller: http://localhost:8000/app/index.html#/apps
Solved, there was an error in my html code. Using location.path works correctly.
I have a link in an angular app that looks like this:
<tab ng-controller="childCtrl" heading="Children">
edit
</tab>
How can I load the link inside the tab instead of refreshing the entire view?
I like other approach with one point of handling all routes. ui.router with nested views allows to do it.
Template
<div ><a ui-sref="home.tab1" >Tab1</a></div>
<div><a ui-sref="home.tab2" >Tab2</a></div>
<br>
<div ui-view="tabs"></div>
app
var app = angular.module('plunker', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'main.html',
controller: 'MainCtrl',
virtual: true
})
.state('home.tab1', {
url: '/tab1',
views: {
tabs: {
templateUrl: '1.html'
}
}
})
.state('home.tab2', {
url: '/tab2',
views: {
tabs: {
templateUrl: '2.html'
}
}
});
$urlRouterProvider
.otherwise('/home/tab1');
})
And demo http://plnkr.co/edit/r1jPgkMnPAMlI34gZrMA?refresh&p=preview
You could define the path to the selected tab's content when the link is clicked, and use ng-include to display it.
<div ng-repeat="parent in parents">
<div ng-repeat="child in parent.children">
<a href="" ng-click="selectPath(parent, child);">
Parent {{parent.Id}}, Child {{child.Id}}
</a>
</div>
</div>
<div ng-include="selected.path"></div>
Here is a demo: http://plnkr.co/edit/7SPnluxUfcNNQDyeC6yt?p=preview
My template is loading but I get an error that the controller is undefined. The controller does exist in my sources exactly at the location defined. What is wrong with this code?
Error: [ng:areq] Argument '/Scripts/controllers/wizardNavigationCtrl.js' is not a function, got undefined
http://errors.angularjs.org/1.2.14/ng/areq?p0=%2FScripts%2Fcontrollers%2FwizardNavigationCtrl.js&p1=not%20aNaNunction%2C%20got%20undefined
Index.html (root page)
<div class="container">
<div ui-view></div>
</div>
wizardLayout.html
<div>
<ul class="nav nav-tabs">
<li ng-repeat="model in models" ng-class="active: model.active">
<a ui-sref=".model-{{model.name}}">model.name</a>
</li>
<li ng-class="navStep=='addnew' ? 'active' : ''">
<a ui-sref=".newmodel"><span class="glyphicon glyphicon-plus"></span></a>
</li>
<li><a ui-sref=".other">Other</a></li>
<li><a ui-sref=".customer">Customer Info</a></li>
<li><a ui-sref=".shipping">Shipping Info</a></li>
<li><a ui-sref=".review">Review</a></li>
</ul>
</div>
<div ui-view>
</div>
app.js:
'use strict';
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('wizard', {
url: '/',
templateUrl: 'Scripts/templates/wizardLayout.html',
controller: 'Scripts/controllers/wizardNavigationCtrl.js'
})
.state('wizard.newmodel', {
url: '/newmodel',
templateUrl: 'Scripts/templates/wizardModel.html',
controller: 'Scripts/controllers/wizardModelCtrl.js'
})
.state('wizard.other', {
url: '/other',
templateUrl: 'Scripts/templates/wizardOther.html',
controller: 'Scripts/controllers/wizardOtherCtrl.js'
})
.state('wizard.customer', {
url: '/customer',
templateUrl: 'Scripts/templates/wizardCustomer.html',
controller: 'Scripts/controllers/wizardCustomerCtrl.js'
})
.state('wizard.shipping', {
url: '/shipping',
templateUrl: 'Scripts/templates/wizardShipping.html',
controller: 'Scripts/controllers/wizardShippingCtrl.js'
})
.state('wizard.review', {
url: '/review',
templateUrl: 'Scripts/templates/wizardReview.html',
controller: 'Scripts/controllers/wizardReviewCtrl.js'
});
}]);
wizardNavigationCtrl.js
myApp.controller('wizardNavigationCtrl', ['wizardSvc', '$scope', function (wizardSvc, $scope) {
alert('navigation controller! ' + wizardSvc.quote.title);
$scope.navStep = 'addnew';
wizardSvc.init();
}])
The controller should be in the format MyControllerName not the name and path to the javascript file. That in mind, in order to use the controller the javascript must have been loaded by the browser already. This requires the use of a traditional script tag because angular won't find or load these scripts for you.
Taking a snippet from your code it becomes:
.state('wizard', {
url: '/',
templateUrl: 'Scripts/templates/wizardLayout.html',
controller: 'wizardNavigationCtrl'
})
And somewhere in the page you need:
<script src="Scripts/controllers/wizardNavigationCtrl.js" type="text/javascript"></script>
Hope that helps!