What would be the best approach in creating a top navigation and footer for an Angular app that can be reused across multiple views? I'm thinking a directive is the way to go. What I'd like to accomplish would be the comparable to wp_header(); and wp_footer(); in wordpress.
The correct approach is SPA (Single Page Application) using ngView along with routings. The second less elegante option is to use ngInclude this can be used like a "template"/reusable section within the pages.
You can find really good examples here in Angular Documentation site:
http://docs.angularjs.org/api/ng/directive/ngInclude
Related
Using AngularJS 1.5.8 and Django/Django REST Framework as the back-end.
At this points have two URLs (app/ for login and app/dashboard as the main content); would be great to just have app/.
login and dashboard I have as components; navbar and sidebar I have as directives.
Using ngRoute currently and somethings I am reading lead me to believe I should be using ui-router to accomplish this.
Just some basic things that came to mind.
My sidebar has several tools I am developing. I want the user to be able to click on them, and then have the content related to that tool load in the main content area without the page refreshing or the URL changing.
Some of what I have read suggests ui-router might be better for this purpose? I am not, sure as I am just learning AngularJS and still struggling with its concepts. Thus, I don't have any code to post that needs to be fixed. Primarily just trying to understand the concepts and technology I need to look into to accomplish this. Makes it hard to lookup results on Google and SO when you aren't even sure what the terminology and tech is that you should be looking for.
Not sure if ngRoute or ui-router should be used; whether the modules should be built as components or directives; if the content for each tool stays in its own HTML template; etc...
This is a somewhat broad question but what you are looking for is client-side routing. Both ngRoute and ui-router offer this functionality and in very similar ways except ui-router offers significant extensibility with nested routes and multiple named view containers.
My advice is to start with ngRoute and learn it's ins and outs and then switch to ui-router if you find you need this extra functionality.
Client-side routing can either be used with the hash-bang (#/) or using html5 mode you can use a base URL that would function visually like server-side routing.
Now you've got the terms to search at least so happy Googling!
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.
Is it possible to use both angular js and ember js inside a single div element in a single web page?
Is it not recommended (best practice)?
Yes, it's possible. I don't see why you'd want to do it, but you didn't mention the use case, so I can't say it is or isn't recommended for your situation.
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( .
I have individual pages and initially I wanted to use angularJS because of data binding and the many other neat features. I also ended up using requireJS simply to help me manage my dependancies better as the list of javascript libraries I'm using is growing.
My question is using AngularJS with requireJS a no no for non single page web apps?
It's not a no-no. You can definitely use angular on non-single page apps. You just will lose a lot of the functionality - ie the stuff between "pages". You app will essentially be recreated on every page.
I've used angular for a multi-page site (basically a product search engine), with each page being separate. I used GET and POST to transfer stuff across pages, but ultimately, I wanted to use angular for rendering the content on the page because it's just neat and clean.