CODEWITHSUNDEEP
angularjs-directivemeanjsangular-directiveyeoman-generator-angularangular-template
Urasquirrel
Urasquirrel

Reputation: 1585

generator-angular-fullstack directive templateurl not rendering

Disclosue: This has been thoroughly checked for duplicates and on-topic/off-topic. This is an issue that my roommate also has when he tried it so it is obviously a common issue. I have found others with a similar issue, but there's was solved by something that won't solve this particular issue.

I am relatively new to all of these frameworks, but I could really use more eyes on this. I am using the generator-angular-fullstack and when I simply generate a directive and the templateurl is not rendering as the title implies. There is no get on the Network as Angular doesn't work like that. I have tried writing my own directive which also didn't go so well and only worked with using template: instead of templateurl. If I try 

ng-include="'app/geoData/geoData.html'"

on the main.html it populates fine, but I find this to be a terrible route considering the html looks so much cleaner with my custom directives, AND there is another call on the Network which in the end will slow everything way down. Is there something I am missing? Does generator-angular-fullstack have a new bug that hasn't been updated yet?

This is my directive, which is being called on the main.html which is called in the index.html. 

  'use strict';            
    angular.module('dangerzoneApp')
          .directive('geoData', function () {
                return {
                    templateUrl: 'app/geoData/geoData.html',
                    restrict: 'EA',
                    link: function (scope, element, attrs) {
                    }
                };
          });

This is my main.html

<div ng-include="'components/navbar/navbar.html'"></div>

<header class="hero-unit" id="banner">
  <div class="container" >
    <h1>O'HAI, there!</h1>       
    <geo-data></geo-data>
    <img src="assets/images/yeoman.png" alt="I'm Yeoman">
  </div>

</header>

<div class="container">
  <div class="row">
    <div class="col-lg-12">  
      <h1 class="page-header">Features:</h1>
      <ul class="nav nav-tabs nav-stacked col-md-4 col-lg-4 col-sm-6" ng-repeat="thing in awesomeThings">
        <li><a href="#" tooltip="{{thing.info}}">{{thing.name}}<button type="button" class="close" ng-click="deleteThing(thing)">&times;</button></a></li>
      </ul>
    </div>
  </div>

  <form class="thing-form">
    <label>Syncs in realtime across clients</label>
    <p class="input-group">
      <input type="text" class="form-control" placeholder="Add a new thing here." ng-model="newThing">
      <span class="input-group-btn">
        <button type="submit" class="btn btn-primary" ng-click="addThing()">Add New</button>
      </span>
    </p>
  </form>
</div>

<footer class="footer">
  <div class="container">
      <p>Angular Fullstack v2.0.13 |
        <a href="https://twitter.com/tyhenkel">@tyhenkel</a> |
         <a href="https://github.com/DaftMonk/generator-angular-fullstack/issues?state=open">Issues</a></p>
  </div>
</footer>

And this is my index.html

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <base href="/">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(client) app/vendor.css -->
      <!-- bower:css -->
      <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
      <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
      <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css({.tmp,client}) app/app.css -->
    <link rel="stylesheet" href="app/app.css">
      <!-- injector:css -->
      <link rel="stylesheet" href="app/account/login/login.css">
      <link rel="stylesheet" href="app/admin/admin.css">
      <link rel="stylesheet" href="app/app.css">
      <link rel="stylesheet" href="app/geoData/geoData.css">
      <link rel="stylesheet" href="app/main/main.css">
      <link rel="stylesheet" href="components/modal/modal.css">
      <!-- endinjector -->
    <!-- endbuild -->
  </head>
  <body ng-app="dangerzoneApp" geo-data>
    <!--[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]-->
<geo-data></geo-data>
    <!-- Add your site or application content here -->
    <div ui-view=""><geo-data></geo-data></div>
<geo-data></geo-data>
    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-XXXXX-X');
      ga('send', 'pageview');
    </script>

    <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.min.js"></script>
    <![endif]-->
    <!-- build:js({client,node_modules}) app/vendor.js -->
      <!-- bower:js -->
      <script src="bower_components/jquery/dist/jquery.js"></script>
      <script src="bower_components/angular/angular.js"></script>
      <script src="bower_components/angular-resource/angular-resource.js"></script>
      <script src="bower_components/angular-cookies/angular-cookies.js"></script>
      <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
      <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
      <script src="bower_components/lodash/dist/lodash.compat.js"></script>
      <script src="bower_components/angular-socket-io/socket.js"></script>
      <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
      <!-- endbower -->
      <script src="socket.io-client/socket.io.js"></script>
    <!-- endbuild -->

        <!-- build:js({.tmp,client}) app/app.js -->
        <script src="app/app.js"></script>
          <!-- injector:js -->
          <script src="app/account/account.js"></script>
          <script src="app/account/login/login.controller.js"></script>
          <script src="app/account/settings/settings.controller.js"></script>
          <script src="app/account/signup/signup.controller.js"></script>
          <script src="app/admin/admin.controller.js"></script>
          <script src="app/admin/admin.js"></script>
          <script src="app/main/main.controller.js"></script>
          <script src="app/main/main.js"></script>
          <script src="app/message/message.controller.js"></script>
          <script src="components/auth/auth.service.js"></script>
          <script src="components/auth/user.service.js"></script>
          <script src="components/modal/modal.service.js"></script>
          <script src="components/mongoose-error/mongoose-error.directive.js"></script>
          <script src="components/navbar/navbar.controller.js"></script>
          <script src="components/socket/socket.service.js"></script>
          <!-- endinjector -->
        <!-- endbuild -->
</body>
</html>

File tructure: This is the standard file structure for generator-angular-fullstack.

├── client
│   ├── app                 - All of our app specific components go in here
│   ├── assets              - Custom assets: fonts, images, etc…
│   ├── components          - Our reusable components, non-specific to app

How folders are set up under app. main

├── main.js                 - Routes
├── main.controller.js      - Controller for our main route
├── main.controller.spec.js - Test
├── main.html               - View
└── main.css               - Styles

How geoData folder is set up under app.

├── geoData.directive.js      - Controller for our main route
├── geoData.directive.spec.js - Test
├── geoData.html               - View
└── geoData.css               - Styles

I apologize for any typos in advance. I am looking for help not a smart mouth. Please be polite and courteous as this is my first delve into these frameworks. Thanks also in advance!

Upvotes: 0

Views: 693

Answers (2)

user304
user304

Reputation: 26

Know that 4.0.x of angular-fullstack does not presently support templateUrl. You have to use

template: require('filename');

This was very recently diagnosed in issue 2198 of angular-fullstack,

https://github.com/angular-fullstack/generator-angular-fullstack/issues/2198

It was diagnosed after your issue, so you didn't miss finding it.

Upvotes: 1

zilcuanu
zilcuanu

Reputation: 3715

Can you check if the js file containing the directive is loaded in the index.html file. This should resolve your issue - hopefully.

Upvotes: 0

Related Questions