seo - Is there a way to make AngularJS work with HTML-first? -


is there way have html-view pre-populated values server, , angularjs read values it's $scope?

i'm thinking of scenario html this:

<div ng-controller="testcontroller">     <div ng-bind="title">test title</div>     <div ng-bind="itemcount">33</div>     <div ng-repeat="item in items">         <div ng-bind="item.title">item 1 title</div>     </div> </div> <button ng-click="update()">update</button> 

and javascript this:

function testcontroller($scope) {     $scope.update = function() {         console.log($scope.title); // should log "test title"     }; } 

the thought behind let server render html search engines can index, have javascript-model-representation of content manipulation through js.

while ng-init 1 solution, requires explicitly set value. here alternative solution.

http://plnkr.co/edit/pq8yr9zvohfi6iru3pvn?p=preview

note : solution wont work ng-repeat. control flow directives cant used this. simple extraction of information ng-bind works pretty well. need add default directive ( code in plunk ) wherever doing bind , extract text content , push scope variable.

edit (solution ng-repeat):

so, thinking of way make ng-repeat work same way. getting ng-repeat work isnt easy job ( see code proof :p ). have found solution - here go :

http://plnkr.co/edit/gewhcnvmenvaq9ja2xm2?p=preview

there couple of things need know before use this. hasnt been thoroughly tested. works repeating on arrays ( not objects ). there cases have not been covered. overriding ngrepeat have other consequences. when loop through items ( in server side code ) dont forget add default="true" on first element , default on rest of elements.

hope helps.


Comments

Popular posts from this blog

monitor web browser programmatically in Android? -

Shrink a YouTube video to responsive width -

wpf - PdfWriter.GetInstance throws System.NullReferenceException -