asp.net-mvc - Angularjs 轻型版本

标签 asp.net-mvc angularjs reactjs dotliquid

我在许多项目中使用 Angular ,特别是在 ASP.NET MVC 中,但我不喜欢 Angular -

  • 路由器(也是 ui-router,这确实不是什么大问题,因为它只是一个插件)- 网络应用程序的概念扼杀了所有 ASP.NET 功能
  • 服务和工厂——因为所有这些都可以在公共(public) Controller 内完成。 (这听起来可能很棘手)
  • 常量和值 - 因为我认为如果您使用 requirejs 或其他 AMD,这并不是真正需要的

我喜欢 Angular 的只是指令,当我制作大的嵌套指令时,我使用相同的 Controller foreach,所以没有 $scope交互(观察者较少)

.controller('BaseGridCtrl', function(){
   //instead of 
   //$scope.value = 123;

   var ctrl = this;
   //this  is for Table-base-directive
   ctrl.value = 123;
   //this  is for Table-head-directive
   ctrl.value2 = 123;
});
.directive('table-base', function(){
    return {
        template: '<div>{{bgc.value}}</div>',
        controller: 'BaseGridCtrl',
        controllerAs: 'bgc'
    }
});
.directive('table-head', function(){
    return {
        template: '<div>{{bgc.value2}}</div>',
        controller: 'BaseGridCtrl',
        controllerAs: 'bgc'
    }
});
.directive('table-foot', function(){
    return {
        template: '<div>{{bgc.value3}}</div>',
        controllerAs: 'bgc',
        controller: function(){
           var ctrl = this;
           ctrl.value3 = 123;
        }
    }
});

所以链接功能很少用到。特别是我喜欢 angular easily detects 指令——这很棒,因为你只写了 1 个标签 <grid>而不是 reactjs 组件(这听起来也很棘手)。在我的项目中,我使用 DotLiquid对于 Razor View (它作为字符串存储在数据库中)示例:

<grid theme="some" route="localhost:9000/some/action"></grid>

所以 dotLiquid 只是渲染这个字符串没有问题,或者甚至在 angularjs 旁边应用其他 bingings。这很棒,因为所有东西都是独立的。这是 reactjs 无法实现的——你需要自己引导组件

React.renderComponent(<Grid />, document.querySelector('#someId'))

简历

目前它很重,大约 100kb,但如果没有所有这些不必要的东西,它会非常轻。我只想使用 directivecontroller服务,还有服务器端渲染 Angular 会在每个请求上自行引导,这是不明智的,但对于较轻的版本,它有点权衡。 有没有人试图成功剥离 angular.service ?或者有什么考虑,有什么想法?

编辑

Angular-light看起来很有希望,但是:

  • 它不提供 HTML 标签检测,只提供属性
  • 真的很丑,alight.directives.al.getValue这看起来只对我或其他人来说很糟糕吗?

编辑2

好吧,那 100kb 可能玩不了多少。但是将其视为锻炼,正如您可能知道的那样, Angular 仅在页面加载时启动一次,因此它必须构建应用程序,拉取所有模块,配置每个模块,然后配置模块的所有服务,然后将它们注入(inject)到需要的地方,然后提供从工厂和服务回调到任何注入(inject)它们的人,至少它会检查是否存在(在每个模块上),所有这些都在开始时发生,只有一次!通过清除大小,我们还可以最小化 javascript 执行(确实会)、工厂和服务观察器,因此我们不需要任何未使用的部分。我们甚至可以摆脱 Controller (并内联使用它们),只有一项服务。 angular.directive (这是派对的最佳部分)。看过 mustache 、 Handlebars ,但它们就像 reactjs。

最佳答案

你可以试试Angular Light ~15kb(gzip 压缩),它没有服务、工厂、常量、值、DI、路由器等。

此外,它还具有一些有用的功能,例如文本指令和对 Object.observe (benchmark) 的支持

编辑

提供HTML标签检测、属性和注释。

关于asp.net-mvc - Angularjs 轻型版本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28803541/

相关文章:

c# - 如何全局添加属性注解

javascript - AngularJS 与 Django - 模板标签冲突

javascript - React 测试库 waitForElementToBeRemoved 无法正常工作

Javascript 推送到本地存储数组在 React 中不起作用

javascript - ng 选项无法加载 json 列表

node.js - 如何从 Express 服务器传递数据以响应 View ?

javascript - knockout 组列表为带有对象的更小列表

javascript - 如何将 ViewModel 中的数据发布到 Controller 方法中?

c# - 使用 MVC 和 Razor 在 div 中放置一个 css 类

javascript - 如何使用 AngularJS 上的服务功能检查 PouchDB 文档是否存在?