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哈！