$rootScope 未在简单的 AngularJs 路由示例中呈现

Question

我正在尝试通过 $scope 和 $rootScope 访问姓名和年龄，但即使我觉得我做的都是正确的，也会出现错误。有人可以帮我找出错误在哪里吗？

<html>

<head> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.min.js"></script> 

</head> 

<body ng-app="myApp" ng-controller="myCtrl"> 

    <a href="#/one">One</a><a href="#/two">Two</a>

    <ng-view></ng-view>

    <script> 
    //app declaration
    var app = angular.module("myApp",['ngRoute']);

    //routing
    app.config(['$routeProvider',function($routeProvider){
        $routeProvider
        .when('/one',{templateUrl:'one.html'})
        .when('/two',{templateUrl:'two.html'})
        .otherwise({templateUrl:'one.html'});
    }]);

    //config 
    app.run(['rootScope', function($rootScope){
        $rootScope.age = 25;
    }]);

    //controller
    app.controller('myCtrl',function($scope, $rootScope){
        $scope.name = "Peter";
    });
    </script> 

</body> 

</html>

one.html

ONE => {{name}},{{age}}

two.html

TWO => {{name}},{{age}}

更新错误：

Answer 1

您应该将 ngRoute 作为依赖项注入模块

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

Answer 2

你可以在docs中看到第一个参数应该是一个函数

run(function(injectables) { // instance-injector
  // This is an example of a run block.
  // You can have as many of these as you want.
  // You can only inject instances (not Providers)
  // into run blocks
});

但是在你的代码中

app.run('rootScope',function($rootScope,$state){

第一个参数是 string 而不是函数。

所以，只需删除它，或者如果你想在数组中使用可注入语法包装

app.run(['$rootScope','$state',function($rootScope,$state){...}]}

但您似乎还有另一个错误：使用 $state 提供程序，但此提供程序不是 ngRoute 模块的一部分，而是 的一部分ui-路由器。无论如何，当运行块执行时，当前路由可以不被定义。

没有多余的工作样本

//app declaration
var app = angular.module("myApp", ['ngRoute']);

//routing
app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/one', {
      template: '<div>one: {{name}} | {{age}}</div>'
    })
    .when('/two', {
      template: 'two: {{name}} | {{age}}'
    })
    .otherwise({
      redirectTo: '/one'
    });
}]);

//config 
app.run(function($rootScope) {
  $rootScope.age = 25;
});

//controller
app.controller('myCtrl', function($scope, $rootScope) {
  $scope.name = "Peter";
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <ng-view></ng-view>
</div>

Answer 3

代码中，angular().运行()注入了$rootScope和$state.

app.run('rootScope',function($rootScope,$state){
    if($state.current.name == 'one'){$rootScope.age = 25;}
    if($state.current.name == 'two'){$rootScope.age = 30;}
});

因为 $state 不是 ngRoute 模块的一部分，所以你不能注入它。

Answer 4

错字，

 app.run(['rootScope', function($rootScope){
    $rootScope.age = 25;
}]);

应该是

 app.run(['$rootScope', function($rootScope){
    $rootScope.age = 25;
}]);

$rootScope 未在简单的 AngularJs 路由示例中呈现

$rootScope not rendered in a simple AngularJs Routing Example

javascript

angularjs

rootscope