Angular ui.router，任何结果和任何错误 [英] Angular ui.router, any result and any error

查看：26
本文介绍了Angular ui.router，任何结果和任何错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的角度视图有点问题.我尝试使用 ui.router 来配置我的路由，但它不起作用.我尝试使用控制台，但很清楚.我不知道我能做些什么来解决这个问题.

(function(){'使用严格';const app = angular.module('myApp', ['common.services', 'common.servicesMock', 'ui.router']);app.config(function($stateProvider, $locationProvider) {$locationProvider.hashPrefix("");$stateProvider.state('newList', {模板:'views/newsListView.html'，网址:'/新闻'，控制器:'newsCtrl as vm',});//删除路由中的#$locationProvider.html5Mode({启用:真，要求基础:假});});}())

<html lang="zh-cn"><头><meta charset="UTF-8"><title>维基</title><!-- 引导程序--><link rel="stylesheet" href="styles/bootstrap.min.css"><link rel="stylesheet" href="styles/app.css"><body ng-app="myApp"><div class="容器">

<!-- 图书馆 &框架-><script src="scripts/js/angular.min.js"></script><script src="scripts/js/angular-mocks.js"></script><script src="scripts/js/angular-resource.min.js"></script><script src="scripts/js/angular-ui-router.min.js"></script><script src="scripts/js/jquery-3.1.1.min.js"></script><script src="scripts/js/bootstrap.min.js"></script><!-- 应用脚本--><script src="scripts/app.js"></script><!-- 控制器--><script src="scripts/controllers/newsCtrl.js"></script><script src="scripts/controllers/categoriesCtrl.js"></script><!-- 服务--><script src="scripts/common/services/common.services.js"></script><script src="scripts/common/services/categories/categoriesService.js"></script><script src="scripts/common/services/common.servicesMock.js"></script><script src="scripts/common/services/news/newsResource.js"></script></html>

这是我想在浏览器中显示的视图.

<button type="button" class="btn btn-default" ng-click="vm.toggleCategories()">{{vm.showCategories ?"Hide" : "Show"}} 类别</button><br><div ng-show="vm.showCategories" class="btn-group" data-toggle="buttons"><label class="btn btn-primary active" ng-repeat="cate in vm.categories"><input type="radio" name="options" id="{{cate}}" autocomplete="off">{{cate}}

<div class="row"><div class="row"><字段集><legend class="title">杰出的</legend></fieldset><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" ng-repeat="newsItem in vm.news | filter:{important: true} | orderBy: '-日期'"><div class="缩略图"><img ng-src='{{newsItem.banner}}' class="banner"><div class="caption"><span class="date">{{newsItem.date |日期}}</span><h3>{{newsItem.newsTitle}}</h3><p>{{newsItem.newsDeciption.substring(0,200) + "..."}}</p><p><a href="#" class="btn btn-primary">阅读更多</a><a href="#" class="btn btn-default">编辑</a></p>

<div class="row"><字段集><legend class="title">最新消息</legend></fieldset><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 thumb-xs" ng-repeat="newsItem in vm.news | filter:{important: false} | orderBy: '-日期'"><div class="缩略图"><img ng-src='{{newsItem.banner}}' class="banner"><div class="caption"><span class="date">{{newsItem.date |日期}}</span><h3>{{newsItem.newsTitle}}</h3><p>{{newsItem.newsDeciption.substring(0,200) + "..."}}</p><p><a href="#" class="btn btn-primary">阅读更多</a><a href="#" class="btn btn-default">编辑</a></p>

感谢您的时间.

解决方案

虽然您声明了状态，但您需要在第一次启动时实际进入"状态.假设 newList 状态是你想要去的状态，你可以通过两种方式做到:

  1. 使用 $urlRouterProvider 路由到根目录下的 /news:

    app.config(function($stateProvider, $locationProvider, $urlRouterProvider) {$locationProvider.hashPrefix("");$urlRouterProvider.when('/','/news');$stateProvider.state('newList', {模板:'views/newsListView.html'，网址:'/新闻'，控制器:'newsCtrl as vm',});//删除路由中的#$locationProvider.html5Mode({启用:真，要求基础:假});});

  2. 通过.run angular 方法

    app.run(['$state',function($state){$state.go('newList');}])

I have a little problem with my views in angular. I try to use ui.router to config my routes but it doesn't work. I try to use the console but it's clear. I don't know what i can do fix this problem.

(function(){

  'use strict';

  const app = angular.module('myApp', ['common.services', 'common.servicesMock', 'ui.router']);
    app.config(function($stateProvider, $locationProvider) {
        $locationProvider.hashPrefix("");

        $stateProvider
            .state('newList', {
                template: 'views/newsListView.html',
                url: '/news',
                controller: 'newsCtrl as vm',
            });

        //Delete the # in the routes
        $locationProvider.html5Mode({ 
        enabled: true,
        requireBase: false
        });
    });

}())


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Wiki</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="styles/bootstrap.min.css">

  <link rel="stylesheet" href="styles/app.css">
</head>

<body ng-app="myApp">
  <div class="container">
    <div ui-view>

    </div>
  </div>


  <!-- Libraries & Framweorks -->
  <script src="scripts/js/angular.min.js"></script>
  <script src="scripts/js/angular-mocks.js"></script>
  <script src="scripts/js/angular-resource.min.js"></script>
  <script src="scripts/js/angular-ui-router.min.js"></script>

  <script src="scripts/js/jquery-3.1.1.min.js"></script>
  <script src="scripts/js/bootstrap.min.js"></script>

  <!-- App Scripts -->
  <script src="scripts/app.js"></script>

  <!-- Controllers -->
  <script src="scripts/controllers/newsCtrl.js"></script>
  <script src="scripts/controllers/categoriesCtrl.js"></script>

  <!-- Services -->
  <script src="scripts/common/services/common.services.js"></script>
  <script src="scripts/common/services/categories/categoriesService.js"></script>
  <script src="scripts/common/services/common.servicesMock.js"></script>
  <script src="scripts/common/services/news/newsResource.js"></script>


</body>
</html>

This is the view i want to show in the browser.

<div class="row center" ng-controller="categoriesCtrl as vm">
        <button type="button" class="btn btn-default" ng-click="vm.toggleCategories()">{{vm.showCategories ? "Hide" : "Show"}} Categories</button>
        <br>
        <div ng-show="vm.showCategories" class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary active" ng-repeat="cate in vm.categories">
                <input type="radio" name="options" id="{{cate}}" autocomplete="off">{{cate}}
            </label>
        </div>
    </div>


    <div class="row">
        <div class="row">
            <fieldset>
                <legend class="title">Outstanding</legend>
            </fieldset>

            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" ng-repeat="newsItem in vm.news | filter:{important: true} | orderBy: '-date'">
                <div class="thumbnail">
                    <img ng-src='{{newsItem.banner}}' class="banner">
                    <div class="caption">
                        <span class="date">{{newsItem.date | date}}</span>
                        <h3>{{newsItem.newsTitle}}</h3>
                        <p>
                            {{newsItem.newsDesciption.substring(0,200) + "..."}}
                        </p>
                        <p>
                            <a href="#" class="btn btn-primary">Read More</a>
                            <a href="#" class="btn btn-default">Edit</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <fieldset>
                <legend class="title">Last News</legend>
            </fieldset>

            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 thumbnail-xs" ng-repeat="newsItem in vm.news | filter:{important: false} | orderBy: '-date'">
                <div class="thumbnail">
                    <img ng-src='{{newsItem.banner}}' class="banner">
                    <div class="caption">
                        <span class="date">{{newsItem.date | date}}</span>
                        <h3>{{newsItem.newsTitle}}</h3>
                        <p>
                            {{newsItem.newsDesciption.substring(0,200) + "..."}}
                        </p>
                        <p>
                            <a href="#" class="btn btn-primary">Read More</a>
                            <a href="#" class="btn btn-default">Edit</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Thanks for your time.

解决方案

Although you declared the states, you need to actually "enter" the state when you first launch it. Assuming the newList state is the state that you want to go to, you can do it in two ways:

  1. using $urlRouterProvider to route to /news at root:

    app.config(function($stateProvider, $locationProvider, $urlRouterProvider) {
  $locationProvider.hashPrefix("");

  $urlRouterProvider.when('/','/news');
  $stateProvider
    .state('newList', {
      template: 'views/newsListView.html',
      url: '/news',
      controller: 'newsCtrl as vm',
    });

  //Delete the # in the routes
  $locationProvider.html5Mode({
    enabled: true,
    requireBase: false
  });
});

  2. via .run method in angular

    app.run(['$state',function($state){
  $state.go('newList');
}])

这篇关于Angular ui.router，任何结果和任何错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆