Amos February 2016

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

I'm a newbie to angularJS and I'm trying to make the simple thing to work but I fail.

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'
  });
});    

The code has passed all lint warnings. I use the live preview of brackets that opens up Internet explorer. I encounter 3 issues:

1) {{ blah }} does not translate into blah blah, I see {{ blah }} a

Answers


Joe Clay February 2016

1) You're injecting the dependencies into your controller incorrectly - you need a string for each argument of the function. It's an easy mistake to make!

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

2) You've misspelled the class name in your buttons. 'sucess' should be 'success'.

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

3) There's numerous things wrong with your routing:

  • You haven't included the ngRoute module in your HTML - it hasn't been included in the base Angular package for a long time now.
  • Once that's done, you need to add it as a dependency: var app = angular.module("app", ["ngRoute"]); and add an ng-view tag to your HTML.
  • By default, the router will use 'hashbangs' for the URL - so the URL would be something along the lines of `http://127.0.0.1:58164/index.html#/g. If this isn't acceptable for you, I'd look into HTML5 mode.

All that being said, I don't think ngRoute will help you accomplish what you're trying to do. The router is designed to route through the pages of your app, not to external sites, so trying to load HTML from another domain probably won't work.

I'd recommend running through the 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, if you would prefer something a bit more hands-on.

Post Status

Asked in February 2016
Viewed 2,077 times
Voted 14
Answered 1 times

Search




Leave an answer