angularJS組件化的項目流程

angularjs項目

不管是angular 還是vue 、react等等,作爲一個框架最終都服務於一個產品，那麼他所包含的所必須的功能就是項目的重點，例如：表單、搜索、購物車等功能。確定完需求，我們就開始項目的搭建。

第一步 || 路由配置

1、環境的配置，在這裏使用的是angularjs1的版本 採用組件化的方式進行開發。

2、基礎路由的配置我們這裏使用的是ui-router 我們把它放在app.js裏

angular.module('maoyan',[
    'ui.router',
    'angularCSS',
    'searchComp',
    'willShowComp',
    'mineComp',
    'findComp',
    'classifyComp',
    'storeComp',
    'cinema-descComp',
    'sortComp',
    'topicComp',


])

    .config(function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/begin');
    })

//在這裏我們引入所需要的所有依賴項，配置一下在錯誤輸入情況下所需要跳轉的界面

接下來配置每個文件的路由大概是這樣個

angular.module('mineComp',[])//與路由名相對應
    .config(function ($stateProvider,$urlRouterProvider) {
        $stateProvider
            .state('mine',{
                url:'/mine',//url地址
                templateUrl:'components/homeMine/mine/mine.html',//引入css
                css:'components/homeMine/mine/mine.css',
                controller:'mineCtrl'//控制器的名字與下面的控制其對應
            })
    })

 .controller('mineCtrl',['$scope',function ($scope) {})

其他頁面的路由配置差不多，依次完成

第二步 || 進行spa界面的設置

<div ui-view=""></div>

    <div class="footer">
        <ul>
            <li ui-sref="hotShow">電影</li>
            <li ui-sref="cinema" class="cinema">影院</li>
            <li ui-sref="find">發現</li>
            <li ui-sref="mine" class="mine">我的</li>
        </ul>
    </div>
    //index.html頁面的主要作用就是進行spa的路由，其他主要內容都在components裏

第三步 || 分頁面的編寫

分頁面的編寫無需頭部和尾部直接寫主要內容即可，css和html在路由裏已經配置好，所以只需要引入index.js就行.
分頁面的編寫需要注意的點有
1：注意ng-語法的運用 ng-click ,ng-change,ng-bind,和ng-表單的運用， 如果動態添加的數據你對其進行操作時 需要進行監聽，語法在這裏不詳細講述。

    <div class="swiper-slide" ng-repeat="x in itemAs">
        <a href="">{{x.a}}</a>
        <fieldset><legend>{{x.b}}</legend></fieldset>
        <img ng-src="{{x.c}}" alt="">
        <p></p>
    </div>
    //這裏貼出一個ng-repeat使用的例子，主要是運用到了service來得到數據，在頁面上用ng-repeat來解析呈現。

2：angular裏不推薦用dom操作儘量都封裝在自定義指令裏進行使用，

    .directive("clickUl",function () {
        return{
            restrict:"A",
            link:function ($scope ,elem ,attrs) {
                $(elem).on('click','li',function (e) {

                    console.log(e.target.innerText);

                })
            }
        }
    })
    //html——<ul class="hs_list" click-ul >

3、頁面傳值
推薦一個網站: 炮灰神的博客有詳細的介紹
http://www.cnblogs.com/Razor0/p/5200435.html
常用的是$$state.go()和factory的方法
$state一般只能帶一個參數，factory的方法因爲是對象存儲可以帶多個參數。

第四步 || angular 的調試

不得不承認angular的調試是比較愁人的，網上的相關解讀也比較少，在這裏說一下我調試的辦法。
1、
一般報[ injector:modulerr ] http://errors.angularjs.org/1.2.16/$injector/modulerr?p0=mainApp&
一般是路由出現問題，調試要一個一個模塊去找，看看有沒有少字符/錯誤字符

2、結尾帶有undefined的問題

Error: [ng:areq] http://errors.AngularJS.org/1.4.8/ng/areq?p0=HelloCtrl&p1=not%20a%20function%2C%20got%20undefined
這個錯誤的出現一般是沒有使用module 或者沒有引入js文件的問題。

其他的情況就要具體問題具體分析了，建議搭建完整體的路由後確保無誤在進行下一步。

大概就這麼多，經驗較少，有錯誤的話，還請指教O(∩_∩)O哈！