Question

我已将示例附加到plunker

<html>

   <head>
      <title>Angular JS Views</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
   </head>

   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp">
         <p><a href = "#addStudent">Add Student</a></p>
         <p><a href = "#viewStudents">View Students</a></p>
         <div ng-view></div>

         <script type = "text/ng-template" id = "addStudent.htm">
            <h2> Add Student </h2>
            {{message}}
         </script>

         <script type = "text/ng-template" id = "viewStudents.htm">
            <h2> View Students </h2>
            {{message}}
         </script>
      </div>

      <script>
         var mainApp = angular.module("mainApp", ['ngRoute']);


         mainApp.config(['$routeProvider', function($routeProvider) {
            $routeProvider.

            when('/addStudent', {
               templateUrl: 'addStudent.htm',
               controller: 'AddStudentController'
            }).

            when('/viewStudents', {
               templateUrl: 'viewStudents.htm',
               controller: 'ViewStudentsController'
            }).

            otherwise({
               redirectTo: '/addStudent'
            });
         }]);



      </script>

   </body>
</html>

运行我的应用程序时，外部示例内容加载到我的布局页面中。我保持了seaparate js（template.js）。虽然未在角度控制器功能中加载脚本部分，但未分配值。所以控件渲染时没有任何模型值。我想保留超过50个js文件。在这里，我不能在主页面（index.html）中引用我的js文件。

Answer 1

您正在分配控制器

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        // home page
          .when('/', {
              templateUrl: 'Samples/template.html',
              controller: "DropDownCtrl",
          })
.otherwise({
        redirectTo: '/'
    });
});

还在标头中包含template.js文件试试这个

如何在外部

1 个答案: