首页 > 代码库 > ionic新建工程

ionic新建工程

2024-09-24 23:39:02   216人阅读

1、添加css,img,js,lib,templates文件夹
2、添加manifest.json和service-worker.js
3、添加index.html文件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>Test</title>
 6     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
 7 
 8     <link href="http://www.mamicode.com/lib/ionic/css/ionic.css" rel="stylesheet">
 9     <link href="http://www.mamicode.com/lib/angular-material.css" rel="stylesheet">
10     <link href="http://www.mamicode.com/lib/jquery-ui.min.css" rel="stylesheet">
11 
12     <link rel="manifest" href="http://www.mamicode.com/manifest.json">
13 
14     <script src="http://www.mamicode.com/lib/ionic/js/ionic.bundle.js"></script>
15     <script src="http://www.mamicode.com/lib/jquery-1.12.3.min.js"></script>
16     <script src="http://www.mamicode.com/lib/jquery.md5.js"></script>
17     <script src="http://www.mamicode.com/lib/jquery-ui.min.js"></script>
18     <script src="http://www.mamicode.com/js/app.js"></script>
19     <script src="http://www.mamicode.com/js/controllers.js"></script>
20 
21     <script src="http://www.mamicode.com/lib/angular-aria.js"></script>
22     <script src="http://www.mamicode.com/lib/angular-material.min.js"></script>
23 </head>
24 <body ng-app="ysw" ng-controller="HomeCtrl" ng-cloak>
25 <ion-nav-view name="default"></ion-nav-view>
26 </body>
27 </html>

 

4、在js文件夹下新建app.js文件

angular.module(‘ysw‘, [‘ionic‘, ‘ysw.controllers‘])

.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
        if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            cordova.plugins.Keyboard.disableScroll(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})/**
 * Created by Administrator on 2017/5/23.
 */

    .config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

        $ionicConfigProvider.views.transition("none");

        $stateProvider

        .state(‘home‘, {
                url: ‘/home‘,
                cache: ‘false‘,
                views: {
                    ‘default‘: {
                        templateUrl: ‘templates/home.html‘,
                        controller: ‘HomeCtrl‘
                    }
                }
        })

        $urlRouterProvider.otherwise(‘/home‘);
    });

 

5、在js文件夹下新建controllers.js文件

angular.module(‘ysw.controllers‘,[])

.controller(‘HomeCtrl‘, function ($scope) {
    try {


    }catch(e){
        console.error(e);
    }
})

 

说明：

1、新建的HTML文件在templates文件夹下，并在app.js中写明，对应的controller添加在controllers.js文件中。

2、index.html中的<ion-nav-view name="default"></ion-nav-view>必须要添加。

3、app.js中的$urlRouterProvider.otherwise(‘/home‘);用于没有指明时默认显示的页面。

ionic新建工程


联系
我们