Angularjs代碼的HTML文件將空白

-1

我正在學習Angularjs。我已經開始與http://fastandfluid.com/publicdownloads/AngularJSIn60MinutesIsh_DanWahlin_May2013.pdf Angularjs代碼的HTML文件將空白

大多數實例教程奮力罰款，直到我衝進下面的代碼：

<html> 
    <head> 
    </head> 
<body data-ng-app=''> 
<div data-ng-controller="simpleController" > 
<ul> 
    <li data-ng-repeat="x in names"> 
    {{ x.name}} 
    </li> 
</ul> 
<script src='angular.min.js'></script> 
<script> 
function simpleController($scope){  
    $scope.names = [ 
     {name:'Jani',country:'Norway'}, 
     {name:'Hege',country:'Sweden'}, 
     {name:'Kai',country:'Denmark'} 
     ]; 
} 
</script> 
</div> 

    </body> 
</html>

來源

2015-04-03 pixelite

您正在使用的角度版本？ – 2015-04-03 06:47:24

AngularJS v1.3.14 – pixelite 2015-04-03 07:04:45

檢查我的答案，我解釋了爲什麼它不工作，它將如何工作，如果您進行更改 – 2015-04-03 07:06:34

您使用的是有創造出一個模塊的控制器。在處理控制器之前，您必須創建一個模塊。

在老版本的Angular JS（< 1.3）中，您可以創建一個沒有模塊的控制器。但在後來的版本中是不可能的。

請看看下面的代碼

<!DOCTYPE html> 
<html> 
    <head> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15">  </script> 
    </head> 

    <body data-ng-app='myapp'> 
    <div data-ng-controller="simpleController"> 
    <ul> 
     <li data-ng-repeat="x in names">{{ x.name}}</li> 
    </ul> 
    </div> 

<script> 
var app = angular.module('myapp', []) 
app.controller('simpleController', function($scope) { 
    $scope.names = [{ 
    name: 'Jani', 
    country: 'Norway' 
    }, { 
    name: 'Hege', 
    country: 'Sweden' 
    }, { 
    name: 'Kai', 
    country: 'Denmark' 
    }]; 

}); 
</script> 
</body> 

</html>

<!DOCTYPE html> 
<html>  
    <head> 
    <script data-require="[email protected]*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script> 
    </head> 

<body ng-app='myapp'> 
    <ul ng-controller='simpleController'> 
    <li ng-repeat='x in names'>{{x}}</li> 
    </ul> 

<script> 
    function simpleController($scope) { 
    $scope.names = [{ 
     name: 'Jani', 
     country: 'Norway' 
    }, { 
     name: 'Hege', 
     country: 'Sweden' 
    }, { 
     name: 'Kai', 
     country: 'Denmark' 
    }]; 
    } 

    simpleController.$inject = ['$scope']; 
    angular.module('myapp', []).controller('simpleController', simpleController) 
    </script>

來源

2015-04-03 06:24:42 Rajeshwar

這不能解釋爲什麼OP的問題不起作用\ – 2015-04-03 07:08:23

感謝Rajeshwar。你能提出一些能幫助我理解Angularjs的材料嗎？ – pixelite 2015-04-03 07:08:35

@pixelite你通過上述答案瞭解了嗎？爲什麼它不工作？ – 2015-04-03 07:10:11

更好的方法做的是爲控制器創建controllers.js

<html ng-app='myapp'> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
<script src="controllers.js"></script> 
</head> 
<body> 
<div data-ng-controller="simpleController" > 
    <ul> 
    <li data-ng-repeat="x in names"> 
     {{ x.name}} 
    </li> 
    </ul> 
</div> 
</body> 
</html>

在controllers.js的邏輯應該與模塊：

var app = angular.module('myapp', []) 
app.controller('simpleController', function($scope) { 
    $scope.names = [{ 
    name: 'Jani', 
    country: 'Norway' 
    }, { 
    name: 'Hege', 
    country: 'Sweden' 
    }, { 
    name: 'Kai', 
    country: 'Denmark' 
    }]; 

});

來源

2015-04-03 06:37:39

沒有任何改變;它仍然是空白的 – pixelite 2015-04-03 07:03:23

檢查您的src =「angular.js」是否存在......我編輯了我的答案，您可以使用src腳本。 – 2015-04-03 07:08:17

我已將angular.js文件包含在目錄中。我想這個問題是與版本或不創建模塊。謝謝你的時間。 :) – pixelite 2015-04-03 07:15:18

你的問題是你使用角1.3+

您的代碼將具有角較低版本（較小的超過1.3工作），因爲您正在使用全局函數聲明&，所以全局函數聲明在角度1.3中被默認禁用。

如果你想得到你的代碼工作，你需要在初始化角度時啓用全局控制器函數聲明。

配置

app.config($controllerProvider) { 
    // Don't do this unless you *have* to 
    $controllerProvider.allowGlobals(); 
});

但是，這是不使用全局函數很好的做法，你應該我們的模塊化方法，因爲角度不使用它分離出來的代碼。那就不要提你在你的模塊名稱ng-app指令像ng-app="app"

代碼

angular.module('app', []) 
.controller('simpleController',simpleController) 

function simpleController($scope) { 
    $scope.names = [{ 
     name: 'Jani', 
     country: 'Norway' 
    }, { 
     name: 'Hege', 
     country: 'Sweden' 
    }, { 
     name: 'Kai', 
     country: 'Denmark' 
    }]; 
}

HTML

<body data-ng-app=''> 
    <div data-ng-controller="simpleController"> 
     <ul> 
      <li data-ng-repeat="x in names"> 
       {{ x.name}} 
      </li> 
     </ul> 
    </div> 
</body>

來源

2015-04-03 07:01:14

感謝您的詳細解釋。不幸的是接受了一個答案。 :)你可以分享[email protected]上的教程鏈接欣賞你的時間和努力。 :) – pixelite 2015-04-03 07:14:07

@pixelite你很高興在這裏工作，而不是你應該知道它是如何工作的，不過你應該知道它是如何工作的，感謝您的讚賞:) – 2015-04-03 07:16:45

我接受的答案也解釋瞭如何部分;當然不是像你那樣詳細，但這對我來說已經足夠了。所以你的結論是我對這個部分不是一個有效的部分不感興趣。 – pixelite 2015-04-03 07:32:15

Angularjs代碼的HTML文件將空白

回答

相關問題