javascript - Load a ui-router state when website first loads -
js creating 2 layout , content page is:
$urlrouterprovider.otherwise("/site/movies"); $stateprovider .state('admin', { url: "/admin", templateurl: "/views/admin.html" }) .state('site', { url: "/site", templateurl: "/views/site.html" }) .state('site.movies', { url: "/site/movies", templateurl: "/views/site/movies.html", controller: 'moviescontroller' })
index.html is:
<!doctype html> <html ng-app="moviesapp"> <head></head> <body ng-cloak> <!--<div class="container-fluid"> <ng-view></ng-view> </div>--> <div ui-view></div> <a ui-sref="site.movies">state 1</a> </body> </html>
that removed script references. site.html is:
<header id="siteheader">header</header> <div ui-view></div> <footer id="sitefooter">footer</footer>
and movies.html
<div> <h1>list movies</h1> <button ng-click="getmovies()">get movies</button> <span>{{error}}</span> <table class="table table-bordered table-striped"> <thead> <tr> <th></th> <th>title</th> <th>director</th> </tr> </thead> <tbody> <tr ng-repeat="movie in movies"> <td> <a href="/movies/edit/{{movie.id}}" class="btn btn-default btn-xs">edit</a> <a href="/movies/delete/{{movie.id}}" class="btn btn-danger btn-xs">delete</a> </td> <td>{{movie.title}}</td> <td>{{movie.director}}</td> </tr> </tbody> </table> <p> <a href="/movies/add" class="btn btn-primary">add new movie</a> </p> </div>
my problem when click link sref="site.movies" appears , not on page load, how make movies.html , layout load site runs first. when type /site/movies in address bar movies.html not load.
i found solution in nested state url:
.state('site.movies', { url: "/site/movies", templateurl: "/views/site/movies.html", controller: 'moviescontroller' })
should be:
.state('site.movies', { url: "/movies", templateurl: "/views/site/movies.html", controller: 'moviescontroller' })
Comments
Post a Comment