AngularJS组件化

来源：互联网发布：智多星软件编辑：程序博客网时间：2024/06/07 01:30

随着前端的迅速的发展，前端开发出现了越来越多的库和框架，最近在看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>标签引入，这样可以实现代码的重复使用，也便于我们维护。大大减少了我们的工作量。

0 0

AngularJS组件化

1.什么是组件化？

2.组件化的优势：

上述的代码中： app.component("pageSlide", { template:"<h2>这是一个侧边栏导航</h2>" });上述代码中component是组件的意思，我们通过此关键词创建组件，template是模板的意思，我们在此关键词后创建我们的模板。

上述的代码中：
app.component("pageSlide", { template:"<h2>这是一个侧边栏导航</h2>" });
上述代码中component是组件的意思，我们通过此关键词创建组件，template是模板的意思，我们在此关键词后创建我们的模板。