angular js with ui router - Templates, (partial) views and macros

Akeem 43 posts 198 karma points

Mar 31, 2017 @ 14:57

Angular JS with UI-router

Please help me with this . I am using a Ui-router with the code below to display my partial-application page` angular .module('myAppApp', [ 'ngAnimate', 'ngCookies', 'ngResource',

'ngSanitize',
'ngTouch',
'ui.router'

])

.config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/origin');

    $stateProvider

        // HOME STATES AND NESTED VIEWS ========================================
        .state('home', {
            url: '/home',
            templateUrl: 'views/partial-home.html'
        })

        //login Page ========================================
        .state('login', {
            url: '/login',
            templateUrl: '/login.html'
        })

        .state('loginlayout', {
            url: '/loginlayout',
            templateUrl: 'views/partial-login.html'
        })
        //Financing Programs Page
        .state('financeprogram', {
            url: '/financeprogram',
            templateUrl: 'views/partial-financeprogram.html'
        })
        //My Application Page =================================
        .state('application', {
            url: '/application',
            templateUrl: 'views/partial-application.html',
            controller: 'ApplicationCtrl'

        })
        // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
        .state('about', {
            // we'll get to this in a bit
        })
        //origination page
        .state('origin', {
            url: '/origin',
            templateUrl: 'views/partial-origin.html'
        });

});

`

Then my controller Page

![enter code here][1]

Then my View Page

<div class="page" ng-controller="ApplicationCtrl">
<h3>Originations > My Applications </h3>
<hr class="ruler">
<p>The My Applications section will house all applications that you are associated with. Depending on your role within the system, you will see either a “Submissions” list or a “Received” list (or both in some circumstances). Please select from the list(s) below the application you would like to work on by clicking on the Transaction Number found in the left hand column.

</p>
<span class="clearfix"></span>
<h4>Search for Transaction... </h4>
<hr class="ruler">



<hr>
<input ng-model="name">

<!-- Add your site or application content here -->

<div class="header accordion-inner">
    <div class="navbar">
        <a class="navbar-brand" href="#/">Financial Hub</a>
    </div>
    <div class="navbar navbar-default" role="navigation">
        <div class="container-fluid navbars">
            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

                <!--                  <a class="navbar-brand" href="#/">Financial Hub</a>-->
            </div>

            <div class="collapse navbar-collapse" id="js-navbar-collapse">

                <ul class="nav navbar-nav navbar-right">
                    <li id="nav-link"><a href="#/">ORIGINATIONS</a></li>
                    <li id="nav-link"><a ui-sref="syndication">SYNDICATION</a></li>
                    <li id="nav-link"><a ui-sref="trading">TRADING PLATFORM</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Sidebar -->

<div class="col-sm-3 col-md-2 sidebar">
    <ul class="nav nav-sidebar">
        <li class="active li-link">
            <a ui-sref="origin" class="a-link">
                <span class="glyphicon glyphicon-home"></span> HOME <span class="sr-only">(current)</span></a>
        </li>
        <li class="li-link"><a ui-sref="financeprogram" class="a-link"><span class="glyphicon glyphicon-usd"></span>
            FINANCING PROGRAM</a></li>
        <li class="li-link"><a ui-sref="application" class="a-link"><span class="glyphicon glyphicon-folder-open"></span>
            MY APPLICATIONS</a></li>
        <li class="li-link"><a ui-sref="education" class="a-link"><span class="glyphicon glyphicon-book"></span>
            EDUCATION RESOURCES</a></li>
        <li class="li-link"><a ui-sref="contact" class="a-link"><span class="glyphicon glyphicon-envelope"></span>
            CONTACT US</a></li>
    </ul>
</div>

<div class="container">
    <!--        <div ng-view=""></div>-->
    <div ui-view></div>
    <!-- We'll also add some navigation: -->

</div>

<div class="footer">
    <div class="container">
        <!--            <p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>-->
    </div>
</div>




<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
    ! function(A, n, g, u, l, a, r) {
        A.GoogleAnalyticsObject = l, A[l] = A[l] || function() {
                (A[l].q = A[l].q || []).push(arguments)
            }, A[l].l = +new Date, a = n.createElement(g),
            r = n.getElementsByTagName(g)[0], a.src = u, r.parentNode.insertBefore(a, r)
    }(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

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

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->

<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-animate/angular-animate.min.js"></script>
<script src="/bower_components/angular-cookies/angular-cookies.min.js"></script>
<script src="/bower_components/angular-mocks/angular-mocks.js"></script>
<script src="/bower_components/angular-resource/angular-resource.min.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="/bower_components/angular-route/angular-route.min.js"></script>
<script src="/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="/bower_components/angular-touch/angular-touch.min.js"></script>
<script src="/bower_components/angular-smart-table/dist/smart-table.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!--   <script src="/bower_components/bootstrap/less/"-->
<script src="scripts/app.js"></script>

<script src="scripts/controllers/origin.js"></script>
<script src="scripts/controllers/home.js"></script>
<script src="scripts/controllers/application.js"></script>
<script src="scripts/services/applicationservice.js"></script>

<!-- endbuild -->

I feel everything is right but its not displaying the name value passed from the controller . I do not know what is wrong. Please help

Copy Link

Akeem 43 posts 198 karma points

Mar 31, 2017 @ 14:58

enter image description here