源代碼：
<html ng-app="nameApp">
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
<script src="angular/angular.js"></script>
<script>
var nameApp = angular.module('nameApp', []);
nameApp.controller('NameCtrl', function ($scope){
$scope.Ionames = ['Larry', 'Curly', 'Moe'];
});
</script>
</head>
<body ng-controller="NameCtrl">
<ul>
<li ng-repeat="nameF in Ionames">{{nameF}}</li>
</ul>
</body>
</html>這段代碼是一個簡單的 AngularJS 應用示例。下面我將詳細解釋每個部分的功能和語法：
-
HTML結構與AngularJS整合
<html ng-app="nameApp">這行代碼將整個 HTML 頁面定義為 AngularJS 的應用程序，
ng-app="nameApp"是一個 AngularJS 的指令，用來定義 AngularJS 應用的根模塊。這裏的"nameApp"必須與 JavaScript 中創建模塊時使用的名稱相匹配。 -
引入AngularJS庫
<script src="angular/angular.js"></script>這行代碼通過
<script>標籤引入了 AngularJS 的庫文件。這是使用 AngularJS 開發任何應用前的必需步驟。 -
定義AngularJS模塊和控制器
var nameApp = angular.module('nameApp', []); nameApp.controller('NameCtrl', function ($scope){ $scope.Ionames = ['Larry', 'Curly', 'Moe']; });angular.module('nameApp', []): 這行代碼創建了一個名為"nameApp"的新模塊。數組[]中可以包含一系列的依賴，用於注入到應用中。這裏的數組是空的，表示該模塊不依賴於其他模塊。-
nameApp.controller('NameCtrl', function ($scope){...}): 這行代碼定義了一個控制器NameCtrl。控制器用於建立視圖（HTML）和模型（JavaScript）之間的數據綁定。$scope: 是一個對象，AngularJS 通過它將控制器的數據傳遞到視圖。在這裏，$scope.Ionames = ['Larry', 'Curly', 'Moe']定義了一個數組Ionames，並初始化了三個字符串元素。
-
在HTML中使用控制器
<body ng-controller="NameCtrl">使用
ng-controller="NameCtrl"指令將<body>標籤指定為NameCtrl控制器的作用域。這意味着在<body>標籤內部的任何數據綁定都會與NameCtrl控制器的$scope對象關聯。 -
數據綁定和重複指令
<ul> <li ng-repeat="nameF in Ionames">{{nameF}}</li> </ul>ng-repeat="nameF in Ionames": 這是 AngularJS 中的一個指令，用於對數組進行迭代。這裏它遍歷Ionames數組中的每個元素。對於數組中的每個元素，ng-repeat都會複製<li>元素，創建一個列表項。{{nameF}}: 這是 AngularJS 的插值表達式。它用於在 HTML 中顯示 JavaScript 變量的值。在這個例子中，它會顯示由ng-repeat當前迭代的數組元素的值。
總結來説，這段代碼創建了一個簡單的 AngularJS 應用，其中包含一個名為 nameApp 的模塊和一個名為 NameCtrl 的控制器，用於顯示一個由三個名字組成的列表。
