为什么表达式出现在 AngularJS 示例中？答案

【问题标题】：Why the expression is appearing as it is in AngularJS example?为什么表达式出现在 AngularJS 示例中？
【发布时间】：2017-04-22 02:33:48
【问题描述】：

我有以下代码：

<!DOCTYPE html>
<html>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
 <body>

   <p>Try to change the names.</p>

   <div ng-app="myApp">

     First Name: <input type="text" ng-model="firstName"><br>
     Last Name: <input type="text" ng-model="lastName"><br>
     <br>


     Full Name: {{firstName + " " + lastName}}

    </div>

</body>
</html>

以上代码在浏览器中的输出如下：

Full Name: {{firstName + " " + lastName}}

我的问题是为什么这些表达式会按原样显示？

【问题讨论】：

您似乎没有声明控制器。
哥们，你的ng-controller在哪里

标签： javascript angularjs angularjs-directive expression javascript-framework

【解决方案1】：

您尚未在ejs 文件中定义任何控制器。

添加 ng-controller 和 ng-app 并在您的 Angular 应用程序中定义该控制器。

<div ng-app="myApp" ng-controller="myCtrl">

在angular App 中定义Controller，如下所示：

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

app.controller('myCtrl',function($scope){
    ...
});

希望对你有所帮助。

【讨论】：

【解决方案2】：

由于您尚未定义名为 myApp 的 Angular 应用程序，因此您必须定义不带任何值的 ng-app 指令。 ng-app="myApp" 应该是 ng-app

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<!DOCTYPE html>
<html>

<body>
  <p>Try to change the names.</p>
  <div ng-app>
    First Name:
    <input type="text" ng-model="firstName">
    <br>Last Name:
    <input type="text" ng-model="lastName">
    <br>
    <br>Full Name: {{firstName + " " + lastName}}
  </div>
</body>

</html>

如果你需要一个单独的角度模块，你可以像下面这样

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<!DOCTYPE html>
<html>

<body>
  <p>Try to change the names.</p>
  <div ng-app="myApp">
    First Name:
    <input type="text" ng-model="firstName">
    <br>Last Name:
    <input type="text" ng-model="lastName">
    <br>
    <br>Full Name: {{firstName + " " + lastName}}
  </div>
</body>

</html>

【讨论】：

如果我避免使用 ng-app 指令的值会有什么不同？
它没有避免，你没有定义一个名为 myApp 的 Angular 应用程序，所以你不能使用它。

【解决方案3】：

您没有注册 angularr 从该起点引导的角度模块。

<script>
angular.module("myApp",[])
</script>

并用这个模块初始化 ng-app 指令。

<div ng-app="myApp">
</div>

【讨论】：