I'm brand new to angular, and am still deciding whether or not I want to use it. I'm looking to have 2 separate 'base' pages in my app: an authenticated one and an unauthenticated one. They have different skeletons with different content areas. So, I can't just redirect to separate partials, but rather an overall html.
Is there a way to have 2 apps, 1 for index1.html and one for index2.html?
OR
Is there an easier way to do this? Or is this just not what angular is built for?
You can use ngInclude to conditionally change the contents of various parts of the page. That way your header and footer can change depending on whether or not the user is authenticated, while the main content area is still serving content based on your routes.
Related
I want to build a react application where there will be two types of UI, one for admin and other for user. All the files included in header and footer will be separate. how can I achieve this?
Approach 1
Creating two separate application for admin and user like
example.com for user and admin.example.com
So that I can include all the css and js files of respective design in index.html
Approach 2
Integrating in one application where url will be example.com for user and example.com/admin for admin.
but then my question is where will the asset file will in included for both user and admin where the respective template will be created.
Please help and pardon me if the question framing is not correct.
The second approach looks better to me.
Where to include assets and where to create the template?
Have all the Components (admin + user components)in the Components folder, and in App.js, while defining the routing, provide components to routes accordingly. For example:
for path="/", it should provide component <UserHome/>
for path="/admin/", it should provide <AdminHome/>
Hope that answers your question.
Both these are equally good.
Would recommend method 2 if there is any common data or function between them
I am working on an application which uses angularjs 1.6 for the frontend and codeigniter for the backend. Till now the home page in my application had the login form and the logic for that functionality was written in homeCtrl.js. Due to new design changes for the application, the login form is now part of the header. So I am clueless about how to implement the login functionality throughout the application as the header will be a part of all the pages. Can I use the existing code without breaking the functionality as I have a deadline to meet.
Yes, you can implement this logic. Use proper routing.
You can refer to this link.
Make use of UI-Router
This article makes use of ui-router library which you need to include.
In normal scenarios you will be having only simple states and one
state will be assoaciated with one view. But here you can configure
multiple views with your state.
UI Router with Multiple Views
In your case, for the home page header will contain the login form.
And for the other pages it will contain the actual header or whatever
you want. You can configure as many sub screens as you want.
You may get the UI-Router cdn path here
Well, I have never used and never felt like that I should use the UI router. I was asked in one of the interviews about this and so felt like reading if I am missing something out as an AngularJs developer.
Now, the explanations on internet displays it's strength based on the modularity and reusability of the components. Nesting of views etc.
If I want to reuse components in my view, then can't I use directive instead of a new state? According to this article by scotch.io(top google result) for ui router we can use separate data /controllers in my view. Well, can't I do the same via directive's controller and template. I can still reuse as many times as I want it.
Please let me know if I am missing some cool feature and makes it quintessential to use it in an AngularJs application (yeah a larger one with lots of reusable components of course) .
The whole point of the router is that it uses the URL to change states. If you just used directives, you would have to write your own mechanism for syncing up URLs with specific directives.
AngularJS is a framework for Single Page Application.
Single Page Application (SPA)
Single Page Application is a web application that loads single HTML page and dynamically updates a fragment in the page as the user interacts with the app.
John Papa's blog explains SPA in simple terms.
The biggest advantage of SPA that I see is
once the application is loaded, the state is maintained without
requiring server roundtrip when user navigates.
Users can bookmark deep link into your application. SPA framework (AngularJS) will take care of loading the required state when user open bookmark.
Although it is technically possible to achieve the above in a non-SPA application, it was never as simple as SPA.
SPA is useful for highly complex applications with many pages. For simple applications with 2-3 pages jQuery is the way to go.
Read Single Page Application: advantages and disadvantages for more discussions
You probably know all these and I think you are trying to achieve SPA using directive.
Routing
Routing framework loads a view dynamically based on user action into the main page without refreshing the whole application; providing SPA effect.
There are two popular AngularJS routing frameworks available.
ngRoute
UI-Router
ngRoute is based on URL mapping and UI-Router is based on state name mapping. I prefer UI-Router.
Routing vs Directive
Now, the explanations on internet displays it's strength based on the
modularity and reusability of the components. Nesting of views etc.
Yes directive is used for modularity and reusability and can load views dynamically but cannot choose a view dynamically based on user action. You have to write complex conditions within directive to choose a view dynamically.
For example, if you have an application with 3 links and you need to show a view based on the link user clicked.
Using directive you need to keep track of what the user clicked and write a mucky condition to choose a view to display. Most of the time you will fail to achieve the effect because the link can be accessed in multiple ways.
On the other hand, once routing is configured, the corresponding template will be dynamically loaded when user clicks the link. It is way easier to change the view based on user action.
Another advantage. When user opens a bookmark deep linked into the application, routing framework will take care of loading the sate (It is impossible to achieve this using directive). It feels more natural way of designing an application.
Choice is yours.
I'm new to AngularJS, I have following scenario that I need to implement:
Assume index.html page only has an input field for enter a unique ID, when click submit button, the unique ID will be passed to backend for retrieving all information needed(for example, User object with current status, last name, first name etc ). Based on User.currentStatus, it should show different page with the same header and footer. There is no top menu bar on any of the page. Basically, all the pages are displaying different information about a user based on his status.
Honestly, it depends on your backend architecture, but if you're new to Angular I'd recommend a SPA, since most resources are geared towards building a SPA.
Angular can be used either "traditionally" or in a SPA environment. Given that Angular does specifically target use in SPA's, that's the path I suggest.
Here's is a reference to $route in the AngularJS documentation, which you'll need in order to build a SPA: $route
You'll also need to read up on ngView, which is referenced near the top of that page.
For a SPA, structuring the project well can make things a whole lot easier, so here's a reference to a good style guide for Angular as well.
When routing in Angular views we add the following. I don't understand the need to add #; if I remove it, I get a 404 Error.
a href="#/AddNewOrder"
Putting # in URL indicates start of the hash part, which is used to address elements inside a single page. In modern single-page web applications, this can be used to address application states.
If you don't put the # there, you're changing the path, which means you're creating a new URL and prompting the browser to load the content at that new URL instead of the current page.
As other posters have suggested, you don't have to use hashes when using html5mode. I left it out, because it brings a few challenges of its own, which I feel to be outside the scope of the question.
enter link description hereYou don't have to. You can configure your URLs to look like normal URLs, but in reality they will still work the same way.
Check https://docs.angularjs.org/guide/$location
And refer to html5mode
It will only work in modern browsers though. Old browsers will still show the hash. But the cool thing is that you can write your URLs the old/normal way.
# or fragment identifier is a way to indicate a specific portion of a single document. Without the #, the url corresponds to a different page.
For example www.yoursite.com/page links to the /page location of your website, while www.yoursite.com/#/location points to the same index page of your website but at a specfic point in the web page #location, or in your case, a different template view.
Angular routing can not load different templates for different server urls. It is specifically designed for single-page applications and any loading of partial views or templates has to happen on the same web-page or location. Hence only the fragment part of the url changes when using angularjs routing.
More information about fragments can be found here: http://en.wikipedia.org/wiki/Fragment_identifier