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.
Related
I am working with a serverless HTML so JavaScript cannot load other html content. I was wondering if there is an example of pulling the template from the DOM so that I can pack all my views into a single HTML file (i.e. without having to use string templates).
Would this work?
I am working with AngularJS 1.7.5 rather than the newer Angular 2.
I need it to work with Outlook/IE.
I was thinking of just getting the .InnerHTML of some base element. Advice, notes, concerns?
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.
I saw in many websites like twitter.com when you navigate between views by clicking navigation bar menus, then views loaded only one time and the loading spinner appear only for the first time the view has been loaded. If you back to the view again,it loaded directly and the loading spinner does not appear again.
I wonder, how can i do something like that using AngularJS ?. I need any tutorials to help me doing this or put me on the road.
This is already a core part of angular. Have a read of the $templateCache documentation. Here is a simple excerpt:
The first time a template is used, it is loaded in the template cache for quick retrieval. You can load templates directly into the cache in a script tag, or by consuming the $templateCache service directly.
So when using something like ng-include to grab a remote template via a file, it will only be loaded once, and automatically placed into this cache and reused when necessary.
If instead you are wondering how you go about only reloading part of the page, then you need to look at ng-view (which is part of the basic route module), or ui-router for more complex hierarchical view layouts.
Hi I am new to AngularJS. I have great web app already running with JQuery and jQuery UI.
Now I want to completely get rid of JQuery and am going to migrate to Angularjs because of its MVC (MVW) pattern.
So my jQuery application is running with EJS for templates and entirely DOM manipulation. But when I think about Angular js, I have doubts. Can I still use EJS or not?
So please guide me whether I can use or not.
Another doubt is, let's assume I have list page. It is updated dynamically, and it will display 10 records first then based on user scroll, the next 10 records will be appended in the DOM after AJAX. Can we append to the DOM dynamically using Angular?
How do I achieve these kind of things in Angular?
You can use EJS (server or client side) in combination with Angular but there's no need and you'll probably overcomplicate things. AngularJS is very capable for manipulating the DOM by itself in a very separation of concerns kind of way. The most elegant way to work with Angular is to have a RESTful backend and just serve some static html/js files from a webserver.
As for endless scrolling, there are tons of ready to use plugins (modules) to choose from or you can write your own. Basically this will need a view with a ng-repeat directive to display the currently loaded items and a directive that will notify a controller/scope to load more items when the user is scrolling down.
A nice simple article can be found here.
Similar questions:
Mixing angular and asp.net mvc webapi
Actual use of jade template and angularjs
Yes of course you can use EJS with Angular JS. You might want to have a look at this;
https://gist.github.com/jrmoran/4277025
And about your DOM manipulation question. Yes you can append DOM dynamically using Angular JS. Angular JS have a strong feature of two way data binding which dynamically updates its DOM content when a model variable changes.
Have a look at this:
http://docs.angularjs.org/guide/databinding
First of all i am confuse for my project whether it can use angular.js or not, although i have started using it and i created some customization module with this but when i started applying it for all project i got stuck on many things.
My project is a order taking project and it has structure like this.
In the index page it has 3 panels.
left panle that draws all categories
middle panel that draws all category specific productes
and right panel that draws all the basket items with calculations.
On product click there also appears a model that draws all the customization.
I am using MVC-4.
Every thing on index that includes some layout is a partial view _leftpanl, _middlePnl, _rightPnl, _customziaion.
My concern is.
If i define the routes to the module i created how to fix on ng-view because per scope there will be one ng-view only. and my application load atleast 3 partial views to index page at the same time. So how would i fix on ng-view.
Just gimme some guide lines that i should follow to create this kind of application with angular.js.
Or it is not possible with angular because i think it is not a single page application.
Use the Angular-Breeze SPA template provided by the ASP.Net team http://www.asp.net/single-page-application/overview/templates/breezeangular-template
Don't mix up the Razor view/partials with Angular. Use ASP.Net MVC to manage only the REST interface and use AngularJS to embrace the presentation layer.
Learn the Angular Routing and Templates to mimic your requirements.
https://egghead.io/lessons/angularjs-routeprovider-api
https://egghead.io/lessons/angularjs-ng-view
It seems you have a problem to define what you really need.
AngularJS primary purpose is to do some Single Page Application. Which is, code only in HTML/CSS/JS in the front-end, and reuse your abilities in the back-end to produce DATA only (REST-json is the most classic but you can choose whatever you want).
So if you use a tool outside its primary purpose, you have to do some compromises : Of course you can mix backend template with AngularJS, but in this case, you can forget the router and ng-view.
Use AngularJS if you think you have some complex web interface. If it is only some static text, or even a few input forms here and there you don't necesseraly have to AngularJS, you can just use your classic server-side display rendering.
You could use ng-include to include each of your three partials into one view. Then in each partial view you can specify the controller with ng-controller. For creating the modal popup I would probably use ui bootstrap's modal
Alternatively you could use ui-router to create multiple parallel views.
I have following guidelines here which i hope will help you.
Do not mix Server Side MVC and Client Side MVC. AngularJS is primarly meant to augment the HTML and browser capability. The two-way binding of angularjs is excellent and provides lots of dynamic behavior. MVC4 scores best when we have to do lot of server side processing using the .Net platform capabilities.
But as you spent some good effort on this project and the corresponding technologies, there is a way out. Convert all your Controlller Actions in MVC4 to produce JsonResult and when the angularjs needs data use that, e.g. in $http.get( .