angularjs - multiple app .js files with its own controller

Question

I want to develop a site with main page that route to several other pages. All page will have their own app.js file with their own .controller for easy code management.

pages.html

<html ng-app="myPageApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.js"></script>
    <script src="js/mypages.js"></script>
  </head>
  <body>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
        <li><a href="#users"><i class="fa fa-comment"></i> Users</a></li>
      </ul> 
    <!-- angular templating -->
        <!-- this is where content will be injected -->
    <div ng-view></div>

  </body>
</html>

mypages.js

var myPageApp = angular.module("myPageApp",['ngRoute']);
myPageApp.config(function($routeProvider) {
    $routeProvider

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

users.html

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="../js/myusers.js"></script>
  </head>
  <body>
    <div ng-app="myUsersApp">
    <div  ng-controller="UsersCtrl">
    <ul class="unstyled">
        <li ng-repeat="user in UsersCtrl.users">
          <span >{{user}}</span>
        </li>
      </ul>
    <input type="text" ng-model="user" placeholder="Name please">
    User {{user}}
    </div>
    </div>
  </body>
</html>

myusers.js

    var myUsersApp = angular.module("myUsersApp",['']);
myUsersApp.controller('UsersCtrl',[ '$scope', function($scope){
    $scope.users = ['john','marry'];

    $scope.add = function() {
        $scope.users.push($scope.user);
        $scope.user = "";
    }

}]);

I can never get the myusers.js to work. when I Inspect element, It seems like myusers.js was not called at all. Any thoughts?

the syntax here is all over the place. Firstly, you can't use `ng-app` and `ng-controller` without arguments; Second, you can only use `ng-app` once per page. Why you are trying to make these controllers into completely separate apps isn't exactly clear, but whatever the reason, this isn't the way to do it. There is enough wrong here that it would be hard to offer one answer that corrects all the issues. — Claies, Oct 13 '15 at 01:05
Why not use one ng-app and just use routing to keep it an SPA? what is the reasoning for using separate ng-apps and routing like this? — ajmajmajma, Oct 13 '15 at 01:10
I would recommend looking into some projects or scaffolds that use ui-router. https://github.com/angular-ui/ui-router . If you check out the examples on their github they have separate pages routed with separate controllers for each, all inside 1 ng-app. If you're just trying to achieve separate pages with separate controllers, all you need is some routing correctly set up :). — ajmajmajma, Oct 13 '15 at 01:12
I understand how to have different controllers for separate pages in the same `js` file. But as the project grow the controller become bigger and harder to manage. That is why I want to have it in separate `js` files. — sooon, Oct 13 '15 at 01:23
there is nothing wrong with having your controllers in separate .js files, in fact that is recommended. What is wrong here is having your controllers in completely separate modules that aren't visible to each other, and trying to use `ng-app` more than once. — Claies, Oct 13 '15 at 01:34
I found [this](http://www.teebow.net/splitting-angularjs-controllers-separate-files/) . trying to get it to work now. — sooon, Oct 13 '15 at 02:04

score 0 · Answer 1 · edited May 23 '17 at 11:44

After multiple tests and more reading, I figured out how it work.

pages.html

    <html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.js"></script>
    <script src="js/mypages.js"></script>
    <script src="js/usersctrl.js"></script>...

Add all controllers js files at the landing page. The sequence of the links are important.

mypages.js

var myApp = angular.module("myApp",['ngRoute']);
    myApp.config(function($routeProvider) {
        $routeProvider
            // route for the home page
        .when('/', {
            templateUrl : 'pages/users.html',
            controller : 'UsersCtrl'//<--add this
        });
});

Link controller with the specific page. Example above pages/users.html ->UsersCtrl.

usersctrl.js

    var app= angular.module('myApp');
    myApp.controller('UsersCtrl',[ '$scope', function($scope){
        console.log("UsersCtrl");

        $scope.clickMe = function() {
        console.log("i m clicked!");
}
    }]);

Create and populate functions into controller``js as usual.

pages/users.html

  <body>
<div>
  <button ng-click="clickMe()">Click me!</button>
  </div>

Notice that in the users.html, no need to add in ng-app and ng-controller anymore. This is important too.

angularjs - multiple app .js files with its own controller

1 Answers1