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, Dec 18 '15 at 00:04
Yes testNgView is in scope, you could check it yourself. I defined it in "page2file.php" as you can see it in my code — Priadhana Edi Kresnha, Dec 18 '15 at 00:48
anyone can give me solution? it is ok if I must create new module in my new page so that I can manage the controller to focus on that page only. 1 ng-view page 1 controller — Priadhana Edi Kresnha, Dec 18 '15 at 00:51
I recommended that you change your code style, by using controller in different js, and use gulp to build one js for the app. e.g. TestOne.js, TestTwo.js, put js in — Tom, Dec 18 '15 at 01:15
Okay, it might not a good programming style. But could I load one controller only when I route to each page? Assume that I have 20 routing pages, I only want to load one controller when I access 1 page. I don't want to define or load all controllers in the mainpage. Could I do it? You could use answer area to show your code, how to do it, or you could add some references. — Priadhana Edi Kresnha, Dec 18 '15 at 02:52

score 1 · Accepted Answer · edited May 23 '17 at 11:59

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...

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? — Priadhana Edi Kresnha, Dec 18 '15 at 02:38
Right, but you're referencing your module variable in page2file which is not defined there. Instead, use angular.module('testNgView').controller('testTwo', testTwo); — Shaun Scovil, Dec 18 '15 at 03:45
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. — Priadhana Edi Kresnha, Dec 18 '15 at 22:30

create controller in ng-view page

1 Answers1