I'm implementing something where the view changes based on the selected value of a select dropdown. I'm doing this using ng-include="mySelectedValue", which is attached to <select ng-model="mySelectedValue" ng-options="..."></select> tags.
Just wondering what happens under the hood, because this is essentially a SPA with no routes that is being loaded inside one of my Rails apps.
When the app gets loaded, does it just load all the views in the browser somehow? I don't get how angular works so magically. Would love to know how views are popping up when there are no server calls.
I assume mySelectedValue is a src.
According to Angular Docs:
By default, the template URL is restricted to the same domain and
protocol as the application document. This is done by calling
$sce.getTrustedResourceUrl on it.
$sce.getTrustedResourceUrl is basically an ajax request to fetch the corresponding template. So your server call is here :)
After that, there goes the $compile for the template, and renders the view.
Related
I have a basic angular page, it pulls some records from a database and displays in a table via ng-repeat - this is working fine as a standalone page.
I'm using bootstrap remote tabs https://github.com/thecodeassassin/bootstrap-remote-data and am calling the above page as one of the tabs' content. The angular page is loaded but angular is not initialising though for some reason. Nothing is binding.
I've tried putting the angular scripts both inside / outside of the tab, and also putting ngApp inside of the tab (remote page) and outside of the tab (parent page) and it doesn't make any difference. Is there something I'm missing?
I am not sure what you are trying to do, but I think the problem is that the angular finishes the loop for initializing the content before the pages are loaded inside the tabs.
have you tried to use ng-include to load the content of the tabs dynamically.
also you may need to call for angular apply to re initiate the binding.
another note, if you are trying to use the tabs to load the data asynchronously, you can use regular tabs and let angular handles the loading of the data using ng-include.
When talking about AngularJS, what exactly is the view? Or can it be more than one thing?
View is what the user sees (the DOM).
Normal HTML in Angular is called template. When Angular starts your
application, it parses and processes the markup from the template
using the compiler. The loaded, transformed and rendered DOM is then
called the view.
Have a look at the following image:
Source: https://docs.angularjs.org/guide/concepts#view
All your HTML pages are the view. JS files are usually controllers or services.
HTML is the user interface (the view) and JavaScript is the engine of the application, consists mainly of controllers and services (see Angular's service as a model).
So, the view is all the user could see.
I have developed one sample page using angular js.
Just i add comments in textbox and submit, I will add the values in scope variable and display the content in same page using ng repeater, It's working fine but if i open the same page in another window, the old results only displayed,Current scope variable not updated any idea?
You cannot retain the scope of your Angular application in another window. The scope is tied only to the window in which the ngApp is initialized.
In order to overcome this, you can use the LocalStorage of your browser.
EDIT: Please refer this
But in your case, you will have to use a DB or such which will need a backend server too. The MEAN stack is a very nice stack to work on with Angular as the front with Expressjs to connect with Nodejs as the backend along with MongoDB
From what I've read, Angular doesn't support multiple views out of the box for URL changes.
What I really want is to have a set of controllers in charge of different parts of the application UI, that each respond in their own way to route changes.
Is there a common solution for this, or am I thinking about the application structure in the wrong way?
The ui-router plugin doesn't appear (to me) to solve this particular problem in the way I'd like - it's a state-first approach with optional URL changes, as opposed to URL-first.
Angular actually does support multiple views out of the box, what it doesn't support is multiple ng-view out of the box. You can use ng-include and place a controller on that element and watch for any route changes you need.
Essentially you'd do something like this:
<ng-include src='"menu.html"' ng-controller='MenuCtrl'></ng-include>
<div ng-view></div>
The ng-include's controller you would be watching for route changing and doing whatever is needed.
The ng-view of course is driven by the route changes setup in your app config.
I am absolutely novice to angular.js and i have some confusion, is it compulsory to define ngRoute on the angular module, as far as i think that it is require to include if we want to change the view on the basis of URl change.
Or is it also possible to define the route and return the view manually by calling some controller and on button click and it will return a view that i can use in the my index page.
You can create a app without using ngRoute. In that case you do not use the nv-view directive in html and the app does not respond to url change.
Also in that case if you want to change any part of the site, you use ng-include which takes parameter as the view name on server and it can be dynamically changed based on some logic.
Said that, you should use the view segregation and loading based on route as it makes your application a truly single page app, where views are update without any page refresh and each of the individual views can be bookmarked.