Questions from angular noob. Templates in templates?

JavaScript
1

Hi,

this is my JS:

var app = angular.module('app', ['ngRoute', 'ngAnimate']);

    // configure our routes
    app.config(function($routeProvider) {
        $routeProvider

            // route for the home page
            .when('/', {
                templateUrl : 'templates/splash.html',
                controller  : 'mainController'
            })

            // route for the login page
            .when('/login', {
                templateUrl : 'templates/login.html',
                controller  : 'loginController'
            })

            // route for the feed page
            .when('/feed', {
                templateUrl : 'templates/feed.html',
                controller  : 'feedController'
            });
    });

app.controller("MainController", function($scope){
	
});

And my html:

<!DOCTYPE html>

	<head>

		<title>App</title>

		<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
		<meta name="format-detection" content="telephone=yes">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
		<link href='css/main.css' rel='stylesheet' type='text/css'>

	</head>

	<body ng-app="app" ng-controller="MainController">

		<header></header>

		<div class="page-wrapper">
			<div class="page" ng-view></div>
		</div>

		<nav class="nav-bar">
			<ul>
				<li class="active"><a href="#feed">Feed</a></li>
				<li class=""><a href="#feed">Test</a></li>
				<li class=""><a href="#feed">Feedback</a></li>
			</ul>
		</nav>

		<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
		<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
		<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
		<script src="js/app.js"></script>
		<script src="js/main.ctrl.js"></script>

	</body>

</html>

Questions:

  1. As you can see I have a <nav> , and this one I only want to show on feed.html and login.html, how can I do this?

  2. Can i do templates in templates?

2

Hi,

I guess one way to do this would be to subscribe to route changes at rootscope and apply the name of the current controller to the class of the nav bar. E.g.:

<style>
  .MainController{
    display: none;
  }
</style>

<nav class="nav-bar" ng-class="controller" >
  <ul>
    <li><a href="#/">Main</a></li>
    <li><a href="#login">Login</a></li>
    <li><a href="#feed">Feedback</a></li>
  </ul>
</nav>

app.run(function($rootScope) {
  $rootScope.$on("$routeChangeSuccess", function(e, data) {
    $rootScope.controller = data.controller;
  });
});

Here’s an example you can run on your PC:

index.html

<!DOCTYPE html>
  <head>
    <title>App</title>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
      .MainController{
        display: none;
      }
    </style>
  </head>

  <body ng-app="app">
    <nav class="nav-bar" ng-class="controller" >
      <ul>
        <li><a href="#/">Main</a></li>
        <li><a href="#login">Login</a></li>
        <li><a href="#feed">Feedback</a></li>
      </ul>
    </nav>

    <div class="page-wrapper">
      <div class="page" ng-view></div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
    <script>
      'use strict';
      var app = angular.module('app', ['ngRoute']);

      app.config(function($routeProvider){
        $routeProvider.when('/', {
          templateUrl : 'templates/splash.html',
          controller  : 'MainController'
        })
        .when('/login', {
          templateUrl : 'templates/login.html',
          controller  : 'LoginController'
        })
        .when('/feed', {
          templateUrl : 'templates/feed.html',
          controller  : 'FeedController'
        });
      });

      app.run(function($rootScope) {
        $rootScope.$on("$routeChangeSuccess", function(e, data) {
          $rootScope.controller = data.controller;
        });
      });

      app.controller("MainController", function($scope){
        console.log("In Main");
      });

      app.controller("LoginController", function($scope){
        console.log("In Login");
      });

      app.controller("FeedController", function($scope){
        console.log("In Feed");
      });
    </script>
  </body>
</html>

templates/login.html

<h1>Login</h1>

templates/feed.html

<h1>Feedback</h1>

templates/splash.html

<h1>Splash</h1>

The view template to be rendered inside ng-view cannot contain another ng-view directive. This prevents you from creating nested views.

It might be worth looking at the angular-ui router, which (as far as I can recall), does support this.

1 Like
3

The simplest means of nesting templates is using the ui-router that Pullo suggested. It has pretty good documentation on all the features available including this.

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.