Fatal编程技术网
  • angularjs/
  • Angularjs 为什么此代码只中断一次；app"；是否添加了ng控制器？

Angularjs 为什么此代码只中断一次；app"；是否添加了ng控制器？

angularjs

Angularjs 为什么此代码只中断一次；app"；是否添加了ng控制器？,angularjs,Angularjs,这段代码实际上是来自egghead.io的逐字逐句，但除非我从元素中删除=“app”并删除ng controller属性，否则它根本不起作用。（当然，最后一个元素在过程中会被忽略，app.js中通常包含的代码）当然，删除这些位会阻止其他任何操作或添加 <!doctype html> <html ng-app="app"> <head> <script src="http://code.angularjs.org/angular-1.0.0.m

这段代码实际上是来自egghead.io的逐字逐句，但除非我从
元素中删除
=“app”
并删除
ng controller
属性，否则它根本不起作用。（当然，最后一个
元素在过程中会被忽略，
app.js
中通常包含的代码）当然，删除这些位会阻止其他任何操作或添加

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://code.angularjs.org/angular-1.0.0.min.js"></script>
    <script src="http://code.angularjs.org/angular-ui-router-1.0.0.min.js"></script>
    <script>
      angular.module('app', ['ui.router'])
      .controller("FirstCtrl", function FirstCtrl() {
        var first = this;
        first.greeting = "First";
      });
    </script>
  </head>
  <body ng-controller="FirstCtrl as first">
    <div>
      <input type="text" ng-model="first.greeting" placeholder="First Name">
      <hr>
      <h1>{{ first.greeting }} World!</h1>
    </div>
  </body>
</html>


角度.module（'app'，['ui.router']））
.controller（“FirstCtrl”，函数FirstCtrl（）{
var first=这个；
first.greeting=“first”；
});


{{first.greeting}}世界！
给你。（这仅仅是因为JSFIDLE施加的约束使发布相同的代码变得不可能。它也有同样的问题，所以我假设这些差异对于追踪bug的来源来说是微不足道的。）

臭虫在哪里？为什么这不起作用？

对于最新的角度相关性，它对我起作用了

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
    <script>
      angular.module('app', ['ui.router'])
      .controller("FirstCtrl", function FirstCtrl() {
        var first = this;
        first.greeting = "First";
      });
    </script>
  </head>
  <body ng-controller="FirstCtrl as first">
    <div>
      <input type="text" ng-model="first.greeting" placeholder="First Name">
      <hr>
      <h1>{{ first.greeting }} World!</h1>
    </div>
  </body>
</html>


角度.module（'app'，['ui.router']））
.controller（“FirstCtrl”，函数FirstCtrl（）{
var first=这个；
first.greeting=“first”；
});


{{first.greeting}}世界！
您使用的是angular ui路由器，但不是您应该使用的方式。查看此处的链接以获得更清晰的想法。Angular UI router将其内容加载到包含
UI视图
属性的容器中。根据文件

AngularUI路由器是AngularJS的路由框架，它允许您将接口的各个部分组织到状态机中。与Angular core中的$route服务不同，它是围绕URL路由组织的，UI路由器是围绕状态组织的，状态可以选择附加路由以及其他行为

您需要在ui视图中加载不同的状态，并在流程中传递不同状态的值。您需要在应用程序配置中为
$stateProvider
和
$urlRouterProvider
添加依赖项，以实现功能完整的angular ui路由器实现。下面是告诉您需要做的事情-

并查看中的工作示例


AngularJS:UI路由器快速启动
var myapp=angular.module（'myapp'，[“ui.router”]）
myapp.config（函数（$stateProvider，$urlRouterProvider）{
//对于任何不匹配的url，请发送到/route1
$urlRouterProvider。否则（“/route1”）
$stateProvider
.state（'route1'{
url:“/route1”，
templateUrl:“route1.html”，
控制器：功能（$scope）{
$scope.greeting=“First”；
}
})
})
angular 1.0.0是一个古老的版本，它没有得到官方支持，也没有提供本例中使用的一些功能。此外，angular ui router不仅没有1.0.0版本，而且该特定库甚至不是angular团队编写的，也不会在他们的代码库中。如果您修复了脚本并使用当前版本，您应该不会有问题。更新到1.4.8不会改变任何内容。删除或更新ui路由器也没有成功。这部分是由于JSFIDLE的工作方式。在JSFIDLE中，您必须单击“JavaScript”旁边的小齿轮，并确保它设置为
NoWrap-In
，而不是默认的
onload
。我设计了一个1.4.8版本的工作提琴，删除了ui路由器，改为nowrap，可以正常工作。只是一个旁注-由于JSFIDLE如何处理脚本以及需要更改此设置，我实际上更喜欢使用angular。将angular和UI路由器依赖项更改为最新版本。 
<!DOCTYPE html>
<html ng-app="myapp">

<head>
<title>AngularJS: UI-Router Quick Start</title>
<!-- Bootstrap CSS -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="container">
<div class="row">
<div class="span12">
  <div class="well" ui-view></div>        
</div>
</div>         

<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>

<!-- App Script -->
<script>
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){

  // For any unmatched url, send to /route1
  $urlRouterProvider.otherwise("/route1")

  $stateProvider
    .state('route1', {
        url: "/route1",
        templateUrl: "route1.html",
        controller: function($scope) {
            $scope.greeting = "First";
          }
    })
 })
</script>

</body>

</html>