CODEWITHSUNDEEP
angularjs
coson
coson

Reputation: 8659

Change contents of ng-view inside ng-view

Good Day,

I'm trying to create an SPA with Angular. Here is my index.html page:

<!DOCTYPE html>
<html lang="en" ng-app="onlineApp">
<head>
    <meta charset="UTF-8">
    <title>Online</title>
    <link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="css/mystyle.css">
    <base href="/Client/">
</head>
<body ng-controller="mainController">

<div class="container"> <!--- This is the box login  -->
    <div ng-view></div>
</div>

<script src="components/angular/angular.js"></script>
<script src="components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
</body>
</html>

and here is app.js:

var onlineApp = angular.module('onlineApp', ['ngRoute']);

onlineApp.controller('mainController', function($scope) {
    $scope.message = 'Test Message';
});

onlineApp.controller('signupController', function($scope) {
    $scope.message = 'Sign up Message';
});

onlineApp.config(function($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'pages/home.html',
            controller: 'mainController'
        })
        .when('/signup', {
            templateUrl: 'pages/signup.html',
            controller: 'signupController'
        })
        .otherwise({
            redirectTo: '/'
        });

        // use the HTML 5 History API
        $locationProvider.html5Mode(true);
});

My problem is: Inside the contents of the ng-view (home.html), I have a button. When I click the button, I want to go to a signup page as defined in the route handler and it's not working. I think the problem is "inside" the ng-view.

EDIT: Here's a snippet of pages/home.html:

<div class="pull-right col-md-4">
    <label class="pull-right col-md-12 create-monthly">Create a Monthly Parker Account</label>
    <a id="btn-create" class="btn btn-primary" href="#signup" >
    Create Account
    </a>
</div>

When I click on the button, I want the contents of pages/home.html to be replaced with the contents of pages/signup.html END EDIT:

All of the examples I see of ng-view being used is when the links are outside of the ng-view.

Can I change the contents of ng-view while I'm inside the ng-view itself? Or is there some sort of project that would allow me to do that.

TIA,

coson

Upvotes: 0

Views: 1342

Answers (2)

robert.bo.roth
robert.bo.roth

Reputation: 1343

The nice thing about using ui-router is that you can treat your view changes as simple page redirects. i.e. you can use an anchor tag to redirect the browser to the specified url and ui-router will catch that before the page refreshes and just update your ui-view without refreshing the page.

<a href="#/signup">Click this link to go to signup.</a>

Upvotes: 0

Patrick Kelleter
Patrick Kelleter

Reputation: 2771

you just have to change the location of the browser to change the route. i do not really understand your problem, probably you will have to rephrase it or post a little bit more code (from inside your ng-view)

potentially either a link of the form

<a href="#/signup">Click me to switch</a>

or a manual location change with the $location service (inject it to your controller)

$location.path("/signup");

should do the job. im not sure what you mean by links inside and outside of ng-view.

Upvotes: 1

Related Questions