【问题标题】:AngularJs - ng-view does not workAngularJs - ng-view 不起作用
【发布时间】:2017-09-30 09:16:30
【问题描述】:

ng-view 指令不起作用。我看到的只是“页面”标题。有什么问题?

https://jsfiddle.net/dsgfdyp1/3/

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
  <script type="text/javascript" src="./scripts/app.js"></script>

<div ng-view>  </div>

var myApp = angular.module('myApp', ['ngRoute']);

app.config('routeProvider', function($routeProvider) {

$routeProvider
.when("/", {templateUrl : "/home"});

});

【问题讨论】:

  • 请输入一个最小的工作代码。您可以包含一个 jsFiddle 链接。
  • app 未定义,我认为应该是myApp
  • 是的,我没注意到。但它并没有解决问题jsfiddle.net/r30tdmqk/2
  • app.config('routeProvider', function($routeProvider) { ==> app.config(['$routeProvider', function($routeProvider) { AND }); ==> }]);(当你关闭config阶段声明时)jsfiddle.net/dsgfdyp1/5

标签: javascript html angularjs ng-view


【解决方案1】:

myApp.config('routeProvider', function($routeProvider) 中删除routeProvider

如下图

var myApp = angular.module("myApp", ["ngRoute"]);

myApp.config(function($routeProvider) {
    $routeProvider
    .when("/", {templateUrl : "/templates/main.htm"});
  });

基于$inject的解决方案

myApp.config(routerConfig);

routerConfig.$inject =["$routeProvider"];

function routerConfig($routeProvider){
        $routeProvider
        .when("/", {templateUrl : "/templates/main.htm"});
      }

【讨论】:

  • 为什么要删除它?所以他们将无法缩小他们的代码?这不是一个好的解决方案(虽然它会起作用,但这就是我不反对它的原因)
  • 如果你关心缩小,我不认为在这种情况下(我的错)。我将使用 $inject 重写代码;
  • 请注意,他们也可以像这样修复它:jsfiddle.net/dsgfdyp1/5(当你解决缩小部分时,我会投票赞成,因为从代码中可以清楚地看到 OP 正在考虑这一点- 未能正确使用要注入相关范围的依赖项列表)
  • 我都试过了,删除第一个参数并添加方括号,都没有工作。
  • @AntonKuznetsov 我添加了一个指向对我有用的小提琴的链接,这不仅是数组的错误使用,而且还注入了routeProvider而不是$routeProvider(请注意缺少的$)。但是,如果它解决了您的问题,您应该尝试并接受它,因为它应该工作
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2019-01-06
  • 2018-06-16
  • 2015-09-04
  • 2016-02-03
  • 2014-09-29
  • 1970-01-01
  • 2014-08-20
相关资源
最近更新 更多