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文件的问题。

扫描二维码关注公众号，回复： 2963153 查看本文章

其他的情况就要具体问题具体分析了，建议搭建完整体的路由后确保无误在进行下一步。

大概就这么多，经验较少，有错误的话，还请指教O(∩_∩)O哈！