i am using in front side AngularJS and in the back Spring.
when i try to get my first or other page, scopes appear like that {{user.fName+' '+user.lName}} in a few seconds its replace with there values.
I want that scope appear directly with there values
Can you be more specific with what you meant by "my first or other page scopes "
Do you mean that initially you get curly braces with angular code - which after a few seconds changes to the actual angular values? If that is the case you need to use ng-cloak in the containing html element. Please refer to the angular JS documentation.
Related
I'm trying to show or hide a div using ng-if directive in AngularJS.
It works but it still appears in the html source code.
How can I completely remove the div from the html?
This is how I'm doing it:
<div ng-if="user != null && user != 'Error'">CONTENT</div>
Thanks!
How can I completely remove the div from the html?
AngularJS' ng-if Places a comment wrapping your element, so if ng-if evaluates to false, your element is removed but it is marked with the comment.
AngularJS runs on the client, so your template(html) will look how you code it. It evaluates and manipulates your template on the browser, unlike MVCs that you can do with ASP MVC and PHP which will construct the html on the server and send it to the client 'ready', AngularJS needs the 'raw' template, and do the manipulation in the client side. So looking in the view source will not show you how angularjs manipulated your template, you can look at it using the developer tools
How and why is <body ng-app> used? How can we assign controllers, directives etc to this nameless module. Also explain how this is related to manually bootstraping the Angular App.
Fiddle
This is actually three separate questions, but I'm happy to tackle each one.
How and why is used?
Angular will not and cannot properly bootstrap the application unless there is an entrance point to that application. According to the documentation, if a parameter is not passed that names the app instance, angular will attempt to auto-bootstrap the application for you by crawling the DOM and using the first ngApp directive instance that it is encountered.
We typically want to place our entrance point on the <body> element to encompass all the potential DOM we need without cluttering it with <head> elements, such as loading scripts and css. That said, if you are auto-bootstrapping your application, the recommended placement is on the HTML element.
How can we assign controllers, directives etc to this nameless module?
Modules, controllers, etc MUST be attached to something in order for Angular to pick them up and interopt with them correctly.
Once the application is bootstrapped, Angular will begin parsing the DOM, looking for directives. If you have an application instance (and you do), your controllers will be automatically be added to that instance. If you look at the bootstrap documentation -> Automatic Initialization, you'll find the following:
Angular initializes automatically upon DOMContentLoaded event or when
the angular.js script is evaluated if at that time document.readyState
is set to 'complete'. At this point Angular looks for the ng-app
directive which designates your application root. If the ng-app
directive is found then Angular will:
load the module associated with the directive.
create the application
injector compile the DOM treating the ng-app directive as the root of
the compilation. This allows you to tell it to treat only a portion of
the DOM as an Angular application.
How the heck is the fiddle working?
This one is actually smoke and mirrors that really shouldn't count :). If you look at the network traffic for JSFiddle, you'll find that AngularJS is actually being loaded. As a result, your interpolation is actually getting automagically bound to the JSFiddle Angular instance, not one that you provide yourself (or in this case didn't), parsed, and subsequently rendered into the DOM as 2.
Per angularjs.org:
"The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the or tags."
In other words, ng-app is what makes your html become an Angular application, thus being able to use the {{ }} in your code. These brackets are able to carry out operations, which is why you're able to calcuate 1 + 1. If you were to use variables, however, you would need to attach an ng-controller to a container div and initialize a Controller.
It's the equivalent of ng-app="". However, you need a namespace to attach controllers, directives. etc too. Angular can interpolate {{ 1 + 1 }} without a namespace, but you won't be able to bind anything to the views scope. Interestingly enough ng-app=" " is a namespace you can bind to.
https://jsfiddle.net/n3hygcnd/3/
Using jQuery, it's easy to replace the innerHtml of a single div, either with content from the elsewhere in the HTML, from a JavaScript var, or from an HTTP call.
How can I do that in AngularJS (without using jQuery)? For example, to keep a page the same, but only replace a side panel?
Try using ng-view / ui-router . More details :
https://docs.angularjs.org/api/ngRoute/directive/ngView
angular-ui/ui-router, how do I inject partial view using $stateProvider?
It seems the answer is: "Think twice if you need to do this." In Angular, the paradigm isn't to modify the HTML, but rather to bind the HTML. So, bind the div's src to a scope or controller var via ngInclude, and just change that var.
I have jsonData which consist of HTML content. I want to render that HTML in ng-grid. The content is not rendered however -- it only shows up in normal string format.
Below is the plnkr which shows all the code:
http://plnkr.co/edit/RlWyDqCUUR15dmLM7ePV?p=preview
There's a few things going on here:
Not related to your exact issue, but you've got nested single quotes in your firstName field. You need to do some escaping or your ng-click expression is going to break. So instead of ng-click='show('F:/cox/main.html')' you can do ng-click=\"show('F:/cox/main.html')\".
Also not related to your exact issue, but if you want to access properties on your controller's scope from inside UI-Grid you need to use appScope. The docs on it are here: http://ui-grid.info/docs/#/tutorial/305_appScope
The main problem with getting HTML provided from inside your app to render is Strict Contextual Escaping.
Strict Contextual Escaping (SCE) is enabled by default in Angular and escapes any arbitrary HTML to prevent things like XSS and clickjacking. In order to get your HTML to show up you need to trust it, and bind it with an HTML bind expression.
You can use the $sce service to trust the HTML. Just iterate over your rows and do $sce.trustAsHtml(row.firstName). (You can read more about SCE here: https://docs.angularjs.org/api/ng/service/$sce) Then you will need a custom cell template to bind the HTML. The simplest one looks like this:
<div class="ui-grid-cell-contents" ng-bind-html="COL_FIELD"></div>
COL_FIELD will get transformed by UI-Grid into the proper binding for your field. Now the problem is that your ng-click directive doesn't get compiled. You need to use a directive that will take your custom HTML and compile it. You could roll your own, or use something like this library to do it for you: https://github.com/incuna/angular-bind-html-compile
The main thing to keep in mind is being able to actually trust the source of your HTML. If you can't be sure then going about this another way (i.e. by not providing HTML inside your data set) would be better.
I've modified your plunker to show all this working together: http://plnkr.co/edit/MgLoeGBoRTi2fF3e6pia?p=preview
i'm beginning angular developer and i have application with some controllers.
Is it possible to find out what is the Name the controller of some html if there is no "ng-controller" statement?
Like in case this is custom directive or the html loaded by ui-router?
p.s. i know about batarang but i dont see the name of the controller, only the scope
Thanks
If you can get hold of the DOM element you are interested in, you can run in the console:
angular.element(...).controller().constructor
This will print the constructor function (i.e. the function you have registered as controller) in the console; clicking on it (at least on Firebug) gets you to the source.
.controller() is an addon to the jQuery API from Angular. To get hold of the element in interest, the simplest thing is document.getElementById(). You can even use Firebug (or equivalent) to place an id in that element and then use getElementById().
Also for Firefox/Firebug let me propose the excellent angscope plugin.