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
– Claies, Commented Oct 13, 2015 at 1: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
– ajmajmajma, Commented Oct 13, 2015 at 1:10
I would recommend looking into some projects or scaffolds that use ui-router. 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
– ajmajmajma, Commented Oct 13, 2015 at 1: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
– sooon, Commented Oct 13, 2015 at 1:23

Community · Accepted Answer · 2017-05-23 11:44:49Z

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.

Collectives™ on Stack Overflow

angularjs - multiple app .js files with its own controller

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related