AngularJS: Controller inside ng-view

Question

I have problem with controller load when I triggered ng-route. This is my main page:

    <!DOCTYPE html>
    <html>
    <head ng-app="testapp">
        <script type="text/javascript" src="angular.js"></script>
        <script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="app.js"></script>
            <title>XX</title>
    </head>
    <body>
        <nav ng-controller="defaultnav"></nav>
        <div ng-view></div>
    </body>
    </html>

and this is my app.js file:

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

app.config(function ($routeProvider) {
            $routeProvider.
                when("/", {
                    templateUrl: "index.html"
                })
                .when("/page1", {
                    templateUrl: "page1.html"
                })
        })

inside the page1.html I inisiate controller like this:

<div ng-controller="page1">

</div>

<script type="text/javascript">
    app.controller('page1', function ($scope) {
        // code...
    })
</script>

I don't know best practice to handle this. When I code this I got error with [Error, ctrlreg] it says that I have problem about registering controller. Please give me advice to solve this. Thanks in advance.

After an angular app is bootstrapped you can not register controllers with. Tou need to do that before app bootstraps. — Manish, Mar 04 '18 at 08:42
In addition to what Manish said: the controller should be specified in the route definition, not using ng-controller in the view. — JB Nizet, Mar 04 '18 at 08:44
what if I add `.when("/page1", { templateUrl: "page1.html", controller: "page1" })` ? it's not working too — imma hanitya, Mar 04 '18 at 09:33

score 1 · Answer 1 · answered Mar 04 '18 at 08:57

In JS, the app name in line var app = angular.module('enterprise', ['ngRoute']); is enterprise
In HTML, <head ng-app="testapp">, the app name is testapp. Change to <head ng-app="enterprise">
Its best practice to load the java script seperately. so remove js code from html and keep it in seperate file and load it

Click here for working demo in plnkr.

You can use AngularJS ngRoute:

// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);

// configure our routes
scotchApp.config(function($routeProvider) {
  $routeProvider

  // route for the home page
    .when('/home', {
    templateUrl: 'pages/home.html',
    controller: 'mainController'
  })

  // route for the about page
  .when('/about', {
    templateUrl: 'pages/about.html',
    controller: 'aboutController'
  })

  // route for the contact page
  .when('/contact', {
    templateUrl: 'pages/contact.html',
    controller: 'contactController'
  })

  //otherwise redirect to home
  .otherwise({
    redirectTo: "/home"
  });
});

// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
  // create a message to display in our view
  $scope.message = 'Everyone come and see how good I look!!!!';
});

scotchApp.controller('aboutController', function($scope) {
  $scope.message = 'Look! I am an about page.';
});

scotchApp.controller('contactController', function($scope) {
  $scope.message = 'Contact us!.';
});

AngularJS: Controller inside ng-view

1 Answers1