css - angularjs and brackets live preview: The simplest code doesn't work -
i'm newbie angularjs , i'm trying make simple thing work 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 lint warnings. use live preview of brackets opens internet explorer. encounter 3 issues:
1) {{ blah }} not translate blah blah, see {{ blah }} if js ignored. same ng-src of img. ignored , don't see image.
2) 2 buttons not colored in green expect bootstrap css. tried in jsfiddle , did see them green when tried again now, regular, not sure did wrong.
3) routing: want browse google/yahoo when navigating specific url g , y using 2 buttons. when open live preview, url is: http://127.0.0.1:58164/index.html how can route correctly? http://127.0.0.1:58164/index.html/g won't work.
i'm kinda lost here, not sure if problem code, browser of live preview though js didn't work in jsfiddle...
1) you're injecting dependencies controller incorrectly - need string each argument of function. it's easy mistake make!
app.controller('testsrc', ['$scope,$location', function ($scope, $location) { // wrong app.controller('testsrc', ['$scope', '$location', function ($scope, $location) { // right 2) you've misspelled class name in buttons. 'sucess' should 'success'.
<button class="btn btn-sucess" ng-click="goyahoo()">yahoo</button> ^^^^^^ 3) there's numerous things wrong routing:
- you haven't included ngroute module in html - hasn't been included in base angular package long time now.
- once that's done, need add dependency:
var app = angular.module("app", ["ngroute"]);, addng-viewtag html. - by default, router use 'hashbangs' url - url along lines of `http://127.0.0.1:58164/index.html#/g. if isn't acceptable you, i'd html5 mode.
all being said, don't think ngroute accomplish you're trying do. router designed route through pages of app, not external sites, trying load html domain won't work.
i'd recommend running through official angular tutorial if haven't - covers stuff quite well. i'd recommend shaping angular.js on code school, if prefer bit more hands-on.
Comments
Post a Comment