子產品定義了一個應用程式。
子產品是應用程式中不同部分的容器。
子產品是應用控制器的容器。
控制器通常屬于一個子產品。
你可以通過 AngularJS 的 <b>angular.module</b> 函數來建立子產品：
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"myApp" 參數對應執行應用的 HTML 元素。
現在你可以在 AngularJS 應用中添加控制器，指令，過濾器等。
你可以使用 <b>ng-controller</b> 指令來添加應用的控制器:
<div ng-app="<b>myApp</b>" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
var
app
= angular.module("myApp",
[]);
app.controller("myCtrl", function($scope) {
$scope.firstName
= "John";
$scope.lastName
= "Doe";
});
你可以在 AngularJS 控制器 章節學到更多關于控制器的知識。
AngularJS 提供了很多内置的指令，你可以使用它們來為你的應用添加功能。
完整的指令内容可以參閱
AngularJS 參考手冊。
此外，你可以使用子產品來為你應用添加自己的指令：
<div ng-app="myApp" runoob-directive></div>
var app =
angular.module("myApp", []);
app.directive("runoobDirective",
function() {
return {
template : "我在指令構造器中建立!"
};
你可以在 AngularJS 指令 章節學到更多關于指令的知識。
通常 AngularJS 應用程式将子產品和控制器包含在 JavaScript 檔案中。
在以下執行個體中， "myApp.js" 包含了應用子產品的定義程式， "myCtrl.js" 檔案包含了控制器：
<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body>
<div ng-app="myApp"
ng-controller="myCtrl">
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
在子產品定義中 [] 參數用于定義子產品的依賴關系。
中括号[]表示該子產品沒有依賴，如果有依賴的話會在中括号寫上依賴的子產品名字。
$scope.firstName = "John";
$scope.lastName= "Doe";
JavaScript 中應避免使用全局函數。因為他們很容易被其他腳本檔案覆寫。
AngularJS 子產品讓所有函數的作用域在該子產品下，避免了該問題。
在我們的執行個體中，所有 AngularJS 庫都在 HTML 文檔的頭部載入。
對于 HTML 應用程式，通常建議把所有的腳本都放置在 <body> 元素的最底部。
這會提高網頁加載速度，因為 HTML 加載不受制于腳本加載。
在我們的多個 AngularJS 執行個體中，您将看到 AngularJS 庫是在文檔的 <head> 區域被加載。
在我們的執行個體中，AngularJS 在 <head> 元素中被加載，因為對 angular.module 的調用隻能在庫加載完成後才能進行。
另一個解決方案是在 <body> 元素中加載 AngularJS 庫，但是必須放置在您的 AngularJS 腳本前面：
<head>
<meta charset="utf-8">
</head>
var app = angular.module("myApp",