標籤：屬性 target ice center str tracking 新浪微博 htm 商務邏輯
繼上篇教程中提到的，我們建立一個簡單的tabs類型的Ionic項目。
依據檔案夾檔案我們知道，系統自己主動建立了一個controller檔案和server檔案，而且把全部的控制器和服務都寫到這兩個檔案中面。
這是一個簡單的項目，商務邏輯代碼也非常少。這樣子實現並沒有什麼問題。可是當我們的項目越寫越多。商務邏輯越來越複雜。假設我們還是把全部的控制器寫到同一個檔案中面。那可能我們將要面對的就是一個有著上萬行代碼的檔案。
每次編輯僅僅能通過搜尋keyword來定位了。
所以真正編輯項目的時候我們應該都是把單獨的controller分離出來的。本次教程中使用的是requirejs。
首先我們應該先把單獨的controller提取出來。儲存到單獨的檔案裡。第一步我們先把代碼拷貝出來，並不做改動。
先無論報錯，我們僅僅是先理解一下，檔案分離的內容。
建立兩個目錄用於存放controller和server檔案，便於管理。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >
然後我們要做的就是將單獨的controller檔案和controllers檔案關聯起來。
首先我們先引用requirejs檔案。下載requirejs檔案放到項目目錄中並在index.html中引用。
然後我們改動controllers/controllers.js檔案。使他符合requireJs要求的規範。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >
然後分別改動單獨的controller檔案。讓他們也符合規範。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >
通過上面的改動，應該不難發現，要把現有的項目完畢檔案分離僅僅須要複製代碼就能夠了，並不須要改動商務邏輯。
接下來我們要做的就是把這些檔案關聯起來。
改動controllers檔案：
這樣子我們就完畢了controller檔案的分離和關聯，可是有些controller檔案實用到服務。所以我們也要在controllers檔案裡關聯服務檔案。
在controllers檔案裡增加var services= require(‘services/services‘);
相同的做法，改動servers檔案，將裡面的服務獨立出來。
改動後的檔案檔案夾和services檔案例如以下。
這樣子我們就實現了controller和server檔案的分離。如今我們將項目中的其它檔案也改動成requireJs的規範。並使用requireJs的方式來啟動項目
改動app.js:(僅僅是多了一層封裝返回app對象。裡面的業務不做改動)
改動的地方都幾乎相同了。接下來跟著我看一下怎樣使用require的方法啟動Ionic項目。
首先在index檔案裡引用requireJs的script標籤中增加 data-main="js/main.js"屬性，表示啟動入口的檔案地址。
<script data-main="js/main.js" src="js/require.js"> </script>
建立main.js,這裡不做具體的配置。僅僅是定義了一個簡單的程式入口
說明程式是從bootstrap檔案啟動的
建立bootstrap.js這裡做了一些簡單的推斷，假設認為不好理解的話，能夠直接啟動項目angular.bootstrap(document, [app.name]);watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >
改動index.html去除ng-app="starter"把<body ng-app="starter">改動成<body>注意由於js檔案是通過requestjs載入的，所以要把index中對js的引用去掉<!-- your app‘s js --><!--<script src="js/app.js"></script>--><!--<script src="js/controllers/controllers.js"></script>--><!--<script src="js/services.js"></script>-->執行項目，正常啟動項目，從介面上看不出與建立項目的差別。到此本次教程的內容就所有完畢了。項目Demo地址：http://pan.baidu.com/s/1eSi7huE假設你還有什麼其它的問題,能夠通過下面方式找到我新浪微博:小虎Oni公眾號:ionic__有其它問題的能夠關注一下公眾號提問(右側雙底線)：ionic__watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvb25pbF9jaGVu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >
ionic新手教程第三課-在項目中使用requirejs分離controller檔案和server檔案
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
