create controller in ng-view page

Question

I want to manage my controller specific to an ng-view page, therefore I put the controller in ng-view page and used that controller specific to that page only. However, the code does not show what it should show from that controller.

Here is my case. I split my code into 3 files, which are "mainfile.php", "page1file.php", and "page2file.php". "mainfile.php" contains main page which routes to page 1 and page 2. To compare the results, I created different conditions for those 2 pages. "page1file.php" uses controller which has been defined in "mainfile.php", while "page2file.php" uses controller which is defined in the page itself.

In this circumtances, "page1file.php" successfully shows what I want, but "page2file.php" does not show what it should show. Please help me and give a very simple explanation and a simple solution since I'm very new to angularjs.

Here is my code. You can just copy them and run it on your php server.

mainfile.php :

<!DOCTYPE html>
<html>
<head>
    <title>learn angular routing</title>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
    <script type="text/javascript">
        function routeReload($scope) {
            $scope.routeReloading = function(){
                window.location.reload();
            };
        }
        routeReload.$inject = ['$scope'];

        function routeConfig($routeProvider) {
            $routeProvider
                    .when('/one',{
                        templateUrl:'page1file.php'
                    })
                    .when('/two',{
                        templateUrl:'page2file.php'
                    })
                    ;
        }
        routeConfig.$inject=['$routeProvider'];

        function testOne($scope) {
            $scope.name = "page one";
        }
        testOne.$inject = ['$scope'];

        var testNgView = angular.module('testNgView',['ngRoute']);
        testNgView.config(routeConfig);
        testNgView.controller('routeReload',routeReload);
        testNgView.controller('testOne',testOne);
    </script>
</head>
<body>
    <div ng-app="testNgView">
        <div ng-controller="routeReload">
            View page <a ng-click="routeReloading();" href="#one">one</a> or
            <a ng-click="routeReloading();" href="#two">two</a>
            <div ng-view></div>
        </div>
    </div>
</body>
</html>

page1file.php :

<div ng-controller="testOne">
    This is {{name}}
</div>

page2file.php :

<script type="text/javascript">
    function testTwo($scope) {
        $scope.name = "page two";
    }
    testTwo.$inject = ['$scope'];
    testNgView.controller('testTwo',testTwo);
</script>
<div ng-controller="testTwo">
    This is {{name}}
</div>

I inspect elements, and it shows like this "This is {{name}}" — Priadhana Edi Kresnha
– Priadhana Edi Kresnha, Commented Dec 18, 2015 at 0:04

Community · Accepted Answer · 2017-05-23 11:59:09Z

1

I don't think you can inline script modules in your view templates. Have a look at this working version of your app, the way I would organize it:

http://plnkr.co/edit/nSsagK1Y04akNJyMToah?p=preview

You can use .php files in place of the .html files, that shouldn't make a difference.

So your main file should look something like this:

<!DOCTYPE html>
<html>
<head>
    <title>learn angular routing</title>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
</head>
<body>
    <div ng-app="testNgView">
        View page <a href="#/one">one</a>
        or <a href="#/two">two</a>

        <ng-view></ng-view>
    </div>

    <script src="app.module.js"></script>
    <script src="app.routes.js"></script>
    <script src="views/page1/controller.js"></script>
    <script src="views/page2/controller.js"></script>
</body>
</html>

If your goal is to use PHP to dynamically render your controllers, see the answer to this SO question: Angularjs: server side (php) rendering and data binding client side after an event

You may also be interested in this article, about loading Angular components after the application has been bootstrapped: http://www.bennadel.com/blog/2553-loading-angularjs-components-after-your-application-has-been-bootstrapped.htm

TL;DR: You would need to store a reference to $controllerProvider in the config phase, and then call $controllerProvider.register('MyController', MyController) in your inline script. I'm not sure how I feel about that though...

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Dec 18, 2015 at 1:29

Shaun Scovil

4,0075 gold badges45 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Priadhana Edi Kresnha Over a year ago

Yes, I appreciate your answer. But in my case I don't want to define testTwo controller in mainfile, instead I put it directly in page2file. Let's imagine that I have 20 routing pages, and each page has different controller definition. It would be easier to manage them if I put controller in each page, wouldn't it?

Shaun Scovil Over a year ago

Right, but you're referencing your module variable in page2file which is not defined there. Instead, use angular.module('testNgView').controller('testTwo', testTwo);

Priadhana Edi Kresnha Over a year ago

Ok, yours is the way better to manage the code than mine. It sures is a clean code. Thank you very much. I'm going to use that in my codes.

Shaun Scovil Over a year ago

Thanks! If the answer helped you, please accept it.

Collectives™ on Stack Overflow

create controller in ng-view page

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related