Question

我正在试图将bootstrap ui模块添加到角度项目中。在每个教程中，我都读到了下载模块之后我应该将指令（ angular.module（例如：'App'，['ui.carousel'] ）添加到某个文件中我读过的一些论坛叫做app.js.这个文件在我的项目中不存在。问题是：我应该创建它吗？在哪里？控制器是否必要？这必须遵循的流程如何？然后我应该添加它到index.html？

Answer 1

使用组件进行高级操作，但不知道基础知识。我建议从just controllers开始（不带组件）。 但是，这里是添加脚本的基本示例：

<!DOCTYPE html>
<html ng-app="myApp">
<!-- Adding scripts here. The order matters: angular.js first, then its dependancies, e.g. ui-bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<body>

  <div>

    <!-- main body -->
    <div>
      <hello-world name="World"> </hello-world>
    </div>

  </div>

  <!-- ng-template simulates a separate file -->
  <script type="text/ng-template" id="my_component.html">
    <input class="form-control" ng-model='$ctrl.name'><br><span>Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!</span>
  </script>



  <!-- This script can be also written as:
    <script src="/app.js"></script>
  if the file `app.js` is located in root directory of the server, 
  which should contain the AngularJS code below
-->
  <script>
    var app = angular.module('myApp', ['ui.bootstrap']); // injected dependancies

    app.component("helloWorld", {
      templateUrl: "my_component.html",
      /* component template */
      bindings: {
        name: '@'
      },
      controller: function() {
        this.myName = 'Karolyn'; // use of `this` requires `$ctrl` in the template HTML
      }
    });
  </script>

</body>

</html>

将app.js添加到角度应用程序

1 个答案: