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'
});
Related
please tell me why it isn't loading partials.
I'm trying to do routing and inserting a partial templates into the layout HTML page when you click on a specific hyperlink such as Home, about or contact.
I checked in every line of code and I didn't find the source of problem for not loading partials. Routes are doing fine, it just isn't loading.
Here's my code:
index.html
<html ng-app="streamApp">
<head>
<meta charset="utf-8">
<!-- To ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>StreamTest App</title>
<!-- load bootstrap and fontawesome -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="styles/style.css"/>
</head>
<body ng-app="streamApp" ng-controller="MainController">
<div id="main">
<!-- including header -->
<div ng-include="'views/templates/header.html'"></div>
<!-- this is where content will be injected -->
<div id="container" style="margin-top: 50px;">
<ng-view></ng-view>
</div>
<!-- including footer -->
<div ng-include="'views/templates/footer.html'"></div>
</div>
</body>
<!-- Scripts -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-route/angular-route.min.js"></script>
<script src="app.js"></script>
<!-- Scripts End -->
</html>
app.js
// create the module named streamapp and include ngRoute for routing needs
var streamApp = angular.module('streamApp',['ngRoute']);
//configure app's routes
streamApp.config(['$routeProvider',function ($routeProvider) {
$routeProvider
//route for the home page
.when('/home', {
templateURL : 'views/partials/home.html',
controller : 'MainController'
})
//route for the about page
.when('/about', {
templateURL : 'views/partials/about.html',
controller : 'aboutController'
})
//route for the contact page
.when('/contact', {
templateURL : 'views/partials/contact.html',
controller : 'contactController'
})
.otherwise({
redirectTo: '/home'
});
}]);
// create the controller and inject Angular's $scope
streamApp.controller("MainController", function ($scope) {
// create a message to display in our view
$scope.home="Welcome Home!";
});
streamApp.controller("aboutController", function ($scope) {
// create a message to display in our view
$scope.about="Wanna hear about us! Here you are :)";
});
streamApp.controller("contactController", function ($scope) {
// create a message to display in our view
$scope.contact="Don't be shy to contact us!";
});
header.html
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="navbar-header">
<a class="navbar-brand" href="#home">StreamTEST</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-envelope"></i> Contact</li>
</ul>
</div>
</div>
</nav>
</header>
home.html
<div class="jumbotron text-center">
<h1>Home Page</h1>
<p>{{ home }}</p>
</div>
about.html
<div class="jumbotron text-center">
<h1>About Page</h1>
<p>{{ about }}</p>
</div>
contact.html
<div class="jumbotron text-center">
<h1>Contact Page</h1>
<p>{{ contact }}</p>
</div>
I had changed the default hash-prefix from '!' to empty string '' in app.js cause I'm using angularjs 1.6
$locationProvider.hashPrefix('');
Remove ng-app from your body element. You already have it on the outer html element.
I use ui-router instead of ngRoute, but they are very similar. A couple of things.
You need to set Html5Mode, which means you need to inject $locationProvider into your config and then issue:
$locationProvider.html5Mode(true)
You should set the base href in the <head> section of your index.html with:
<base href="/" >
You might also want to try ng-href instead of href on your links.
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
I am unable to get routing to work for the Ionic app.
When I click on a link ('Scientific Facts') in home.html, it doesn't navigate to facts.html
I've gone through all the relevant documentation and other similar answers on stack overflow but none of them helped.
Below are my files index.html, app.js, states.js files. Could someone please suggest where I could be going wrong ?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/ionicons.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/states.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="curie">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content class="padding">
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/facts.html" type="text/ng-template">
<ion-view view-title="Facts">
<ion-content class="padding">
<p>Banging your head against a wall uses 150 calories an hour.</p>
</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
states.js
angular.module('curie')
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.home', {
url: '/home',
views: {
'home': {
templateUrl: 'templates/home.html',
controller: 'HomeTabCtrl'
}
}
})
.state('tab.facts', {
url: '/facts',
views: {
'facts': {
templateUrl: 'templates/facts.html'
}
}
})
$urlRouterProvider.otherwise('/tab/home');
})
.controller('HomeTabCtrl', function($scope, $location) {
console.log('HomeTabCtrl');
$scope.goToUrl = function(path) {
$location.path('#/tab/overviewPhoto');
};
});
app.js
angular.module('curie', [
'ionic',
'ngCordova',
'ui.router',
])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
From further research, I've come to know that, the view name the page is being navigated to, shall be same as the view name from which it was navigated from.
Below is incorrectly defined view name.
.state('tab.facts', {
url: '/facts',
views: {
'facts': {
templateUrl: 'templates/facts.html'
}
}
})
Below is correctly defined view name i.e same as the view name it is being navigated from.
.state('tab.facts', {
url: '/facts',
views: {
'home': {
templateUrl: 'templates/facts.html'
}
}
})
since, you are using $stateProvider, why don't you use $state.go('urPage').
In your view:
<a class="button icon icon-right ion-chevron-right" ng-click="goFacts()">Scientific Facts</a>
In your controller:
.controller('HomeTabCtrl', function($scope, $location,$state) {
console.log('HomeTabCtrl');
$scope.goToUrl = function(path) {
$location.path('#/tab/overviewPhoto');
};//u don't have this function in the view.
$scope.goFacts = function(){
$state.go('tab.facts');
}
});
As Crhistian Ramirez said try to use ui-sref instead of href.
Old solution:
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content class="padding">
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
New solution:
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content class="padding">
<p>
<a class="button icon icon-right ion-chevron-right" ui-sref="tab.facts">Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
The problem is simple and the answer is probably pretty obvious but I really can't find out what's going wrong here.
JSFIDDLE
As you can see, no links are generated and no views are loaded.
I have looked into related problems aswell (e.g this one) but it wasn't much of a use.
index.html
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
<div class="container">
<div ui-view></div>
</div>
<script type="text/ng-template" id="home.html">
<div class="jumbotron text-center">
<h1>Welcome</h1>
<p>This is the Home Page</p>
</div>
</script>
app.js
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
});
}]);
EDIT
I should have mentioned that I included ui-router in the External Resources tab in my fiddle.
This is what gets generated by JSFiddle:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-app="routerApp">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
<div class="container">
<div ui-view=""></div>
</div>
<script type="text/ng-template" id="home.html">
<div class="jumbotron text-center">
<h1>Welcome</h1>
<p>This is the Home Page</p>
</div>
</script>
<script type="text/javascript">
//<![CDATA[
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
});
}]);
//]]>
</script>
</body>
</html>
EDIT #2
It seems like this was a problem with JSFiddle's External Resources rather than ui-router.
Working example
You have to include angular-ui-router in your index.html
You can for example add:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
Here is the working JSFIDDLE
ui.router is a separate module. You need to download it and include a script, e.g. download from here
There is a default angular router, but that one probably should be added as a separate script as well.
Angular UI-Router is a client-side Single Page Application routing framework for AngularJS.Routing frameworks for SPAs(Single Page Applications) update the browser's URL as the user navigates through the app.
Check this fiddle
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
}).state('about', {
url: '/about',
templateUrl: 'about.html'
});
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...