Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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?

share|improve this question
2  
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 1:05
1  
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 1:10
    
How to have different controllers in different js files? – sooon Oct 13 '15 at 1:11
1  
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 Oct 13 '15 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 Oct 13 '15 at 1:23
up vote 0 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.