Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Akeem 43 posts 198 karma points
    Mar 31, 2017 @ 14:57
    Akeem
    0

    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

  • Akeem 43 posts 198 karma points
    Mar 31, 2017 @ 14:58
    Akeem
    0

    enter image description here

  • Akeem 43 posts 198 karma points
    Mar 31, 2017 @ 18:07
    Akeem
    100

    i have solved this by assigning angular.module() to a varibale that i used in all the files.

    That fixed the issue

  • Micha Somers 134 posts 597 karma points
    Apr 01, 2017 @ 11:50
    Micha Somers
    0

    Why did you post this rather AngularJS + UI-router specific question in this Umbraco forum?

    ... Just a bit curious on how this question & answer is related to Umbraco.

    Do you have plans to use Umbraco from this code?

    If so, can you tell something about it?

Please Sign in or register to post replies

Write your reply to:

Draft