Angular for DataBind Only -ng-init

724 Views Asked by At

At the top of my page I have

==============================================================================

<html lang="en" data-ng-app="app">
<head>
    <style>
        /* This helps the ng-show/ng-hide animations start at the right place. */
        /* Since Angular has this but needs to load, this gives us the class early. */
        .ng-hide {
            display: none !important;
        }
    </style>

============================================================================

Further down in the body I have.

============================================================================

<div class="row row-offcanvas row-offcanvas-left" data-ng-controller="dashboard" data-ng-init="vm=dashboard()">

==================================================

I want to render the following within the body on the start page

==================================================

<span class="bold">{{vm.title}}</span> Messages

==================================================

This is only on the start page. I want to use Angular for binding and not single page. Any ideas. I tried creating a route back to the first page but as you know it caused an infinite loop. I think that ng-init is the way to go but it did not work. Thanks

dashboard is a controller. This is from the Angular Hotowel example by John Papa on Pluralsight.

(function () {
    'use strict';
    var controllerId = 'dashboard';
    angular.module('app').controller(controllerId, ['common', 'datacontext', dashboard]);

    function dashboard(common, datacontext) {
        var getLogFn = common.logger.getLogFn;
        var log = getLogFn(controllerId);

        var vm = this;
        vm.news = {
            title: 'hottowel',
            description: 'Welcome'
        };
        vm.messageCount = 0;
        vm.people = [];
        vm.title = 'Dashboard';

        activate();

        function activate() {
            var promises = [getMessageCount(), getPeople()];
            common.activateController(promises, controllerId)
                .then(function () { log('Activated Dashboard View'); });
        }

        function getMessageCount() {
            return datacontext.getMessageCount().then(function (data) {
                return vm.messageCount = data;
            });
        }

        function getPeople() {
            return datacontext.getPeople().then(function (data) {
                return vm.people = data;
            });
        }
    }
})();
2

There are 2 best solutions below

2
On BEST ANSWER

In order for yoh to be able to call dashboard(), it should be a function on the controller's scope (which is not the case).
I believe you are trying to use the controller as syntax (more info):

<div ... ng-controller="dashboard as vm">
    ...
    {{vm.title}}
0
On

you can not use the router if you wish, and not set routes in your angular app, that way it won't conflict with your backend router