Angular组件

最新推荐文章于 2023-11-13 17:19:23 发布

请叫我龙仔c

最新推荐文章于 2023-11-13 17:19:23 发布

阅读量694

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/Jnlong_vae/article/details/70877386

版权

web前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

Angular组件(component)

大家好，今天给大家浅谈一下Angular组件

通常我们要写一个大型项目时，比如首页和登录页等等页面有公用的头部导航div或者侧边栏div亦或是脚部div，如果我们每个页面要写的话，那么代码会出现重复且繁杂，会占用大量的系统资源。如果我们写一个公用的头部导航、侧边栏、脚部把他们封装起来，哪个页面需要他们直接把他们引入到当前的页面中，这会非常简便高效。所以我们需要用到Angular组件（化）了。

一、组件（化）简介

将页面可以重复使用的标签封装成一个组件，方便这一部分的UI重复使用，甚至组件中可以对UI进行适当的业务逻辑处理，如链接跳转、数据运算等等。这就类似于JS中的函数，封装了一部分处理代码，通过函数调用就可以重复使用这些代码了。

二、基本组件定义语法结构

在这里我们首先封装一个简单的组件

<!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>
<my-comp></my-comp>

<my-comp></my-comp>

<my-comp></my-comp>

<my-comp></my-comp>

<script>
    var app = angular.module("myApp", []);  
    app.component("myComp", {    //在这里封装了一个组件
        template:"<h1>组件化封装的内容<small>这是一个副标题</small></h1>"
    });
</script>
</body>
</html>

注意：组件命名规则
组件的命名有框架自己的规则和使用规范，都是根据实际项目需要进行封装处理的
组件命名规则：驼峰命名法，见名知意，如：myComp
使用规则：W3C命名规则，将大写字母转换成小写字母，前面加中划线，如<my-ctrl></my-comp>

三、组件化模板

前面我谈到若写一个大型项目是各个页面或多或少有公用的头部导航、侧边栏、底部，那么这时候组件化模板必不可少了。接下来我简单说明一下这个组件化模板怎么使用吧！

首先我们先写一个index（主页）.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index4.css">
    <script src="js/AngularJS/angular.min.js"></script> 
    <script src="js/app/index/index.js"></script>  //这里一定要引入index.js文件
</head>
<body>
    <div class="container">
        <page-header></page-header>
        <page-slide></page-slide>
        <div class="pagebody"></div>
        <page-footer></page-footer>
    </div>
</body>
</html>

index.js

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

app.component("pageHeader",{
   templateUrl:"js/app/index4/pageHeader/pageHeader.html",
    controller:function ($scope) {
        
    }
});

app.component("pageSlide",{
    templateUrl:"js/app/index4/pageSlide/pageSlide.html",
    controller:function ($scope) {

    }
});

app.component("pageFooter",{
    templateUrl:"js/app/index4/pageFooter/pageFooter.html",
    controller:function ($scope) {

    }
});

pageHeader.html

<div class="header-pageHeader">
    页面头部
</div>
<style>
    .header-pageHeader{
        width: 100%;
        height: 200px;
        background-color: #2aabd2;
        color: #ffffff;
    }
</style>

同理pageSlide.html、pageFooter.html的格式和pageHeader.html格式差不多，需要注意的是html和css样式需要写在一起！！！

运行结果如图所示

请叫我龙仔c

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular组件

Angular组件(component) 大家好，今天给大家浅谈一下Angular组件通常我们要写一个大型项目时，比如首页和登录页等等页面有公用的头部导航div或者侧边栏div亦或是脚部div，如果我们每个页面要写的话，那么代码会出现重复且繁杂，会占用大量的系统资源。如果我们写一个公用的头部导航、侧边栏、脚部把他们封装起来，哪个页面需要他
复制链接

扫一扫