angularJS定義和特點
1.google前端開源框架
2.MVVM(model view view-model)設計模式 : Model將和ViewModel互動（通過$scope對象），將監聽Model的變化。這些可以通過View來發送和渲染，由HTML來展示你的代碼
3.方便的REST
4.數據綁定和依賴注入
5.可以操作XML一樣操作HTML,AngularJS通過自己的編譯器和directives來完成相關的設置
6.模板被作為DOM元素傳遞到Angular的編譯器
7.AngularJS 通過 指令 擴展了 HTML，且通過 表達式 綁定數據到 HTML。
構建angularJS應用
添加Angular的<script>標簽到<head>標簽裡
代碼如下:
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
添加ng-app directive到<body>標簽
代碼如下:
<body
ng-app="guetonline"
ng-controller="MainController"
>
新建目錄script和app.js文件，在app.js中定義和配置所有模塊和依賴
代碼如下:
var app = angular.module('guetonline', [
'ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures'
]);
在模塊app中定義控制器、服務、指令
代碼如下:
app.controller( 'MainCtrl', function( $rootScope, $scope, $http ) {} ) //控制器
app.service( 'MainSevicel', function() {} ) //服務
app.directive( 'dragToDismiss', function() {} ) //指令
在模塊app中定義路由
代碼如下:
app.config(function($routeProvider) {
$routeProvider.when('/', {templateUrl: 'index/home', reloadOnSearch: false});
$routeProvider.when('/scroll', {templateUrl: 'scroll.html', reloadOnSearch: false});
$routeProvider.when('/toggle', {templateUrl: 'toggle.html', reloadOnSearch: false});
$routeProvider.when('/tabs', {templateUrl: 'tabs.html', reloadOnSearch: false});
$routeProvider.when('/accordion', {templateUrl: 'accordion.html', reloadOnSearch: false});
$routeProvider.when('/overlay', {templateUrl: 'overlay.html', reloadOnSearch: false});
$routeProvider.when('/forms', {templateUrl: 'forms.html', reloadOnSearch: false});
$routeProvider.when('/dropdown', {templateUrl: 'dropdown.html', reloadOnSearch: false});
$routeProvider.when('/drag', {templateUrl: 'drag.html', reloadOnSearch: false});
$routeProvider.when('/carousel', {templateUrl: 'carousel.html', reloadOnSearch: false});
$routeProvider.when('/news/official_view', {templateUrl: '/news/official_view', reloadOnSearch: false});
});
待續。。下一步深入學習4.5兩步，還有過濾器