小编aco*_*der的帖子

如何将AngularJS应用程序拆分为更小的模块并正确处理路由?

将AngularJS应用程序拆分为更小的部分/模块的最佳方法是什么?例如,如果我有博客文章和评论启用,我想我可以将其分解为"帖子"和"评论"(?)等模块(可能不是最好的例子,但想法是拆分应用程序逻辑分成单独的模块,而不是构建一个巨大的单模块应用程序).

我试图在单独的DOM节点中引导两个模块,并相应地在两个模块中使用路由.问题很少:

  • 作为一个"单页"应用程序,我正在引导注释模块甚至在头版上使用,即使它没有在那里使用.
  • 由于我无法在ng-app中使用多个ng-views,因此我不得不在index.html视图中为我的模块编写所有包装器并引导它们?应该是这样吗?似乎有点不对劲.我应该如何/在哪里引导那些?
  • 路由有什么提示吗?我应该在模块中传播它们还是应该以某种方式将它们组合在一起?(创建一个"博客"模块以包含"帖子"和"评论"模块作为依赖关系仍然会很难定义例如"/ post /:id"路由..?)

的index.html

<div class="post"><ng-view></ng-view></div>
<div class="comments"><ng-view></ng-view></div>
Run Code Online (Sandbox Code Playgroud)

javascript.js

angular.module('posts', []).config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when('/', {
        'template': 'Showing all the posts',
        'controller': 'postCtrl
    })
    .when('/post/:id', {
        'template': 'Showing post :id',
        'controller': 'postCtrl
    });
}]);

angular.module('comments', []).config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/post/:id', {
        'template': 'Showing post :id comments',
        'controller': 'CommentsCtrl'
    });
}]);

angular.bootstrap($('.post'), ['posts']);
angular.bootstrap($('.comments'), ['comments']);
Run Code Online (Sandbox Code Playgroud)

javascript angularjs

26
推荐指数
3
解决办法
2万
查看次数

使用node.js应用程序的Grunt livereload

我在Node.js中编写了一个应用程序(使用Express和socket.io),我想在开发和连接到Node.js应用程序时使用Grunt编译我的客户端内容.我怎样才能做到这一点?(最好不要在另一个端口运行Node.js应用程序,而在另一个端口运行客户端,因为路径和跨域问题)

我也安装了Yeoman,它使用开箱即用的grunt-contrib-livereload包,但据我所知,它使用Node.js Connect服务器来提供客户端文件,因此与我的Node.js应用程序分开.

Yeoman生成的Gruntfile.js示例:

var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
var mountFolder = function (connect, dir) {
    return connect.static(require('path').resolve(dir));
};

// ... cut some parts
grunt.initConfig({
    watch: {
        livereload: {
            files: [
                '<%= yeoman.app %>/*/*.html',
                '{.tmp,<%= yeoman.app %>}/styles/*.css',
                '{.tmp,<%= yeoman.app %>}/scripts/*.js',
                '<%= yeoman.app %>/images/*.{png,jpg,jpeg}'
            ],
            tasks: ['livereload']
        }
        // ..cut some parts
    },
    connect: {
        livereload: {
            options: {
                port: 9000,
                middleware: function (connect) {
                    return [
                        lrSnippet,
                        mountFolder(connect, '.tmp'),
                        mountFolder(connect, 'app')
                    ];
                }
            }
        }
    }
    // ..cut some …
Run Code Online (Sandbox Code Playgroud)

node.js gruntjs yeoman livereload

15
推荐指数
1
解决办法
1万
查看次数

标签 统计

angularjs ×1

gruntjs ×1

javascript ×1

livereload ×1

node.js ×1

yeoman ×1