Making a regular angular app, a modular angular app

Question

Okay so I am trying to learn how to create a modular angular app, but I don't really know how it would look. Based on my code what would I need to do to make it modular? My app is pretty small but I still want to try and get the idea down as for how to create a modular app so that I can just do that from the beginning the next time I create a web app. I didn't include the css as it seems irrelevant for this question. Help would be greatly apprciated.

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


    };


}

tuckerjt07 · Accepted Answer · 2015-07-16 16:55:07Z

1

Essentially just make a new file for every angular whatever (factory, controller, directive, etc.)

I use this syntax

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

Then in your app.js, in your case index.js

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

answered Jul 16, 2015 at 16:55

tuckerjt07

9221 gold badge13 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jacob Brauchler Over a year ago

Okay thanks I will give it a shot. So based on what I have in my app I only need to add a todoCtrl.js file would be correct?

tuckerjt07 Over a year ago

Yep, pull everything after the module declaration out, make a new module in the todoCtrl.js file and drop the code in and put the new module as a string in the [] of the index.js

Jacob Brauchler Over a year ago

Okay so I did that and when I compile it doesn't seem to work and I'm not sure why

Jacob Brauchler Over a year ago

There is no error message but when I open my html file, I am getting {{todo.text}}: {{todo.date_created}} where the inputs that I gave the program should be output.

Collectives™ on Stack Overflow

Making a regular angular app, a modular angular app

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related