angular 使用http-server 的js1 基本应用没有进入控制器

Question

下面是 index.html 文件：

<html ng-app="myApp">
<head>
  <title> My Contacts App </title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="app.js"></script>
  <link rel="shortcut icon" href="favicon.ico"></link>
</head>
<body>
  <h1>My contact App </h1>
  <div controller="contactCtrl as ctrl">
    {{ ctrl.nm }}

  </div>
</body>
</html>

app.js如下图：

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

function createContacts()
{
  this.nm = "Hey";

console.log("INside controller");
}

问题：当我从源文件所在的同一目录启动 http-server 并键入 http://127.0.0.1:8080 时，浏览器只显示静态 html 内容。它更晚地显示变量 "nm" 的值，也不显示 console.log 中的任何内容我处于初学者水平。 TIA.

Answer 1

这应该是 ng-controller:

 <div ng-controller="contactCtrl as ctrl">
   {{ ctrl.nm }}
 </div>

这里有一个关于如何在 html 中使用 ng-controller 指令的例子：

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

function createContacts()
{
  this.nm = "Hey";

console.log("INside controller");
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">
<head>
  <title> My Contacts App </title>
  <script src="app.js"></script>
  <link rel="shortcut icon" href="favicon.ico"></link>
</head>
<body>
  <h1>My contact App </h1>
  <div ng-controller="contactCtrl as ctrl">
    {{ ctrl.nm }}
  </div>
</body>
</html>

Answer 2

pritam 的回答是正确的。为什么不走传统的路。

    var app = angular.module("myApp",[]);
    app.controller("contactCtrl",function($scope){
        $scope.nm = "Hey";
        console.log("Inside controller");
    });

并在模板中使用 {{ nm }}

angular 使用http-server 的js1 基本应用没有进入控制器

angular js1 basic application using http-server doesn't enter the controller

javascript

angularjs

angularjs-1.5