來自教程的角JS不呈現

我剛剛買了一本關於Angular JS的書。我正在設立第一個項目，這非常簡單。只有一個Angular元素被渲染。我想從一開始就正確地完成這個設置，所以我現在想克服這個簡單的問題。爲簡單起見，angular.js文件和app.js文件位於index.html所在的同一文件夾中。我下載了最新版本的angular（1.3.2），並嘗試使用最小化的.js文件，然後嘗試使用未壓縮的文件。來自教程的角JS不呈現

<html ng-app> 
    <head> 
     <script src="angular.js"></script> 
     <script src="app.js"></script> 
    </head> 
    <body> 
     <div ng-controller='HelloController'> 
      <p>{{greeting.text}}, World</p> 
     </div> 
    </body> 
</html>

app.js：

function HelloController($scope) { 
    $scope.greeting = { text: 'Hello' }; 
}

當index.html的這個代碼是從我用的書，這是發表在2013年

index.html的複製粘貼在我的瀏覽器（最新版本的Chrome）中打開時，「{{greeting.text}}」區域顯示爲該字符串{{greeting.text}}，而不是變量的值。當我打開開發工具時，我發現控制器上出現了一個錯誤，它沒有被定義爲控制器。我知道這是非常簡單的事情，但我想從一開始就讓我所有的聲明都可以學習Angular。任何幫助，將不勝感激。

來源

2014-11-14 natep

經過對角文檔網站 – charlietfl 2014-11-14 14:02:11

是否包含angular.js和app.js教程？使用 – sam 2014-11-14 14:07:07

更新

同意@JaredReeves，所以做declarr模塊變量這樣

//module file 
angular.module('yourAppDep'); 

// Controller One File 
    angular.module('yourAppDep').controller('MyCtrl', function() { 
     // ... 
});

像這樣你的應用程序中創建模塊，在module.js文件

var AngularMVCApp = angular.module('AngularMVCApp', []); 

AngularMVCApp.controller('HelloController', HelloController);

更改你的html如下

<html ng-app="AngularMVCApp">

改變你控制器這樣

function HelloController($scope) { 
    $scope.greeting = { text: 'Hello' }; 
} 

// The $inject property of every controller (and pretty much every other type of 
//object in Angular) needs to be a 
//string array equal to the controllers arguments, only as strings 
HelloController.$inject = ['$scope'];

您還可以在這裏檢查基本教程：http://www.codeproject.com/Articles/806029/Getting-started-with-AngularJS-and-ASP-NET-MVC-Par

來源

2014-11-14 13:59:22

請注意，爲模塊聲明一個全局變量並不是最佳實踐。 'angular.module（）'既是一個getter也是一個setter，因此它可以用來創建角度分量而不需要設置全局變量。這有助於限制大型應用程序中的JavaScript全局命名空間/污染問題，並限制將來可能出現的衝突。 – 2014-11-14 14:23:24

@JaredReeves - 同意你更新我的答案 – 2014-11-14 14:41:00

似乎不可思議，他們表現出來這樣的。通常你會開始使用模塊的向右走，像這樣：

在HTML

<html ng-app="app">

在JS

angular.module("app",[]) 

.controller("HelloController",function ($scope) { 
    $scope.greeting = { text: 'Hello' }; 
});

我不知道，如果你的符號應該工作一樣好，但這個是設置角度應用程序的標準方式，用於我見過的所有教程。

來源

2014-11-14 14:00:05 wvdz

你的控制器是錯誤的。看看here。它必須是這樣的

yourApp.controller('HelloController', function ($scope) { 
    $scope.greeting = { text: 'Hello' }; 
}

來源

2014-11-14 14:01:36 timtos

請嘗試下面的例子，

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="" ng-controller="empController"> 
 

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

 
</div> 
 

 
<script> 
 
function empController($scope) { 
 
    $scope.firstName = "Tom"; 
 
    $scope.lastName = "Jerry"; 
 
} 
 
</script>

來源

2014-11-14 14:07:50 Ashwath

最終你原來的代碼將前角1.3工作過。在Angular 1.3中，不再支持全局函數控制器。

<html ng-app> 
    <head> 
     <script src="1.22_angular.js"></script> 
     <script src="app.js"></script> 
    </head> 
    <body> 
     <div ng-controller='HelloController'> 
      <p>{{greeting.text}}, World</p> 
     </div> 
    </body> 
</html>

來源

2014-11-14 14:38:03 KipLove

來自教程的角JS不呈現

回答

相關問題