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

Question

我有以下代码：

<!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}}

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

Answer 1

由于您尚未定义名为 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>

如果你需要一个单独的angular模块，你可以像下面那样做

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>

Answer 2

您没有注册 angular 模块，角度从这个起点引导。

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

并使用此模块初始化到 ng-app 指令。

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

Answer 3

您尚未在 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){
    ...
});

希望对您有所帮助。

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

Why the expression is appearing as it is in AngularJS example?

javascript

expression

javascript-framework

angularjs

angularjs-directive