AngularJS ui.router不会加载模板

时间:2017-03-05 10:00:08

标签: javascript angularjs uiview angularjs-scope angular-ui-router

我还在学习AngularJS并遇到UI路由器问题。 它只是不会加载模板。

这是我的代码:

<body class="top-navigation" ng-app="mixcontainer">

      <div id="wrapper">
        Navbar here
      </div>
      <div class="row m-b-lg m-t-lg" ng-controller='MainCtrl'>
        <div ui-view></div>
      </div>
    </div>
  </div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
<script type="text/javascript" src="app.js"></script>



</body>

和我的角度app.js:

var app = angular.module('mixcontainer',['ui.router'])

app.config(function($stateProvider){
    var test = {
        name: 'test',
        url: '/test',
        template: '<h3>Hello world</h3>',
        controller: 'MainCtrl'
    }

    $stateProvider.state(test);
})

app.controller('MainCtrl',['$scope','$state','$rootScope', function($scope,$state,$routeScope){

}])

我尝试了多次,无论是什么角度都不会产生ui-view,无论它是模板还是templateUrl。我的浏览器或服务器控制台也没有任何错误。我已经上了一个星期了,它让我疯了。

1 个答案:

答案 0 :(得分:0)

尝试以正确的方式使用public class CardAdapter extends RecyclerView.Adapter<CardAdapter.ViewHolder> { //Imageloader to load image private ImageLoader imageLoader; private final Context context; //List to store all posts List<Posts> Posts; //Constructor of this class public CardAdapter(List<Posts> Post, Context context){ super(); //Getting all this.Posts = Post; this.context = context; } @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View v = LayoutInflater.from(parent.getContext()) .inflate(R.layout.posts_list, parent, false); ViewHolder viewHolder = new ViewHolder(v); return viewHolder; } @Override public void onBindViewHolder(ViewHolder holder, int position) { Posts post = Posts.get(position); holder.post = post; //Loading image from url //imageLoader = CustomVolleyRequest.getInstance(context).getImageLoader(); //Showing data on the views //holder.imageView.setImageUrl(post.getImageUrl(), imageLoader); Picasso.with(context).load(post.getImageUrl()).into(holder.imageView); holder.textViewName.setText(post.getName()); holder.textViewPublisher.setText(post.getPublisher()); holder.setIsRecyclable(false); } @Override public int getItemCount() { return Posts.size(); } class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener{ //Views public ImageView imageView; public TextView textViewName; public TextView textViewPublisher; public Posts post; public ImageView ProfilePic; //Initializing Views public ViewHolder(View itemView) { super(itemView); imageView = (ImageView) itemView.findViewById(R.id.imageViewHero); textViewName = (TextView) itemView.findViewById(R.id.textViewName); textViewPublisher = (TextView) itemView.findViewById(R.id.textViewPublisher); } @Override public void onClick(View v) { //... } } } } 创建您的ui路线。使用private JsonArrayRequest getDataFromServer(String requestCount, String user_id) { //Initializing ProgressBar final ProgressBar progressBar = (ProgressBar) findViewById(R.id.progressBar1); //Displaying Progressbar progressBar.setVisibility(View.VISIBLE); requestCount = requestCount + "&user=" + user_id; //JsonArrayRequest of volley JsonArrayRequest jsonArrayRequest = new JsonArrayRequest(Config.DATA_URL + String.valueOf(requestCount), new Response.Listener<JSONArray>() { @Override public void onResponse(JSONArray response) { //Calling method parseData to parse the json response parseData(response); //Hiding the progressbar progressBar.setVisibility(View.GONE); } }, new Response.ErrorListener() { @Override public void onErrorResponse(VolleyError error) { progressBar.setVisibility(View.GONE); //If an error occurs that means end of the list has reached Toast.makeText(UserAreaActivity.this, "No More Items Available", Toast.LENGTH_SHORT).show(); } }); //Returning the request return jsonArrayRequest; } //This method will get data from the web api private void getData() { //Adding the method to the queue by calling the method getDataFromServer requestQueue.add(getDataFromServer(requestCount, user_id)); //Incrementing the request counter //requestCount++; } //This method will parse json data private void parseData(JSONArray array) { for (int i = 0; i < array.length(); i++) { //Creating the object Posts PostObj = new Posts(); JSONObject json = null; try { //Getting json json = array.getJSONObject(i); //Adding data to the object PostObj.setImageUrl(json.getString(Config.TAG_IMAGE_URL)); PostObj.setName(json.getString(Config.TAG_NAME)); PostObj.setPublisher(json.getString(Config.TAG_PUBLISHER)); requestCount = PostObj.setId(json.getString(Config.TAG_ID)); } catch (JSONException e) { e.printStackTrace(); } //Adding object to the list listPosts.add(PostObj); } //Notifying the adapter that data has been added or changed adapter.notifyDataSetChanged(); } 切换您的路线,例如在你的控制器逻辑内。这是working fiddle example,可以帮助您。

$stateProvider('nameOfState', configurationObject)