AngularJS组件化

随着前端的迅速的发展，前端开发出现了越来越多的库和框架，最近在看AngularJS的组件化，在此期间我遇到了很多的问题，在本人的思考和总结下得到了解决，对于这些的解决方法进行了整理，分享一下，希望能够帮助更多的人。

1.什么是组件化？

将页面中可以重复使用的标签封装成一个组件，方便这一部分UI重复使用，类似于JS中的函数，封装了一部分处理代码，通过函数调用就可以重复使用这些代码。

2.组件化的优势：

组件化的最重要作用就是提升开发和维护的效率。

最原始的组件，其功能可以单独开发测试，然后逐级拼装成更复杂的组件，直到整个应用。每一级都是易装配，可追踪，可管控的。

实例：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>

<!-- 此标签是我们自定义的标签 -->
<page-header></page-header>
<page-slide></page-slide>
<page-footer></page-footer>


<script>
    var app = angular.module("myApp", []);


    app.component("pageHeader", {
        template:"<h2>尊敬的用户{{username}}，欢迎访问本系统</h2>",
        controller:function($scope) {
            $scope.username = "tom";
        }
    });

//创建一个名叫pageSlide的组件
    app.component("pageSlide", {
        template:"<h2>这是一个侧边栏导航</h2>"
    });


    app.component("pageFooter", {
        template:"<h2>这是一个网页底部代码</h2>"
    });
</script>
</body>
</html>

上述的代码中：

 app.component("pageSlide", {
        template:"<h2>这是一个侧边栏导航</h2>"
    });

上述代码中component是组件的意思，我们通过此关键词创建组件，template是模板的意思，我们在此关键词后创建我们的模板。

如上面的实例一样大量的减少<html>你的代码量，而是封装标签通过<script>标签引入，这样可以实现代码的重复使用，也便于我们维护。大大减少了我们的工作量。