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 }} as if the js is ignored. same for the ng-src of the img. It is ignored and I don't see the image.

2) the 2 buttons are not colored in green as I expect it to be from the bootstrap css. I tried it in jsFiddle and did see them as green but when I tried again now, they were regular, not sure what did I do wrong.

3) Routing: I want to browse to Google/Yahoo when navigating to specific url g and y using the 2 buttons. When I open the live preview, the url is: http://127.0.0.1:58164/index.html so how can I route this correctly? http://127.0.0.1:58164/index.html/g won't work.

I'm kinda lost here, not sure if the problem is my code, the browser of the live preview though the JS didn't work also in jsFiddle...

Solution

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.