Help Please

[totallytotallyamazing]

Hi Vinay,
Thanks for writing what seems to be some awesome code!
I am having some problems getting it going in my Grunt project and would appreciate your help please.
I added your "ngMeta" component via bower to my project build and updated my "bower.json" file like this:

    {
      "name": "yeoman-angular-test",
      "version": "0.0.0",
      "dependencies": {
        "angular": "^1.4.7",
        "angular-animate": "^1.3.0",
        "angular-aria": "^1.3.0",
        "angular-cookies": "^1.3.0",
        "angular-messages": "^1.3.0",
        "angular-resource": "^1.3.0",
        "angular-route": "^1.3.0",
        "angular-sanitize": "^1.3.0",
        "angular-touch": "^1.3.0",
        "ngMeta": "^0.2.1"
      },
      "devDependencies": {
        "angular-mocks": "^1.3.0"
      },
      "appPath": "app",
      "moduleName": "yeomanAngularTestApp"
    }

Here's the my HTML5 meta tags:

    <title>{{ metaTags.title }}</title>
    <meta name="description" content="{{ metaTags.description }}">

Here's my JS Body links:

        <!-- build:js(.) scripts/vendor.js -->
        <!-- bower:js -->
        <script src="bower_components/angular/angular.js"></script>
        <script src="bower_components/angular-animate/angular-animate.js"></script>
        <script src="bower_components/angular-aria/angular-aria.js"></script>
        <script src="bower_components/angular-cookies/angular-cookies.js"></script>
        <script src="bower_components/angular-messages/angular-messages.js"></script>
        <script src="bower_components/angular-resource/angular-resource.js"></script>
        <script src="bower_components/angular-route/angular-route.js"></script>
        <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
        <script src="bower_components/angular-touch/angular-touch.js"></script>
        <script src="bower_components/ngMeta/src/ngMeta.js"></script>
        <!-- endbower -->
        <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <script src="scripts/controllers/about.js"></script>
        <script src="scripts/controllers/contact.js"></script>
        <!-- endbuild -->

Here's my AngularJS app:

    angular
      .module('app', [
        'ngAnimate',
        'ngAria',
        'ngCookies',
        'ngMessages',
        'ngResource',
        'ngRoute',
        'ngSanitize',
        'ngTouch',
        'ngMeta'
      ])
      .config(function ($routeProvider, ngMetaProvider) {
        $routeProvider
          .when('/', {
            templateUrl: 'views/index.dot.html',
            controller: 'MainCtrl',
            meta: {
              title: 'Home title',
               description: 'Home description'
            }
          })
          .when('/about', {
            templateUrl: 'views/about.html',
            controller: 'AboutCtrl',
            meta: {
              title: 'about title',
              description: 'about description'
            }
          })
          .when('/contact', {
            templateUrl: 'views/contact.html',
            controller: 'ContactCtrl',
            meta: {
              title: 'contact title',
              description: 'contact description'
            }
          })
          .otherwise({
            redirectTo: '/'
          });
          ngMetaProvider.setName('metaTags');
      });

Here's my controller file "main.js":

    'use strict';
    angular.module('app')
    .controller('MainCtrl', function ($scope, $route) {
        $scope.awesomeThings = [
            'HTML5 Boilerplate',
            'AngularJS',
            'Karma'
        ];
        $scope.$route = $route;
    });

Here's my controller file "about.js":

    'use strict';
    angular.module('app')
        .controller('AboutCtrl', function ($scope, $route) {
            $scope.awesomeThings = [
                'HTML5 Boilerplate',
                'AngularJS',
                'Karma'
            ];
            $scope.$route = $route;
        });

Here's my controller file "contact.js":

    'use strict';
    angular.module('app')
        .controller('ContactCtrl', function ($scope, $route) {
            $scope.awesomeThings = [
                'HTML5 Boilerplate',
                'AngularJS',
                'Karma'
            ];
            $scope.$route = $route;
        });

Please let me know if you need any further information or explaination.
Kind regards,
Derek

[vinaygopinath]

Hi @totallytotallyamazing, thanks for trying out the module!

Your app.js code is missing the run block

angular.module('app', ['ngMeta'])
.run(function(ngMeta) {
//Makes ngMeta available in the module
});

That should fix it.

P.S: I realise injecting ngMeta into the run block for no apparent reason is quirky. I plan on ironing this out in future releases.

[totallytotallyamazing]

Hi Vinay,
I just tried again and had previously tried to use your suggested ".run ..." code snippet, but not sure where to put it in my "app.js" code.
Can you please show me where in my "app.js" file to put it?
In other words how to incorporate it.

Also I wanted to tell you that I had some success adding ngMeta to my "main.js" controller:

'use strict';

angular.module('app')
    .controller('MainCtrl', function ($scope, $route, ngMeta) {
        $scope.awesomeThings = [
            'HTML5 Boilerplate',
            'AngularJS',
            'Karma'
        ];
        $scope.$route = $route;
        ngMeta.setTitle('Home title');
        ngMeta.setDescription('Home description');
    });

Thank you,
Derek

[vinaygopinath]

I've added the run block to your app.js code. Let me know if that solves your issue.

    angular
      .module('app', [
        'ngAnimate',
        'ngAria',
        'ngCookies',
        'ngMessages',
        'ngResource',
        'ngRoute',
        'ngSanitize',
        'ngTouch',
        'ngMeta'
      ])
      .config(function ($routeProvider, ngMetaProvider) {
        $routeProvider
          .when('/', {
            templateUrl: 'views/index.dot.html',
            controller: 'MainCtrl',
            meta: {
              title: 'Home title',
               description: 'Home description'
            }
          })
          .when('/about', {
            templateUrl: 'views/about.html',
            controller: 'AboutCtrl',
            meta: {
              title: 'about title',
              description: 'about description'
            }
          })
          .when('/contact', {
            templateUrl: 'views/contact.html',
            controller: 'ContactCtrl',
            meta: {
              title: 'contact title',
              description: 'contact description'
            }
          })
          .otherwise({
            redirectTo: '/'
          });
          ngMetaProvider.setName('metaTags');
      })
     .run(function(ngMeta) {
     });

[totallytotallyamazing]

I was able to get that code going without jshint errors but it didn't work.
So for now I'm able to add them via the controller, see below:

'use strict';

angular.module('app')
    .controller('MainCtrl', function ($scope, $route, ngMeta) {
        $scope.awesomeThings = [
            'HTML5 Boilerplate',
            'AngularJS',
            'Karma'
        ];
        $scope.$route = $route;
        ngMeta.setTitle('Home title');
        ngMeta.setDescription('Home description');
    });

[bdairy]

is there anything to do that fixes this issue,, it cannot read anything from the .states configuration,, you have to set things in the controller

[vinaygopinath]

@bdairy, are you sure the run block exists in your app.js?

.run(function(ngMeta) {
}

At the moment, it's required for ngMeta to be instantiated and made available throughout your app.
Can you add this to one of your HTML template files and let me know the output?

<pre>
Title = {{ngMeta.title | json}}
ngMeta object = {{ngMeta | json}}
</pre>

[bdairy]

@vinaygopinath please remove my post because it was a problem from my side and now it works like charm.. thanks for your fast response

[vinaygopinath]

@bdairy No problem! Glad it works for you.

@totallytotallyamazing Can you give it another go and see if you're unable to get ngMeta working through your $route configuration? Please make sure you have the run block in your code and display the ngMeta object in HTML as mentioned in my previous comment.

[vinaygopinath]

I've added a link to the demo site. Please refer to the code there to set up ngMeta in your app.