角UI的路由器非常简单的例子是不工作？请参阅plunker满code

本文介绍了角UI的路由器非常简单的例子是不工作？请参阅plunker满code的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

角UI的路由器不能正常工作？请参阅我的code在。

我试图运行角度JS一个非常基本的路由例子。但 welcomeView.html 没有出现在页面上。

 （函数（）{
  使用严格
  VAR应用= angular.module（plunker，[ui.router]）;  的app.config（[$ stateProvider，$ urlRouterProvider
    功能（$ stateProvider，$ urlRouterProvider）{
      $ urlRouterProvider.otherwise（/）;
      $ stateProvider
        .STATE（家，{
          网址：/，
          templateUrl：welcomeView.html
        }）
    }
  ]）;
}（））;

解决方案

有

首先，我们需要添加引用 app.js 与我们的模块

 ＆LT; HEAD＆GT;
  ...
  ＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT; // 失踪
  ＆所述; SCRIPT SRC =的script.js＆GT;＆下; /脚本＆GT;
 ＆LT; /头＆GT;

此外，我们不应该使用 NG-控制器，我们不需要与 UI-路由器

  //＆LT;机身NG控制器=MainCtrl＆GT;
＆LT;身体GT;

在 app.js 在另一方面，应该包含控制器：...

  $ stateProvider
    .STATE（家，{
      网址：/，
      templateUrl：welcomeView.html
      //这里声明它
      控制器：MainCtrl
    }）

然后，在 的script.js ，我们不能重新定义模块plunker的（使用setter）的 - 我们有只取它的（使用getter）的

  //这将重新定义app.js东西
// VAR应用= angular.module（'plunker'，[]）;
//只是一个getter来获取模块
VAR应用= angular.module（'plunker'）;app.controller（'MainCtrl'，函数（$范围）{
  $ scope.name ='世界';}）;

检查这里所有行动

Angular UI-Router is not working? Please see my code on plunker.

I am trying to run a very basic routing example in angular js. But welcomeView.html is not appearing on the page.

(function() {
  "use strict"
  var app = angular.module("plunker", ["ui.router"]);

  app.config(["$stateProvider", "$urlRouterProvider",
    function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise("/");
      $stateProvider
        .state("home", {
          url: "/",
          templateUrl: "welcomeView.html"
        })
    }
  ]);
}());

解决方案

There is updated and working version

Firstly we need to add reference to app.js with our module

<head>
  ...
  <script src="app.js"></script> // was missing
  <script src="script.js"></script>
 </head>

Also, we should not use ng-controller, we do not need is with UI-Router

//<body ng-controller="MainCtrl">
<body>

The app.js on the other hand, should contain controller : "..."

  $stateProvider
    .state("home", {
      url: "/",
      templateUrl: "welcomeView.html",
      // declare it here
      controller: "MainCtrl",
    })

Then, in script.js, we cannot redefine the module plunker (using setter) - we have to just take it (using getter)

// this would redefine the app.js stuff
//var app = angular.module('plunker', []);
// just a getter to get that module
var app = angular.module('plunker');

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

});

check that all in action here

这篇关于角UI的路由器非常简单的例子是不工作？请参阅plunker满code的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！