离子项目基本结构与angularjs?

时间:2016-02-08 17:20:52

标签: angularjs ionic-framework ion

我是离子的新手,我开始学习离子,我正在尝试创建离子结构,我已经添加了离子链接。我创建了单独的html文件和模块文件和配置文件和所有,实际上我想要用链接加载单独的html文件....我添加了以下代码..

的index.html

<!DOCTYPE html>
<html ng-app="SomeApp">
<head>
<meta charset="utf-8">
<title>App</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link data-require="ionic@1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.13/css/ionic.css" />
<script data-require="ionic@1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.js"></script>
    <script src="Module.js"></script>
    <script src="js/Core/config.js"></script>
    <script src="js/Controllers/WorkCtrl.js"></script>
</head>
<body>
    <ion-view></ion-view>
</body>
</html>

Module.js

var ionApp = angular.module("SomeApp",['ionic']);

config.js

ionApp.config(function($stateProvider,$urlRouterProvider){
    $stateProvider
        .state('home', {
            url:'/Home',
            views: {
                'menuContent': {
                    templateUrl: 'views/Home/Home.html'
                }
            }
        })
        .state('Work', {
            url:'/Work',
            views: {
                'menuContent': {
                    templateUrl: 'views/Home/Work.html'
                }
            }
        })
        .state('Personal', {
            url:'/Personal',
            views: {
                'menuContent': {
                    templateUrl: 'views/Home/Personal.html'
                }
            }
        })
        $urlRouterProvider.otherwise('/Home');
});

home.html的

<ion-view>
<ion-content>
    <button ng-click="gotoWork()">Work</button>
    <button ng-click="gotoPersonal()">Personal</button>
    Hello
</ion-content>
</ion-view>

Work.html和personal.html

//Some matter Here in about two html files...

WorkCtrl.js

ionApp.controller(function($scope,$location){
    $scope.gotoWork = function(){
        $location.path("/Work");
    };
    $scope.gotoPersonal = function(){
        $location.path("/Personal");
    };
});

我正在尝试加载第一个home.html文件....但它只是显示白页而没有任何错误,如果我在此代码中有任何错误,请回复任何一个..

谢谢

2 个答案:

答案 0 :(得分:0)

你能写出你的文件夹结构吗?您确定要将HTML文件放在Home文件夹中吗?我认为你的tamplateUrl不正确!

答案 1 :(得分:0)

尝试: .state(&#39; home&#39;,{url:&#39; / Home&#39;,templateUrl:&#39; views / Home / Home.html&#39;})

设置状态时,

在json中处于相同URL级别的TemplateUrl ...