Angular 带有 ng- 标签的 JS 的任何解决方案

Question

我喜欢在我的多页 Laravel 应用程序中使用 AngularJs。

自从我使用 Laravel Blade 模板引擎，我似乎不喜欢包含 Angular 标签来集群我的 blade 模板的想法

例子

<div ng-controller="TodoController">
      <span>@{{remaining()}} of @{{todos.length}} remaining</span>
      [ <a href="" ng-click="archive()">archive</a> ]
      <ul class="unstyled">
        <li ng-repeat="todo in todos">
          <input type="checkbox" ng-model="todo.done">
          <span class="done-@{{todo.done}}">@{{todo.text}}</span>
        </li>
      </ul>
      <form ng-submit="addTodo()">
        <input type="text" ng-model="todoText"  size="30"
               placeholder="add new todo here">
        <input class="btn-primary" type="submit" value="add">
      </form>
    </div>

注意：@{{todo.done}} 是一种告诉 Blade 忽略大括号

的方法

有没有一种方法可以使用 AngularJS 而无需包含 ng-controller、ng-repeat:

等标签

我不想使用标签的原因包括： 1. 将来我可能会决定使用其他 JS 框架，例如 Emberjs 或任何其他更好的框架，因此，我必须在我的 blade 文件中找到所有 ng- 标签并删除它们

我只是不想告诉全世界，"Hey am using AngularJS" 并不是我不为此感到自豪，而是基于我的客户的需求和安全原因。

提前感谢您的专家回复

Answer 1

您可能能够避免使用 ng- 指令。然而，这是一种非常糟糕的做法，很可能会被长期反对。

您只需要限制自己不要使用控制器，然后使用单个 run 调用来填充 rootScope。那么你只需要手动bootstrap申请：

var module = angular.module( 'myApp', [ ] ).run( function ( $rootScope ) {
    $rootScope.myVariable = 'hello world';
} );

angular.element( document ).ready( function ( ) {
    angular.bootstrap( document, [ 'myApp' ] );
} );

现在，为什么你不应该这样做：

Angular 框架使用指令作为主要组件。不使用它们是一个非常糟糕的主意，因为使用它们实际上是使用 Angular.
正如评论中所说，每个人都已经能够知道你在使用什么 - 如果他们正在看源代码，他们肯定也会看你的 js 库。

Answer 2

作为最简单的解决方案之一。您可以更改 angular

的开始和结束符号

var myApp = angular.module('myApp', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
});

然后，您的模板将如下所示：

[[ todo.text ]]

更多信息ng-docs

Angular 带有 ng- 标签的 JS 的任何解决方案

Any solution for Angular JS with ng- tags

javascript

php

laravel

angularjs

blade