您的位置：首页 > Web前端 > AngularJS

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

2017-05-10 20:39 246 查看

<!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"[/b],["$scope",function ($scope) {

}])
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航