ionic -使用内置指令基本环境搭建angular

最新推荐文章于 2022-07-16 22:28:50 发布

郭浩326

最新推荐文章于 2022-07-16 22:28:50 发布

阅读量623

点赞数

分类专栏： ionic

本文链接：https://blog.csdn.net/guohao326/article/details/71588226

版权

ionic 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="js/lib/ionic1/css/ionic.min.css">
    <script src="js/lib/ionic1/js/ionic.bundle.min.js"></script>
    <title>Title</title>

    <!--

   
     * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
     * ionic CSS组件部分
     *  主要是用于快速开发移动端界面的！
     *
     * ionic的css组件部分，可以和任意一个前端框架搭配来完成前端项目的快速开发
     *
     *
     * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
     * 前端UI：ionic
     * 前端框架：AngularJS
     *
     * 前端移动端开发：怎么做？
     * ** 因为ionic是基于AngularJS开发出来的一个移动端框架
     *
     * 如果是ionic + AngularJS搭配，就不需要使用CSS组件部分
     * 而是直接使用ionic中内置的Angular指令来完成界面处理
     *
        ionic + Angular一起使用
         通常有两种使用方式
        * 使用ionic的css组件，将ionic就当成一个纯粹的样式框架来使用，

	 页面中就是大量的div和ionic的样式，在项目开发时并不是很常见
        * 使用Ionic内置的Angular指令，来完成页面的布局和数据处理，

         项目开发常规使用的方式


        要使用内置指令——Angular应用才能解析


        页头内置指令
        ion-header-bar
        页脚内置指令
        ion-footer-bar
        内容内置指令
        ion-content
    -->
</head>
<body ng-controller="myCtrl">
<!--页面头部-->
    <ion-header-bar class="bar-royal">
        <h1 class="title">页头开始</h1>
    </ion-header-bar>
<!--内容-->
    <ion-content>
        <h2>我是内容</h2>
    </ion-content>
<!--页面底部-->
    <ion-footer-bar class="bar-royal">
        <h1 class="title">我是页面底部</h1>
    </ion-footer-bar>
</body>
<script>
    var app=angular.module("myApp",["ionic"]);
    app.controller("myCtrl",["$scope",function ($scope) {

    }])
</script>
</html>

郭浩326

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ionic -使用内置指令基本环境搭建angular

html>html ng-app="myApp">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
复制链接

扫一扫

专栏目录