Hello, I am new to AngularJS and I am struggling to get a simple thing to work properly.
Below is the 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>
And here is the 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'
});
});
I have made sure that my code passes all lint warnings. However, when I use live preview in brackets to open Internet Explorer, I encounter a few issues:
1) The expressions like {{ blah }} are not being translated into actual text and the image specified in ng-src is not displayed on the page.
2) The buttons should be colored green based on the Bootstrap CSS, but they appear as regular buttons. This was working fine in jsFiddle before but now it's not.
3) When trying to navigate to Google or Yahoo by clicking the buttons, the routing does not seem to work correctly. The URL shown in the preview is and adding /g or /y doesn't take me to the desired pages.
I'm feeling quite lost with these issues. I'm not sure if the problem lies in my code, the browser used for live preview, or some other factor. Even testing in jsFiddle did not yield the expected results...