前面呢，我們大概的了解了下AngularJs的入門，也做過了hello world的一個demo，不知道大家有沒有掌握呢？在下面我們需要講一些AngularJS的一些干貨。
1，一個完整項目的目錄結構
以上圖片是根據大漠老師的整理而得，告訴大家一個好消息是，大漠老師的課程在慕課網上，每晚將近2萬人學習。
2，package.json文件
{ "version": "0.0.0", "private": true, "name": "angular-recommended", "description": "ng官方推薦的項目結構", "license": "MIT", "devDependencies": { "http-server": "^0.6.1", "bower": "^1.3.1" }, "scripts": { "postinstall": "bower install", "prestart": "npm install", "start": "http-server -p 8000" } }
package.json文件是給npm工具用的，把這個copy到你的文件（名字為package.json），運行 npm start即可。
3，index.html
<!doctype html>
<html ng-app="bookStoreApp">
<head>
<meta charset="UTF-8">
<title>BookStore</title>
<script src="framework/1.3.0.14/angular.js"></script>
<script src="framework/1.3.0.14/angular-route.js"></script>
<script src="framework/1.3.0.14/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
上面是我們的html的主文件，用來加載我們所需要的 js和css，另外，我們在此建立一個“根視圖”，它的作用是用來包裹后面插入進來的代碼片段的。也可以加一些很炫的動畫效果
4，tpls目錄--存放代碼片段
<ul>
<li ng-repeat="book in books"> 書名:{{book.title}} 作者:{{book.author}} </li>
</ul>
這個是tpls目錄中的一個html文件，叫bookList.html文件，看里面就這么些東西，並不是一個完整的html文件，我們叫代碼片段，借用angularjs我們可以給其賦值並插入到index.html的根目錄中。
ng-repeat是重復調用就像是我們用的 for in一樣，在這里呢會重復生成多個 <li>...</li>這樣的目錄結構。
5，js目錄--app.js
上面我們說過app.js是程序的主入口點，也就是說，如果程序運行的話，會首先運行app.js，根據app.js來控制整個項目的運行情況，我們來看看代碼
var bookStoreApp = angular.module('bookStoreApp', [ 'ngRoute', 'ngAnimate', 'bookStoreCtrls', 'bookStoreFilters', 'bookStoreServices', 'bookStoreDirectives' ]); bookStoreApp.config(function($routeProvider) { $routeProvider.when('/hello', { templateUrl: 'tpls/hello.html', controller: 'HelloCtrl' }).when('/list',{ templateUrl:'tpls/bookList.html', controller:'BookListCtrl' }).otherwise({ redirectTo: '/hello' }) });
首先我們要建一個模塊，angularjs所有的程序都是建立在模塊上的。讓我們看看，我們建立的模塊名稱呢叫 bookStoreApp,這個也是index.html中 ng-app的值，上節我們就說過了ng-app的作用在此就不在說了。
當程序走到這呢，會發現這個模塊需要依賴很多的模塊(angular.module(ModuleName',[..依賴模塊..]))，程序呢就會根據數組里面的模塊名稱一個一個加載進來，在此說下，這個模塊名稱呢是 framework文件里面的某個文件名。
下面我們看看 模塊的配置，有一個 $routeProvider 這個呢是路由控制器它的作用是根據不同的url控制不同的視圖展示出來，當用 .when()的時候，如果url地址滿足里面的條件的話呢，就會找到模板文件並執行定義好的controll文件給模板文件賦值並插入到index.html的根目錄，如果都找不到就會執行 otherwise()里面的方法。下面看效果
ok,注意看瀏覽器中的地址欄，會發現同樣的文件(index.html)，而后面的參數不同顯示的結果也不同。在里面我們會看到一個 # 這個會告訴瀏覽器在頁面內跳轉。
6，js目錄--controllers.js
var bookStoreCtrls = angular.module('bookStoreCtrls', []); bookStoreCtrls.controller('HelloCtrl', ['$scope', function($scope) { $scope.greeting = { text: 'Hello' }; } ]); bookStoreCtrls.controller('BookListCtrl', ['$scope', function($scope) { $scope.books =[ {title:"《Ext江湖》",author:"大漠窮秋"}, {title:"《ActionScript游戲設計基礎（第二版）》",author:"大漠窮秋"}, {title:"《用AngularJS開發下一代WEB應用》",author:"大漠窮秋"} ] } ]); /** * 這里接着往下寫，如果控制器的數量非常多，需要分給多個開發者，可以借助於grunt來合並代碼 */
看上面的代碼，我建立了兩個控制器，控制器里我們給$scope賦值，這會根據app.js里面的路由來載入到代碼片段並且生成一個賦完值的html。