javascript - Angular.js basic routing -
i have been following tutorial:
https://thinkster.io/angular-rails#angular-routing
i have not done rails integration yet, question angular.
when hello worlds mainctrl without using router, works. when use router, cannot inline angular template display in html page. error here?
app.js:
angular.module('flappernews', ['ui.router']) .config([ '$stateprovider', '$urlrouterprovider', function($stateprovider, $urlrouterprovider) { $stateprovider .state('home', { url: '/home', templateurl: '/home.html', controller: 'mainctrl' }); $urlrouterprovider.otherwise('home'); }]) angular.module('flappernews', []) .controller('mainctrl', [ '$scope', function($scope){ $scope.test = 'hello world'; }]); index.html:
<html> <head> <title>my angular app</title> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script> <script src="app.js"></script> </head> <body ng-app="flappernews"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <ui-view></ui-view> <!-- supposed display template below shows nothing --> </div> </div> <script type="text/ng-template" id="/home.html"> <div class="page-header"> <h1>flapper news</h1> </div> </script> </body> </html>
your controller recreating module instead of referencing it. change so:
angular.module('flappernews') .controller('mainctrl', [ '$scope', function($scope){ $scope.test = 'hello world'; }]); 
Comments
Post a Comment