Fatal编程技术网
  • javascript/
  • Javascript angularjs-具有自己控制器的多个app.js文件

Javascript angularjs-具有自己控制器的多个app.js文件

javascript angularjs

Javascript angularjs-具有自己控制器的多个app.js文件,javascript,angularjs,Javascript,Angularjs,我想开发一个网站的主页，路由到其他几个页面。所有页面都有自己的app.js文件和自己的.controller，便于代码管理 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="htt

我想开发一个网站的主页，路由到其他几个页面。所有页面都有自己的
app.js
文件和自己的
.controller
，便于代码管理

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>

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

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

  <body>
<div>
  <button ng-click="clickMe()">Click me!</button>
  </div>
users.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>

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

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

  <body>
<div>
  <button ng-click="clickMe()">Click me!</button>
  </div>
我永远无法让
myusers.js
正常工作。当I
Inspect元素
时，似乎根本没有调用
myusers.js
。有什么想法吗？

经过多次测试和更多测试，我发现了它的工作原理

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>

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

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

  <body>
<div>
  <button ng-click="clickMe()">Click me!</button>
  </div>
将控制器链接到特定页面。上面的示例
pages/users.html
->
UsersCtrl

usersctrl.js

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

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

    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 = "";
    }

}]);

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
        });
});

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

        $scope.clickMe = function() {
        console.log("i m clicked!");
}
    }]);
像往常一样，创建函数并将其填充到
控制器``js
中

page/users.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>

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

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

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


点击我！

请注意，在
users.html
中，不再需要添加
ngapp
和
ngcontroller
。这也很重要。

这里的语法到处都是。首先，您不能使用没有参数的
ng-app
和
ng-controller
；其次，每页只能使用
ng app
一次。你为什么要把这些控制器变成完全独立的应用程序还不清楚，但不管是什么原因，这都不是办法。这里有足够多的错误，很难提供一个解决所有问题的答案。为什么不使用一个ng应用程序，只使用路由来保持它的SPA？使用单独的ng应用程序和这样的路由的理由是什么？如何在不同的
js
文件中使用不同的控制器？我建议研究一些使用ui路由器的项目或框架。如果你在他们的github上查看示例，他们有单独的页面，每个页面都有单独的控制器，都在1NG应用程序中。如果您只是想用单独的控制器实现单独的页面，那么您只需要正确设置一些路由：）。我了解如何在同一
js
文件中为单独的页面使用不同的控制器。但是随着项目的发展，控制器变得越来越大，越来越难管理。这就是为什么我想把它放在单独的
js
文件中。