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

来源：互联网发布：网络情歌对唱2016 编辑：程序博客网时间：2024/06/03 23:53

<!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>

0 0