使用AngularJS非常簡單，如下：
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Hello {{'World'}}!
</body>
</html>以指令ng-app定義AngularJS的作用域，然後引入angular-1.0.1.min.js，這就是AngularJS的Hello World，簡單但是無用。
[b]HTML執行表達式（Expressions）[/b]
AngularJS允許在HTML直接執行表達式，如下：
1+2 = {{1+2}}! #頁面會顯示 1+2 = 3！一樣的簡單，同樣的無用，因爲在HTML直接寫表達式會讓代碼一團糟，這樣的功能最好不要用。
[b]Directives（指令）[/b]
這個特性非常有用，這個特性擴展HTML的表現能力，通過爲DOM對象增加新的屬性指令爲DOM對象定製行爲。使用這個特性可以以更少的代碼構建更加優雅的頁面結構。AngularJS本身內置了一些指令，下面來看一個例子，使用了內置的ng-repeat
<div ng-init="students = [
{name:'John', age:25, gender:'boy'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Sebastian', age:10, gender:'boy'},
{name:'Samantha', age:16, gender:'girl'}
]">
<div data-ng-repeat="student in students">
<h3>{{student.name}}:{{student.age}}</h3>
</div>
</div>上例中，首先通過ng-init指令創建了一個students的對象數組， 然後使用ng-repeat指令打印出所有學生的名字和年齡。還可以使用ng-show過濾重複值，只顯示boy：
<div data-ng-repeat="student in students" data-ng-show="student.gender=='boy'">
<h3>{{student.name}}:{{student.age}}</h3>
</div>
或者使用ng-switch做一些更復雜的控制,年滿18歲打印ADULT。
<div data-ng-repeat="student in students" data-ng-show="student.gender=='boy'"
data-ng-switch="student.age >18">
<h3>{{student.name}}:{{student.age}}</h3>
<p data-ng-switch-when="true">ADULT</p>
</div>這個特性比較殺手級，它爲開發人員省了很多代碼，對定義Web Page Structure非常有幫助。而且除了本身自帶的Directives滿足大部分羣衆的需要， 還支持定製Directive滿足你的奇葩需求。
[b]數據綁定（Data Binding）[/b]
在AngularJS中，只需要簡單的使用ng-model就可以實現model和view的雙向綁定，任何在view上的修改馬上反應到Model，任何在Model數據上的修改馬上反應到View的展示上。如下：
<div data-ng-repeat="student in students">
<h3>{{student.name}}:{{student.age}}</h3>
Edit Name: <input type="text" data-ng-model="student.name">
</div>[b]過濾器（Filters）[/b]
AngularJS通過Filters提供了改變數據展現形式的方法或者過濾部分數據，實現形式就是以‘|’字符分割expression： {{expression|filter1|filter2}}.例如：把student的名字全部展示爲大寫：
<div data-ng-repeat="student in students">
<h3>{{student.name|uppercase}}:{{student.age}}</h3>
</div>和Directive一樣，Filter同樣支持定製：http://docs.angularjs.org/guide/filter。
[b]模塊化（Modules）[/b]
在AngularJs中，應用可以拆分爲一個個的小模塊，模塊之間可以相互依賴，這樣各個功能可以非常方便重用和測試。在HTML中使用ng-app指令即可定義一個Module:
<html ng-app=“AngularJSSample”>然後在javascript中，可以非常簡單的獲取到這個Module，
var AngularJSSample = angular.module('AngularJSSample', []);之後，你可以爲這個Module了添加你想要得東西了，比方說我們前面提到的定製filter和Directive等。例如爲定義一個Greet Filter:
var AngularJSSample = angular.module('AngularJSSample', []);
AngularJSSample.filter('greet', function() {
return function(name) {
return 'Hello, ' + name + '!';
};
});另外angular.module方法的第二個參數是用來指定該模塊依賴哪個模塊的。
[b]零件視圖（Partial Views）[/b]
AngularJS除了通過ng-app可以把一個應用拆成小模塊，在模塊中，還可以通過ngView定義的頁面模板，然後和Route配合顯示對應的View，這個特性對想寫Single Page Application的同學非常有用。
[b]依賴注入（Dependency Injection）[/b]
AngularJS中提供了config操作爲一個Module注入依賴的Service，例如我想注入一個“$routeProvider"這個路由服務：
AngularJSSample.config(['$routeProvider', function($routeProvider){
}]) ;
[b]路由（Routes）[/b]
AngularJS中，可以直接用javascript定義可用的路由，頁面的跳轉再也不用到服務器去走一圈了
AngularJSSample.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/students', {
templateUrl: 'views/students.html',
controller: 'studentsController'
}).otherwise(
{
templateUrl: 'views/greeting.html'
})
}]);[b]控制器（Controllers）[/b]
上面的例子中，使用了一個studentController， AngularJS中在module上使用controller操作可以爲module定義一個Controller，Controller定義了一個操作的具體行爲。Controller通過依賴注入的服務完成各種操作，然後通過$scope服把view需要的數據傳遞過去。爲保證隔離性，在Controller中一定不要有任何與DOM相關的代碼。 定義一個controller如下：
AngularJSSample.controller(['studentController', function ($scope) {
}]); [b]Scope[/b]
Scope就是用來給Controller和View之間做數據傳遞的,Controller往scope中添加的任何數據，View都可以訪問到。
AngularJSSample.controller(['studentController', function ($scope) {
$scope.students = [
{name: 'John', age: 25, gender: 'boy'},
{name: 'Joy', age: 15, gender: 'girl'},
{name: 'Mary', age: 28, gender: 'girl'},
{name: 'Sebastian', age: 10, gender: 'boy'},
{name: 'Samantha', age: 16, gender: 'girl'}
];
}]);[b]小結[/b]
AngularJS自己定義一整套完整的邏輯，其對前端代碼的規範性很有幫助，另外，內置的各種Directive會極大的減少開發人員的代碼量；未來AngularJS + Restful Service可能會大行其道。
對AngualarJS的槽點有2個，第一，所有邏輯知識都暴露在JavaScript中，是否會導致一些安全問題，第二，官方的文檔可用性極差啊。