IONIC和angularjs:在导航组件中使用angular-ui-router时没有任何事情发生

时间:2015-12-04 07:34:59

标签: javascript html angularjs ionic-framework ionic

最近我遵循了有关离子导航使用的说明,但是我测试但没有用,我真的无法找到出错的地方。 Bellow是源文件,只有两个,一个是 index.html ,一个是 app.js index.js的内容:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <!-- your app's js -->
    <script src="js/app.js"></script>
</head>

<body ng-app="starter">
    <ion-nav-bar class="bar-positive">
        <ion-nav-back-button class="button-clear">
            <i class="ion-arrow-left-c"></i> Back
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
    <script type="text/ng-template" id="todos.html">
        <ion-view title="Todos">
            <ion-content>
                <ion-list>
                    <ion-item ng-repeat="todo in todos" class="item item-icon-right" ui-sref="app.todos.detail({todo: $index})">
                        <span ng-class="{done: todo.done}">{{todo.title}}</span>
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-view>
    </script>
    <script type="text/ng-template" id="todo.html">
        <ion-content>
            <div class="item">
                <p>{{todo.title}}</p>
            </div>

            <div class="item item-checkbox">
                <div>
                    <label class="checkbox">
                        <input type="checkbox" ng-model="todo.done">
                    </label>
                    Done
                </div>

            </div>
        </ion-content>
    </script>
</body>

</html>

app.js的内容

var app = angular.module('starter', ['ionic'])
app.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('app.todos', {
        abstract: true,
        url: '/todos',
        template: '<ion-nav-view></ion-nav-view>'
    })

    $stateProvider.state('app.todos.index', {
        url: '',
        templateUrl: 'todos.html',
        controller: 'TodosCtrl'
    })

    $stateProvider.state('app.todos.detail', {
        url: '/:todo',
        templateUrl: 'todo.html',
        controller: 'TodoCtrl'
    })
})

app.factory('TodosService', function() {
    var todos = [{
        title: "Take out the trash",
        done: true
    }, {
        title: "Do laundry",
        done: false
    }, {
        title: "Start cooking dinner",
        done: false
    }]

    return {
        todos: todos,
        getTodo: function(index) {
            return todos[index]
        }
    }
})

app.controller('TodosCtrl', function($scope, TodosService) {
    $scope.todos = TodosService.todos
});

app.controller('TodoCtrl', function($scope, todo) {
    $scope.todo = todo
})

当我在命令行中键入ionic serve命令时,我输入了网址&#39; http://xxxx/todos&#39;,我什么都没看到,但应该看到todos.html,那么为什么会这样呢?

1 个答案:

答案 0 :(得分:1)

本声明:

  public class CategoriesAdapter extends BaseAdapter {
TextView categoryName;
ImageView catImage;
Pojo pojo;
private Context activity1;
ArrayList<Pojo> data1;
private ArrayList<Pojo> arraylist1 = null;
public static LayoutInflater inflater;

public CategoriesAdapter(Context ctx, ArrayList<Pojo> catt) {
    // TODO Auto-generated constructor stub
    activity1 = ctx;
    data1 = catt;
    inflater = (LayoutInflater) activity1
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    this.arraylist1 = new ArrayList<Pojo>();
    this.arraylist1.addAll(data1);
}

@Override
public int getCount() {
    // TODO Auto-generated method stub
    return data1.size();
}

@Override
public Object getItem(int position) {
    // TODO Auto-generated method stub
    return data1.get(position);
}

@Override
public long getItemId(int position) {
    // TODO Auto-generated method stub
    return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub
    View v = convertView;

    pojo = new Pojo();
   // UNIVERSAL IMAGE LOADER SETUP
    DisplayImageOptions defaultOptions = new DisplayImageOptions.Builder()
            .cacheOnDisc(true).cacheInMemory(true)
            .imageScaleType(ImageScaleType.EXACTLY)
            .displayer(new FadeInBitmapDisplayer(300)).build();

    ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(
            activity1)
            .defaultDisplayImageOptions(defaultOptions)
            .memoryCache(new WeakMemoryCache())
            .discCacheSize(100 * 1024 * 1024).build();

    ImageLoader.getInstance().init(config);
    // END - UNIVERSAL IMAGE LOADER SETUP
    v = inflater.inflate(R.layout.grid_item, parent, false);
    pojo = data1.get(position);
    categoryName = (TextView) v.findViewById(R.id.textView);
    catImage = (ImageView) v.findViewById(R.id.imageView);
    categoryName.setText(pojo.getCatName());
    String url = Config.BASEURL+""+ MainActivity.imagePath+"/"+""+pojo.getCatImage();
    Log.e("imageurl",""+url);

    ImageLoader imageLoader = ImageLoader.getInstance();
    DisplayImageOptions options = new DisplayImageOptions.Builder().cacheInMemory(true)
            .cacheOnDisc(true).resetViewBeforeLoading(true)
            .showImageForEmptyUri(R.drawable.picc)
            .showImageOnFail(R.drawable.picc)
            .showImageOnLoading(R.drawable.picc).build();


    imageLoader.displayImage(url, catImage, options);

    return v;
 }

表示$stateProvider.state('app.todos', { todos州的子状态。但是你还没有配置一个名为app的状态,正如我从你的配置中看到的那样,你可能希望从每个app删除app.(不要忘记state s )。