I am trying to work out how some code is working, it uses angular throughout the front end.
When the page first loads a div with ng-include should be in the dom but its src url is a call to a js function that returns undefined on page load.
<div id="test_div" ng-include="getUrl()"></div>
When I check the dom the entire element is not on the page. After a search button is pressed some other calls happen and the call to getUrl() will return a valid url from that point on, which returns html content from the server.
It is only then that the div appears in the dom and it now has a class added to it of class="ng-scope".
I dont understand how this is happening, does ng-include continue to request a resource until it is avilable?
I couldnt find this information in the documentation.
Related
I have a index.html page with page-header, navigation-bar, page-body sections (DIVs).
I use angular routing for change the content of the page-body section.
Now what I want to implement is to change the the content of the navigation-bar and page-body at same time, from a controller.
My scenario is:
Login content is displayed in the page-body section. After the successful login request I want to switch two contents somehow at same time:
the menu which locates between the navigation-bar div element
the application body content, locates in page-body div element
If you are using ng-route, you should take a look at UI Router. It allows you to define multiple views in your page.
I'm facing an interesting issue here.
I'm developing a Chrome Extension with a content script.
This extension is intended to add a little div to a page, this div using AngularJS. (I chose Angular because I want this div's data to be readily updated by change of var values).
I'm able to add the div once and bootstrap it. So the behavior of the div is fine.
But the main page (which I have no control over) often reloads everything using Ajax. (Then I'm totally unable - I think - to get events from certain elements being removed).
I was able to create ways to check if my elements are still on the page, and if not, they are added again. The appendChildPersistent method takes care of it. (It waits for a certain element to appear on the main page. Adds my element to it. Runs the callback when added. Keep checking if the element is still there, if not, repeat all over).
So all my ordinary elements work perfectly.
But this angular div cannot be bootstraped a second time.
Procedures:
I wait until a certain element appear on the main page
I add my own div myDiv from a plain text html using jquery append to the main page div
I load the angular application and bootstrap it using the callback function when the div is added:
Code:
var txt = '<div id="myDivId" ng-controller="myController">{{testing}}</div>';
appendChildPersistent('myDivId', MyDiv, '#theTargetMainPageDiv', function()
{
var app = angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.testing = 'Welcome!';
});
angular.bootstrap(document, ['myApp']);
});
So, the first time my div is added, it works. The angular vars and directives work (in this example, the div shows "Welcome!"). But the second time, I get an "already bootstrapped" error. (But if I do not try to bootstrap again, the div becomes just plain text, no angular behavior, showing "{{testing}}" instead of "Welcome!").
Is there a way to unboostrap, redo bootstrap or another method I could work to get around this?
Your application only focuses on the div you insert. You can make an Angular application run on a certain area of the page instead of covering the whole document. Simply pass the DOM element to the bootstrap function:
angular.bootstrap(myDiv, ['myApp']);
This way Angular only runs in your div and you are able to bootstrap the app every time you add a new div.
On the first hit to a page I want to send a fully rendered page back to the user. This works fine if javascript is disabled, but if javascript is enabled then angular-ui-router looks up the state and renders into ui-view on top of the existing content. Is there a way to disable this on the first page load somehow?
See this issue: https://github.com/angular-ui/ui-router/issues/1807 which suggests using $urlRouterProvider.deferIntercept(), but I can't find much documentation about using it and not sure how to intercept the first page load.
There's two parts: firstly you need to disable the router from kicking in on the first page load. This can be done like so:
app.config(function($httpProvider, $urlRouterProvider) {
// On the first page load disable ui-router so that
// our server rendered page is not reloaded based on the window location.
$urlRouterProvider.deferIntercept();
});
Secondly we need to set up the ui-view correctly: Dumping the server-rendered markup inside the ui-view causes issues weird behaviour with the first controller being run twice (see https://github.com/angular-ui/ui-router/issues/1807), so we'll add our server rendered markup just after the ui-view div and hide the ui-view until there's a navigation event.
<div ng-controller="PropertyDetailCtrl">
<div class="ng-cloak" ng-show="!isFirstPageLoad" ui-view></div>
<div ng-show="isFirstPageLoad">
(server rendered markup goes here)
</div>
</div>
Now we need to set isFirstPageLoad in the $scope:
app.controller('PropertyDetailCtrl', function loader($rootScope, $scope) {
$scope.isFirstPageLoad = true;
$rootScope.$on('$viewContentLoading', function(event, viewConfig) {
$scope.isFirstPageLoad = false;
});
});
We've used ng-cloak to make sure that the page behaves perfectly if javascript is disabled, so now we've got a fully server side rendered first page load with all subsequent navigation handled by ui-router.
I am adding images to divs with ng-repeat which works fine. The image location data is nested in an array. The images show up as expected. My partial looks like:
<div class="image-wrapper">
<img src={{item.user.img_src}}>
</div>
However, it appears the page is to attempting to retrieve the string before AngularJS is loaded. I get the following console warning:
GET http://localhost:3000/%7B%7Bitem.user.img_src%7D%7D 404 (Not Found)
How do I prevent this?
The src attribute is buggy when Angular markup is used. Use ngSrc instead of src.
Thus, <img ng-src="{{item.user.img_src}}">
When the browser first loads the page it sees your src exactly as you wrote it. It's not until Angular loads and processes the page that it updates your dynamic source. Neither of these is what you want to have happen (especially since you could accidentally create the bad empty src attribute). Instead, use ngSrc directive so that no src will be set until Angular has evaluated your expression:
http://docs.angularjs.org/api/ng/directive/ngSrc
I'm using Angular UI router in my app. This is what I'm doing.
A main view contains a child view and a div container for "pagination"
By default, initially, a first set of contents is loaded
When a user clicks on "next page", next set of contents is loaded (with the URL also being changed to /content/2 (where 2 indicates the next page number)
All is working well, but each time the contents are loaded, it goes "blank" before it loads. So it seems like it's reloading the view (which is obvious).
What I would like to do is reload the content without having that "blank" page. How can I achieve this?
At first thought, I think you could you the same approach as infinite-scroll, which is what I'm using. So you make a GET request to the server to get new content and push it to the list on clicking 'next'. However, since the URL changes also. This will cause the controller to be reloaded. You can actually bypass this by setting reloadOnSearch to false.