Javascript 由于ng控制器而丢失angularjs引导

Javascript 由于ng控制器而丢失angularjs引导,javascript,angularjs,pug,Javascript,Angularjs,Pug,我对angular是新手,对javascript和jade不太熟悉,所以我的问题听起来可能很愚蠢。我的webapp基于以下网站:。它使用数据库构建待办事项列表。我有三个不同的文件:服务、控制器和索引 服务 var app = angular.module('myApp', []); app.value('version', '0.1'); app.factory('myPouch', [function() { var mydb = new PouchDB('ng-pouch');

我对angular是新手,对javascript和jade不太熟悉,所以我的问题听起来可能很愚蠢。我的webapp基于以下网站:。它使用数据库构建待办事项列表。我有三个不同的文件:服务、控制器和索引

服务

var app = angular.module('myApp', []);

app.value('version', '0.1');

app.factory('myPouch', [function() {

    var mydb = new PouchDB('ng-pouch');
    PouchDB.replicate('ng-pouch', 'http://127.0.0.1:5984/clients', {continuous: true});
    PouchDB.replicate('http://127.0.0.1:5984/clients', 'ng-pouch', {continuous: true});
    return mydb;

}]);

app.factory('pouchWrapper', ['$q', '$rootScope', 'myPouch', function($q, $rootScope, myPouch) {

    return {
        add: function(text) {
            var deferred = $q.defer();
            var doc = {
                type: 'todo',
                text: text
            };
            myPouch.post(doc, function(err, res) {
                $rootScope.$apply(function() {
                    if (err) {
                        deferred.reject(err);
                    } else {
                        deferred.resolve(res);
                    }
                });
            });
            return deferred.promise;
        },
        remove: function(id) {
            var deferred = $q.defer();
            myPouch.get(id, function(err, doc) {
                $rootScope.$apply(function() {
                    if (err) {
                        deferred.reject(err);
                    } else {
                        myPouch.remove(doc, function(err, res) {
                            $rootScope.$apply(function() {
                                if (err) {
                                    deferred.reject(err);
                                } else {
                                    deferred.resolve(res);
                                }
                            });
                        });
                    }
                });
            });
            return deferred.promise;
        }
    };

}]);

app.factory('listener', ['$rootScope', 'myPouch', function($rootScope, myPouch) {

    myPouch.changes({
        continuous: true,
        onChange: function(change) {
            if (!change.deleted) {
                $rootScope.$apply(function() {
                    myPouch.get(change.id, function(err, doc) {
                        $rootScope.$apply(function() {
                            if (err) console.log(err);
                            $rootScope.$broadcast('newTodo', doc);
                        });
                    });
                });
            } else {
                $rootScope.$apply(function() {
                    $rootScope.$broadcast('delTodo', change.id);
                });
            }
        }
    });
}]);
控制器

var app = angular.module('myApp', []);


app.controller('TodoCtrl', ['$scope', 'listener', 'pouchWrapper', function($scope, listener, pouchWrapper) {

    $scope.submit = function() {
        console.log('submit');
        pouchWrapper.add($scope.text).then(function(res) {
            console.log('test');
            $scope.text = '';
        }, function(reason) {
            console.log(reason);
        });
    };

    $scope.remove = function(id) {
        pouchWrapper.remove(id).then(function(res) {
//      console.log(res);
        }, function(reason) {
            console.log(reason);
        });
    };

    $scope.todos = [];

    $scope.$on('newTodo', function(event, todo) {
        $scope.todos.push(todo);
    });

    $scope.$on('delTodo', function(event, id) {
        for (var i = 0; i<$scope.todos.length; i++) {
            if ($scope.todos[i]._id === id) {
                $scope.todos.splice(i,1);
            }
        }
    });

}]);
在本例中,我的控制器“TodoCtrl”执行angularjs的引导(我没有得到结果3)。如果我移除容器(与控制器一起),我会得到预期的结果,但是我不能使用我的控制器。无论如何,对于容器,提交操作似乎也不起作用

有什么想法吗?我真的想知道我做错了什么


谢谢

您正在创建模块两次(var-app=angular.module('myApp',[]);)。你应该删除其中一个。好吧,你是对的,但我遗漏了一些东西……在angular的phonecat示例中,它们对每个文件使用不同的模块名称(services.js controllers.js等)。然后在app.js中创建另一个模块,如表中列出的其他文件中的其他模块:var app=angular.module('MyApp',['service.module','controller.module'])。我尝试过这样做(将我的服务模块更改为var appSrv=angular.module('service.module',[])和appSrv.factory…),但在我的应用程序中它不起作用。仅供参考,我在索引中添加了app.js。我遗漏了什么吗?我问了另一个关于子模块的问题…请回答我的问题(与您的评论相同),以便我可以验证它!再次感谢有人回答:)
doctype html
html(ng-app='myApp')
  head
    title=title
    link(rel='stylesheet' href='stylesheets/style.css')
    link(rel='stylesheet' href='bower_components/bootstrap/dist/css/bootstrap.css')
    script(type='text/javascript' src='javascripts/angular-1.2.16.min.js')
    script(type='text/javascript' src='javascripts/pouchdb-2.1.0.min.js')

    script(type="application/javascript" src="app/controllers.js")
    script(type="application/javascript" src="app/services.js")
  body

    .container(ng-controller='TodoCtrl')
        h1 TODO application
        p 1 + 2 = {{ 1 + 2 }}
            p
                form.form-inline(ng-submit='submit()')
                    input(placeholder='New task', type='text', ng-model='text')
                    input.btn.btn-primary(type='submit', value='Add')
            p
                table.table.table-hover.span3
                    thead
                        tr
                            th Task
                            th  
                    tbody
                        tr(ng-repeat='todo in todos')
                            td {{todo.text}}
                            td
                                a.btn.btn-mini.btn-danger(ng-click='remove(todo._id)', href='#') remove