Been working on building a huge app using angular js. Have seen too many questions on the same topic on how best we can design an app, but still am lil confused.
A basic app usually has a
1) Login page/Index page
2) Home page - with headers and footers. Body being the partial/composite which keeps on changing.
since we don't have handle to load multiple ng-views, which is best way to structure the Home page such a way that we have one single HomePage container with headers and footers and Body is loaded dynamically via $route.
Right now I have designed it using a single LoginContainerPage which loads Login page and home pages via $routers, but since only a single ng-view is allowed i cant use another ng-view within the Home page to laod the body dynamically again. i am not keen to use ng-include as well.
Another way to go is keep LoginPage outside the $route and start routing from HomePage such that the Body is loaded dynamically.
Wanted to check if there are any better ideas around.
Thanks in advance!!
well in the project i'm working on with angularjs i took this approach:
i had a header that was the main navigation system i made a controller for that that handled the navigation system and knew about where i am right now. i had an ngView which loaded my main content based on routes but sometimes i needed different templates to be loaded and compiled base on some event for instance ajax loaded tabs. i implemented these types of things using ngInclude that the main controller on the view had the responsibility to choose the template and include it, i believe there is no need for multiple ngViews you can simply use scopes to implement different things and handle different parts of your app with different controllers and data. i guess the best idea for you is to make your login page separate.
i did this in my project. my login page was the only non-Ajax page that i had.
edit:
for authetication part if you wish to implement the authentication through angular you migh want to check this.
Related
I haven't touched React in over 2 years, and a bit confused looking back at my old code. For example, if I were to build an instagram clone, would I utilize html templates and inject javascript as such as
<div id="reactEntry">
Loading ...
</div>
for the login page, profile page, etc.
and use react components for main logic? for example, dynamically rendering posts and comments?
Or would it be smarter to make everything a react component-- login page, profile page, etc.
would it be smarter to make everything a react component-- login page, profile page, etc. - yes. As you don't need to rely much on other libraries and can use routing between pages. Also, there is performance benefit for a fully react app.
Having other components along with react component would not cause any harm as long as you don't dom manipulate the react component.
Or would it be smarter to make everything a react component-- login
page, profile page, etc.
There are benefits of using react components over the traditional multi-page web apps.
Since most react apps are Single Page Applications(SPA), hence they are fetched once, and then virtual dom handles the rendering of various components. This is faster than the tree-based document rendering.
Components are re-usable. Say you need a Document upload form - consisting of a drag and drop file field and an upload button. You could simply create a component, and keep using it at multiple places. All components have their internal logic, which makes it easier to manipulate and define them. Such an approach ensures a consistent app look and facilitates codebase maintenance and growth.
Plugins like react-router can handle page transitions, by using its navigational components. You could do partial renders too, giving you a faster UI/UX experience than rendering the entire pages.
I’m working with Symfony2, and I have a base.html.twig view which includes a navbar and a logo. Also I have other views which extend the base.
When I go from one page that extends the base to another one, the whole page is being rendered in Safari even the navbar and the logo, the same when I reload the page.
Firefox works fine.
So, is there any option in symfony2 to force safari browser to reload just what the code says? (I don’t want to ask the user to install or configure anything in his/her computer).
I think I'm looking for something like that (but for Symfony2): Livereload
There are many ways to make an AJAX requests to load only part of the whole page. You can use pure JavaScript or frameworks like jQuery, Dojo, Backbone.js, Ember.js, AngularJS, Spine.js, KnockoutJS, YUI, Batman.js, Closure, Agility.js, Knockback.js, React.JS. You can use any of them. They all contain AJAX-functionality.
But you need not only JS-framework to work with partial loading. You need also to organise your controllers on the server-side. Your controllers must not extend your base.html.twig but send in response only html-part or JSON-object that represent this html-part.
I am planning to design a web application with multiple HTML and JSP pages. The first page of myapp (index.html) loads up with the url
localhost:8080/mywebapp
without an explicitly pointing it to
localhost:8080/mywebapp.index.html
because web-xml has index.html in its startup script. Thats perfectly fine!
But how to toggle between multiple JSPs and HTMLs that are in the web app keeping the URL constant
localhost:8080/mywebapp
The user should not be knowing the navigation pattern when he is using the web-app.
Ideas on any frameworks or implementations are highly appreciated.
Thanks
Leaving aside the fact that you shouldn't do this, essentially what you have to do is bypass the standard routing method of your application.
You can do this one of two ways.
1) Use Ajax to call all the different URLs you need from within a single page. This will give you the single URL you're looking for though it doesn't of course prevent anyone from trivially working out what the actual navigation URLs are and unless you build a single page app and do some really evil interdependencies finding your navigation is trivially easy.
2) Your second option would be to create a single servlet which takes parameters which identify which part of your application you want to use. If you really wanted to be horribly evil you could hash those arguments with some form of per user short duration cookie so that even if they identify the actual web calls you're making running them manually won't actually work.
I'm creating mobile app with phonegap, google maps and jquery mobile. I would like to have more then one single html templates files (navigation for pages) and load just the content of the page via ajax to javascript overlay.
Also i want to keep the history and hashes to be able to go back to previous page etc. I tried using $.mobile.loadPage and changePage but this is changing the whole pages and i would like to change just the content.
Is there any solution?
You will find this framework the exact one you are looking for.
Ok guys, what I can't seem to grasp is how, on a one page website, you link to certain pages/divs while using the scrollto function.
if you look at Ultranoir.com
You can see the site is built with the one page format but if you watch the url field, it navigates to subfolders etc, but is still loading all content dynamically. How do they achieve this effect while still keeping it so clean and ordered? on my current site it all stays at www.url.com/index.html even when I navigate pages. any help? thanks!
They are using hash tags to load different parts of their pages dynamically. if u add i.e. index.html#!/blog or index.html#!/about
you can parse the url client-side using javascript and load the correct content through ajax based on the url.
Check out this page to see an example implementation of this functionality using php and JQuery: http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp
They do it by abusing the fragment identifier. A modern approach would make use of pushState