來自教程的Angular JS無法渲染

Question

我剛有一本關於Angular JS的書。 我正在設置第一個項目，這非常簡單。 僅要渲染一個Angular元素。 我想從一開始就正確地進行設置，所以現在我想解決這個簡單的問題。 為簡單起見，angular.js文件和app.js文件位於index.html所在的文件夾中。 我下載了最新版本的angular（1.3.2），並嘗試使用最小化的.js文件，然后再嘗試使用未壓縮的版本。 該代碼是復制自我正在使用的那本書的，該書於2013年出版。

index.html：

<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' };
}

在我的瀏覽器（Chrome的最新版本）中打開index.html時，“ {{greeting.text}}”區域顯示為該字符串{{greeting.text}}，而不是變量的值。 當我打開開發工具時，我發現控制器上有一個錯誤，未將其定義為控制器。 我知道這是非常簡單的內容，但是我想一開始就擁有所有聲明，以便學習Angular。 任何幫助，將不勝感激。

Answer 1

更新資料

同意@JaredReeves，所以像這樣聲明模塊變量

//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

Answer 2

最終，您的原始代碼將在Angular 1.3之前運行。 在Angular 1.3中，不再支持全局功能控制器。
http://plnkr.co/edit/3BuxfWLXGqtxImsNTzWm?p=preview

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

Answer 3

他們看起來像這樣看起來很奇怪。 通常，您將立即開始使用模塊，如下所示：

在html中

<html ng-app="app">

在js中

angular.module("app",[])

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

我不確定您的表示法是否也能正常工作，但這是設置角度應用程序的標准方法，該方法已在我見過的所有教程中使用。

Answer 4

您的控制器錯誤。 在這里看看。 一定是這樣的

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

Answer 5

請嘗試以下示例，

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

來自教程的Angular JS無法渲染

問題描述

5 個解決方案

解決方案1
3 已采納 2014-11-14 13:59:22

解決方案2
3 2014-11-14 14:38:03

解決方案3
0 2014-11-14 14:00:05

解決方案4
0 2014-11-14 14:01:36

解決方案5
0 2014-11-14 14:07:50

來自教程的Angular JS無法渲染

問題描述

5 個解決方案

解決方案1 3 已采納 2014-11-14 13:59:22

解決方案2 3 2014-11-14 14:38:03

解決方案3 0 2014-11-14 14:00:05

解決方案4 0 2014-11-14 14:01:36

解決方案5 0 2014-11-14 14:07:50

解決方案1
3 已采納 2014-11-14 13:59:22

解決方案2
3 2014-11-14 14:38:03

解決方案3
0 2014-11-14 14:00:05

解決方案4
0 2014-11-14 14:01:36

解決方案5
0 2014-11-14 14:07:50