I'm really new to Angular and I have a little question about sending a template or URL into a ng-view. But the way I intend to do I may have to ng-view in my base template.
When my template base is like this:
<body>
<div ng-view></div>
</body>
And my JS looks like:
var app = angular.module('myApp',[])
.config(['$routeProvider', '$locationProvider', '$httpProvider', function($routeProvider, $locationProvider, $httpProvider) {
$routeProvider
.when('/home', {
templateUrl: '/contato'
})
(...)
Works fine loading URL inside ng-view when I have only ONE ng-view case, HOW ABOUT IF I need to have more then one ng-view to load ? (like: ng-view="area1" and ng-view="area2")
I've tried in each $routeProvider, but won't work:
$routeProvider
.when('/home', {
area1: {templateUrl: '/path1'},
area2: {templateUrl: '/path2'}
})
How would be the right way to set each ng-view separately?
Appreciate any help! Thanks.
Unfortunately, as you know now, you cannot have more than one ng-view on your page. You should have a look at UI-Router from AngularUI which does exactly what you are looking for (https://github.com/angular-ui/ui-router).
An example from their doc (https://github.com/angular-ui/ui-router#multiple--named-views):
setup
var myApp = angular.module('myApp', ['ui.router']);
html
<body>
<div ui-view="viewA"></div>
<div ui-view="viewB"></div>
<!-- Also a way to navigate -->
<a ui-sref="route1">Route 1</a>
<a ui-sref="route2">Route 2</a>
</body>
template 1
<h1>State 1</h1>
template 2
<h1>State 2</h1>
js
myApp.config(function($stateProvider, $routeProvider) {
$stateProvider
.state('index', {
url: "",
views: {
"viewA": { template: "index.viewA" },
"viewB": { template: "index.viewB" }
}
})
.state('route1', {
url: "/route1",
views: {
"viewA": { templateUrl: "route1.viewA.html" },
"viewB": { templateUrl: "route1.viewB.html" }
}
})
.state('route2', {
url: "/route2",
views: {
"viewA": { templateUrl: "route2.viewA.html" },
"viewB": { templateUrl: "route2.viewB.html" }
}
});
});
Here you could specify a controller at the state level, that would be effective for both views, or at the view level, in order to set two different controllers.
Edit: Live demo from ui-router docs (http://plnkr.co/edit/SDOcGS?p=preview)
Basically you can't have two ng-view. Have a look at this SO question:
You can have just one ng-view.
You can change its content in several ways: ng-include, ng-switch or mapping different controllers and templates through the routeProvider.
Related
I am using angularjs ui-router for a cordova app. I am trying to reuse a ui-view template (left-panel) for multiple states. This ui-view is for almost all the states except one state. I tried to refer many tutorials but still not able to implement what I want. Here is my code in app.js:
var angularApp = angular.module('angularApp', [
'ui.router',
]);
angularApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('root', {
abstract: true,
views: {
'left-panel': {
templateUrl: 'templates/common-left-panel.html',
},
}
})
.state('root.home', {
url: '/',
views: {
'container#': {
templateUrl: 'templates/home.html',
}
}
})
.state('root.settings', {
url: 'settings',
views: {
'container#': {
templateUrl: 'templates/settings.html',
}
}
})
.state('root.category', {
url: 'category/:catId',
views: {
'container#': {
templateUrl: 'templates/category-nodes.html',
controller: 'ListCatNodesCtrl'
}
}
})
});
This is in index.html
<div ui-view="left-panel"></div>
<a ui-sref="root.settings">Settings</a>
<div ui-view="container"></div>
With this code, the home page is rendered properly. But when I click on the settings link, there isn't any change in screen or url. In rendered DOM, I get <a ui-sref="root.settings" href="#settings">Settings</a>. The same holds for category page as well. Basically I am developing an android app using cordova and angularjs. Loads of thanks in advance.
http://plnkr.co/edit/i9qhqKZrbxUfsrAOKmMD
I have a basic hello world setup for a header/container/footer in AngularJs however I can't get the footer to load. The header/container is loading fine.
Here's my javascript:
angular.module('app', ['app.controllers', 'ui.router']).config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('root', {
url: '',
abstract: true,
views: {
'header': {
templateUrl: 'pages/header/header.html',
controller: 'HeaderController'
},
'footer': {
templateurl: 'pages/footer/footer.html'
}
}
})
.state('root.home', {
url: '/',
views: {
'container#': {
templateUrl: 'pages/home/home.html',
controller: 'HomeController'
}
}
})
.state('root.about', {
url: '/about',
views: {
'container#': {
templateUrl: 'pages/about/about.html'
}
}
});
$urlRouterProvider.otherwise('/');
});
angular.module('app.controllers', [])
.controller('HeaderController', headerController)
.controller('HomeController', homeController);
Here's my implementation on HTML:
<header ui-view="header">
</header>
<div ui-view="container">
</div>
<footer ui-view="footer">
</footer>
Changing them all to divs does not help.
There are no errors in Javascript console.
Header.html
<h1>Header</h1>
Home.html
<h1>Home</h1>
Footer.html
<h1>Footer</h1>
Page display:
Header
Home
The reason it is not working is because of a small typo in your code. This definition:
'footer': {
templateurl: 'pages/footer/footer.html'
}
should be:
'footer': {
templateUrl: 'pages/footer/footer.html'
}
This is a great example of bad design (on the part of ui-router). They could have performed checks of validity on requested views if there is no template or controller. However, I think it more importantly shows the shortcomings of allowing objects to be passed to functions. If templateUrl was a parameter to a function, this sort of problem would never arise.
Updated plunkr.
Replace templateurl with templateUrl.
I use for testing python simpleserver to test my angular app. I new to ui.router and trying to get index.html work properly and when trying to go home using e.g.
<a class="navbar-brand" ui-sref="/">MyApp</a>
To navigate back to home or index.html
Code
"use strict";
var mainApp = angular.module('mainApp', ['ui.router']);
mainApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/#');
$stateProvider
.state('/', {
url: '/',
templateUrl: 'index.html',
controller: 'mainController'
});
});
mainApp.controller('mainController',
function($state, $log, $scope, $rootScope, $http) {
$scope.test = 'foobar';
}
);
Any help would be appreciated to fix it.
Problem Plunkr
You are rendering index.html again inside your ui-view div, so techically you should have html that would have your home page content
myHomePage.html
<div class="home-page">
Its home page
{{test}}
</div>
State
$stateProvider
.state('/', { //<-- here it should be some stateName rather than using `/`
url: '/',
templateUrl: 'myHomePage.html', //<--changed here
controller: 'mainController'
});
Plunkr
Hi I am going to start a project.
In tablet page contains list of items on left side and item detail on right side as shown in below image.
In mobile It shows list of items on one page and detail of activity on another page, like below images.
I have used AngularJs to implemented this application like this(pseudo code)
Index.html
<html>
<head></head>
<boby>
<ui-view></ui-view>
</body>
</html>
List.html
<ul><li ng-repeat='item in items' >{{item.title}}</li></ul>
<div id="middleContent" ui-view style="padding-left: 320px;"></div>
detail.html
<div>Acitivity detail <div>
config.js
app = angular.module('MyApp', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('List', {
url: '/List',
templateUrl: 'Partial/List.html',
controller: 'ListController'
})
$stateProvider.state('Detail', {
url: '/Detail/:id',
templateUrl: 'Partial/Detail.html',
controller: 'DetailController'
})
$stateProvider.state('TabletList', {
url: '/TabletList',
data: { 'parent': 'tablet' },
templateUrl: 'Partial/List.html',
controller: 'ListController'
})
$stateProvider.state('TabletList.Detail', {
url: '/Detail/:id',
templateUrl: 'Partial/Detail.html',
controller: 'DetailController',
})
})
In Controller.js
app.controller('ListController',function(){
if($(window).width() > mobileView )( $state.go('TabletList.Detail'))
})
In List.html I have use next view
<div id="middleContent" ui-view style="padding-left: 317px;"></div>
It get loaded in case of tablet . otherwise it is useless there.
Is there some simple way to handle this scenario. please help
with regards
Plunker: http://plnkr.co/edit/0efF1Av4lhZFGamxKzaO?p=preview
Below is my header, there is an ng-show="cornerLogo" which I only want to be set true on the about, login and register views, but false the home view.
<body id="body_id"
ng-app="myApp"
ng-controller="HomeCtrl">
<header>
<section ng-show="cornerLogo">
<h1>Logo</h1>
</section>
<nav id="main_nav">
<ul>
<li><a ui-sref="about">About</a></li>
<li><a ui-sref="login">Sign In</a></li>
<li><a ui-sref="register">Create Account</a></li>
</ul>
</nav>
</header>
<ui-view></ui-view>
So it works in my HomeCtrl because that is the main controller on the page.
var app = angular.module('app-home', [])
.controller('HomeCtrl', ['$scope', function($scope) {
$scope.cornerLogo = false;
}]);
However when I switch to the about, login or register views I lose that $scope
Is there a way somehow to have a global var set somewhere in my stateProvider for ui-router? Otherwise, how would you go about this issue?
var app = angular.module('bitAge',
['ui.router',
'app-header',
'app-home',
'app-about',
'app-login',
'app-register'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '_views/home.html',
controller: 'HomeCtrl',
})
.state('about', {
url: '/about',
templateUrl: '_views/about.html',
controller: 'AboutCtrl'
})
.state('login', {
url: '/login',
templateUrl: '_views/login.html',
controller: 'LoginCtrl'
})
.state('register', {
url: '/register',
templateUrl: '_views/register.html',
controller: 'RegisterCtrl'
});
// default view:
$urlRouterProvider.otherwise('/home');
}]);
Apart from my comments in the question, to fix your issue you can take this approach.
You have HomeCtrl specified as bound controller in the state registration of home partial. So instead create a main controller for your application. So that you keep the responsibilities separated out. Inject $state and expose a method called hideLogo and use $state.is to determine the logic to show/hide the logo.
i.e:
var app = angular.module('app-home')
.controller('MainCtrl', ['$scope', '$state', function($scope, $state) {
$scope.hideLogo = function(){
return $state.is('home');
}
}]);
In the index html use MainCtrl as your main controller for the app.
<body ng-app="myApp" ng-controller="MainCtrl">
<header>
<section
ng-hide="hideLogo()">
<h1>Corner Logo</h1>
</section>
Plnkr
If you want to use $state directly on the view you would need to inject it in MainCtrland set $state on the $scope object so that you can use it directly. Though i highly recommend not to use this technique, you should not expose state in the scope object and ultimately in the view. Just expose only what is needed in the viewmodel.
i.e in the MainCtrl :
var app = angular.module('app-home')
.controller('MainCtrl', ['$scope', '$state', function($scope, $state) {
$scope.$state= $state;
}]);
and just use it on the view as:
<section
ng-hide="$state.is('home')">
You can check your current state and depends on that, show or not your logo.
<section ng-show="$state.includes('home')">
<h1>Logo</h1>
</section>
Also, your anchor elements to navigate, should be like this <a ui-sref="about">About</a> and so on, because if you use normal href attribute, angular wont change state.
Also, you need to inject $state in your main module and then you can use $state module
var app = angular.module('myApp',
['ui.router',
'app-home',
'app-about']).run(function ($state,$rootScope) {
$rootScope.$state = $state;
})
UPDATE:
Here is the punklr with the answer