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

【问题标题】：Any solution for Angular JS with ng- tags任何带有 ng- 标签的 Angular JS 解决方案
【发布时间】：2015-01-05 21:12:12
【问题描述】：

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

由于我使用 Laravel Blade 模板引擎，我似乎不喜欢包含 Angular 标签来集群我的刀片模板的想法

例子

<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 忽略花括号的方法

有没有一种方法可以在不包含 ng-controller、ng-repeat 等标签的情况下使用 AngularJS：

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

我只是不想告诉全世界，“嘿，我在使用 AngularJS”并不是我不以此为荣，而是基于我的客户的需求和安全原因。

提前感谢您的专家回复

【问题讨论】：

如果你想使用 Angular，就使用 Angular。
它是一种客户端技术，所以没有办法“告诉世界”你是怎么做的。
@popovitsj 我明白了。坦克

标签： javascript php angularjs laravel blade

【解决方案1】：

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

您只需要克制自己不要使用控制器，然后使用单个 run 调用来填充 rootScope。然后你只需要手动引导应用程序：

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

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

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

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

【讨论】：

【解决方案2】：

作为最简单的解决方案之一。您可以更改角度的开始和结束符号

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

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

[[ todo.text ]]

欲了解更多信息ng-docs

【讨论】：