Question

好的，所以我正在尝试学习如何创建模块化的角度应用程序，但我真的不知道它看起来如何。基于我的代码，我需要做些什么来使其模块化？我的应用程序非常小，但我仍然想尝试创建一个模块化应用程序，以便我可以在下次创建Web应用程序时从头开始。我没有包括css，因为它似乎与这个问题无关。帮助会得到极大的帮助。

的index.html

<!DOCTYPE html>
<html>
<head>
  <header>To do App</header>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>To do App</title>
  <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">        </script>
  <script type='text/javascript' src="//use.edgefonts.net/vast-shadow:n4:all.js"></script>
  <script type='text/javascript' src="//use.edgefonts.net/vast-shadow:n4:all;megrim.js"></script>
  <script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
  <script type='text/javascript' src="js/index.js"></script>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <div ng-app="demoApp">
    <script type="text/ng-template" id="partials/edit-form.html">
      <div ng-show="todo.editMode">
        <input ng-model="todo.text" />
        <button  ng-click="save(todo)">save</button>
      </div>
    </script>

    <div class="todo-wrapper" ng-controller="todoCtrl">
      <h2>You have <span class="emphasis">{{getTotalTodos()}}</span> tasks</h2>
      <input class="search-input" type="text" ng-model="searchText" placeholder="enter search term" />
      <ul>
        <li ng-repeat="todo in todos | filter: searchText">
          <span>{{todo.text}}: {{todo.date_created}}</span>
          <div ng-include="'partials/edit-form.html'"></div>
          <button class="clear-btn" ng-click="removeTask(todo)">Remove</button>
          <button class="clear-btn" ng-click="editTask(todo)">Edit</button>
        </li>
      </ul>
      <form>
        <input class="add-input" placeholder="task name" type="text" ng-model="text" ng-model-instant />
        <button class="add-btn" ng-click="addTask()"><h2>Add</h2></button>
      </form>
    </div>
  </body>
</html>

index.js

angular.module('demoApp', [])
    .controller('todoCtrl', TodoCtrl);

function TodoCtrl($scope) {

    $scope.todos = [{
        id: 1,
        text: 'Mow the lawn',
        selected: false
    }, {
        id: 2,
        text: 'Wash the car',
        selected: false
    }];
    $scope.id = $scope.todos.length + 1; //later create an uuid

    $scope.getTotalTodos = function () {
        return $scope.todos.length;
    };


    $scope.addTask = function () {
        $scope.todos.push({
            editMode: false,
            text: $scope.text,
            id: $scope.id,
            date_created: Date.now,
            selected: false
        });
        $scope.text = '';
        $scope.id = '';
    };

    $scope.removeTask = function (todo) {
        /*$scope.todos = _.filter($scope.todos, function (todo) {
            return !todo.selected;
        });*/
        $scope.todos.pop(todo);
        //update server now with ngResource...
    };

    $scope.showDetails = function (task_id) {
        var found = $filter('filter')($scope.todos, {
            id: task_id
        }, true);
        if (found.length) {
            $scope.selected = JSON.stringify(found[0]);
        } else {
            $scope.selected = 'Not found';
        }
    }

    $scope.editTask = function(todo) {
        todo.editMode = true;
        console.log(todo);
    };

    $scope.save = function(todo) {
        todo.editMode = false;
        // update data at server now too. $scope.todos is up-to-date
    }
    $scope.updateTask = function (task_id) {
        // search $scope.todos for the item to update
        var indexOfTask;
        for (var i = 0; i < $scope.todos.length; i++) {
            if ($scope.todos[i].id === $scope.id) indexOfTask = i;
            $scope.todos[i] = todo;
            $scope.todos.push();
            $scope.text = '';
            $scope.id = '';
        }

        // update the todo


    };


}

Answer 1

基本上只需为每个角度（工厂，控制器，指令等）创建一个新文件

我使用这种语法

angular.module('myapp.functionName.type', []) 
   .type('functionName',);

然后在你的app.js中，在你的案例中为index.js

angular.module('myapp', ['myapp.functionName.type', ... ]) ;

制作常规角度应用程序，模块化角度应用程序

1 个答案: