angularjs 和括号实时预览：最简单的代码不起作用

Question

我是 angularJS 的新手，我正在尝试让简单的东西发挥作用，但我失败了。

HTML:

<!DOCTYPE html>
<html>
  <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
        <script src="main.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="main.css">
  </head>
  <body ng-app="app" ng-strict-di>
    <div class="test" ng-controller="testSrc">
      <p> {{ blah }} </p>
      <img ng-src="{{ URLImage }}"/>
      <button class="btn btn-sucess" ng-click="goYahoo()">Yahoo</button>
      <button class="btn btn-sucess" ng-click="goGoogle()">Google</button>      
    </div>
  </body>
</html>

JS:

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

app.controller('testSrc', ['$scope,$location', function ($scope, $location) {
  "use strict";
  $scope.blah = "blah blah";
  $scope.URLImage = 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png';

  $scope.goGoogle = function () { $location.url('localhost:58164/g'); };
  $scope.goYahoo = function () { $location.url('localhost:58164/y'); };
}]);

app.config(function ($routeProvider) {
  "use strict";
  $routeProvider
  .when('/', {
    templateUrl : 'index.html'
  })
  .when('/g', {
    templateUrl : 'http://www.google.com'
  })
  .when('/y', {
    templateUrl : 'http://www.yahoo.com'
  });
});

代码已通过所有 lint 警告。我使用打开 Internet Explorer 的括号实时预览。我遇到 3 个问题：

1) {{ blah }} 没有翻译成 blah blah，我看到 {{ blah }} 好像 js 被忽略了。 img 的 ng-src 也是如此。它被忽略了，我看不到图像。

2) 这 2 个按钮没有像我期望的那样是绿色的 bootstrap css。我在 jsFiddle 中尝试过，确实看到它们是绿色的，但是当我现在再次尝试时，它们是正常的，不知道我做错了什么。

3) 路由：我想在使用 2 个按钮导航到特定 url g 和 y 时浏览到 Google/Yahoo。当我打开实时预览时，url 是：http://127.0.0.1:58164/index.html so how can I route this correctly? http://127.0.0.1:58164/index.html/g 不起作用。

我有点迷路了，不确定问题是否出在我的代码、实时预览的浏览器上，尽管 JS 在 jsFiddle 中也不起作用...

Answer 1

1) 您错误地将依赖项注入控制器 - 您需要为函数的每个参数提供一个字符串。这是一个容易犯的错误！

app.controller('testSrc', ['$scope,$location', function ($scope, $location) { // Wrong
app.controller('testSrc', ['$scope', '$location', function ($scope, $location) { // Right

2) 您在按钮中拼错了 class 名称。 'sucess' 应该是 'success'.

 <button class="btn btn-sucess" ng-click="goYahoo()">Yahoo</button>
                        ^^^^^^

3) 您的路由有很多问题：

您还没有在 HTML 中包含 ngRoute 模块 - 它已经很长时间没有包含在基础 Angular 包中了。
完成后，您需要将其添加为依赖项：var app = angular.module("app", ["ngRoute"]); 并将 ng-view 标记添加到您的 HTML.
默认情况下，路由器将使用 'hashbangs' 作为 URL - 因此 URL 类似于 `http://127.0.0.1:58164/index.html#/g. If this isn't acceptable for you, I'd look into HTML5 mode.

综上所述，我认为 ngRoute 不会帮助您完成您想要做的事情。该路由器旨在通过您的应用程序页面进行路由，而不是到外部站点，因此尝试从另一个域加载 HTML 可能行不通。

如果您更喜欢一些动手操作的东西，我会通过 official Angular tutorial if you haven't already - it covers all this stuff quite well. I'd also recommend Shaping Up With Angular.js on Code School 推荐运行。

angularjs 和括号实时预览：最简单的代码不起作用

angularjs and brackets live preview: The simplest code doesn't work

css

angularjs

angularjs-routing