I am planning to have an angularjs application. We will be doing the CRUD operation using Web Api service. And these controller functions I can call from ng-click directive (I mean with out a submit)
AngularJs <-> WebApi <-> Sql Serevr => This is our stack.
We need get call to web server (to fetch files. Ex: images).
But I am wondering, will we ever need a post operation into webserver in our case?
Also, do we ever need a form,ng-form,submit,ng-submit - in our case?
Any help would be apprecicated, Thanks!
There are number of reasons outside of just submitting to use a <form> tag in your code. For one, angular wires up validation results right into the form object. If you didn't have the form, you wouldn't get that functionality.
I'd suggest taking a look at the example at the bottom of the Angular Form documentation to see why you may want to use the Form. You can see how the form.$valid and form.$error change if you clear out the textbox in the example.
https://docs.angularjs.org/api/ng/directive/form
Regarding submitting, ngSubmit will prevent the default action of a form which is usually posting the server. Similar to the validation properties that exist, there is also a form.$submitted property that will be updated to true when the form is submitted with an ng-submit. This will not happen on an ng-click.
https://docs.angularjs.org/api/ng/directive/ngSubmit
Not much different，but ng-submit would be prevent by input[required] etc. ng-click is unlimited
Related
I am trying to create a service for showing alerts (in case sending a form goes wrong). This will be used on various forms of my project so I thought I could use an independant service for this. The problem is: for this alert I need HTML code at a certain place of my form, so what I need to know is : what's best practice for that?
Can I define a template for my service? And how do I use this template in my form wihch uses the service?
I had a difficult time using angular2 packages for notifications then I decided to create my own notification for a system I'm working on. I scrapped online till I found Mathew Ross' Post Check it out and see if it guides you, somehow.
If showing alerts means showing a popup then it should be a component. Components have a view that is added to the DOM.
You can share a global service that allows other components, directives and services to communicate with your AlertsComponent and pass strings or component types to be shown in the alert. For more details see https://angular.io/docs/ts/latest/cookbook/component-communication.html
I would use ViewContainerRef.createComponent() like demonstrated in Angular 2 dynamic tabs with user-click chosen components to display arbitrary components as content of the alert if you need custom HTML support with Angular bindings in the alert content.
Sometimes forms has some logic: some additional data requested with ajax, it reads cookie or has a special filter. I would like to separate this logic from controller. I also would like to have forms' html in a separate file. How to achieve this?
Is it possible to make factory or service work with form?
I have an idea about implementing each form as directive. Would it be good solution?
EDIT:
The main goal is not to move HTML to separate file but to move the form logic out of main route controller. Is it possible to write some provider that takes care of the form so that all data queries for the form select elements (and other logic) is happening in this provider and it calls controller's function just at the end to save validated data?
I also would like to have forms' html in a separate file. How to achive this?
You can use ready made directives like ng-include to include external HTML fragments, or you can have your own template-expanding directive.
Is it possible to make factory or service work with form?
You can create any provider whose operation is dedicated to handle form(s). This is your model than an angular technique.
I have an idea about implementing each form as directive. Would it be good solution?
If you have many forms in your application and they are playing a pivotal role, yes - having directives for forms could be termed as a specific solution. The pros and cons cannot be explicitly judged here since the rest of the application's character is unknown.
Probably this is one of the places you should start your research from.
Your question is too broad. If you would like to separate the form from the controller, you need to put that form into a directive, which would allow you to put the html and javascript for the form in a separate file.
Another way to put the form html in a separate file is to use ng-include, however, this simply lets you move the html, whereas the first method will allow you to have a separate controller for the form html.
I have an idea about implementing each form as directive. Would it be good solution?
I believe that is THE solution you are looking for.
I have a simple app built with AngularJS routes which is loading the controller and template for each path. I have a register form and login form on separates paths/templates. Say I go to the login form (/#/login) and enter my username/password, if I then hit "Register" (redirects me to /#/register), and then I hit back in my browser, it will return me to /#/login but the form will now be empty; the information I typed in has been removed.
Expected behaviour would be that the form data is still there.
Anyway to make that happen (without manually caching the data in a service)?
I'm guessing when the page changes, Angular is tossing the old template data and reloading the template again. Is there a way to instead cache that page template/DOM and reload it when the user returns to that path (instead of downloading and showing new template file)?
Well, this is a bit tricky. The browser should implement this kind of feature out of the box. Firefox started doing some work around this "issue" but I don't really know the current status of it.
Alternatively you can use a bit of javascript with LocalStorage to make this works. You're using AngularJS you can create a Directive that encapsulates this feature to be used on multiple places.
Basically you need to create a mechanism that translate an field to and unique-identifier and a value. Every time the user type on the field, you update the store. If the user "finish" the interaction on the form, you clean the value from the store.
You can also grab a jQuery plugin and just create a directive that uses the plugin.
https://github.com/kugaevsky/jquery-phoenix (never tested it).
TL:DR
There's nothing you can't do using a DOM property/attribute or something similar.
You'll need to get your hands dirty on some javascript to make this happen.
I'm generating a dynamic number of Google Charts tables after receiving the content through an ajax request and I wanted to apply an accordion effect on them. I wanted to know if I could do that with directives (since if I just code render the angular tags they won't get interpreted).
I don't need a code example, just a short answer to see if I should learn directives or if I should do it in a different way (I was thinking routeParams).
Thanks!
A directive is an equivalent of a jquery plugin, it should be use when you want to create a widget which manages some user interactions or a specific templating.
In your case it's a great idea, the directive could call a service which shall return the server datas and could manage all user interactions like open and close the accordion.
Before all, think about reusability.
I am developing an AngularJS/Web Api application, is there any way that we can write any Page validations in C# code and can be called from AngularJS as a service call?
i.e. the C# code is converted to JSON object where the angularJS service read the JSON object to enable/disable other controls? With this approach i can keep all my validation logic in one centralised place.
I don't want to write the same validation logic in the Angular script.
Please suggest.
Thanks
If I understand you correctly, you want to have only server-side validation. And at the same time you want your validation to happen asynchronously at server. And for end-user it would seem like a client-side validation.
Whether you are using Web API or Spring java, it is possible. There is a framework that can greatly simplify it. Just download example and see how it works:
https://upida4net.codeplex.com
By the way, you can take a look at working example here: http://upida.cloudapp.net:8080/org.upida.example.angular/
I promise, you will be surprised with amount of code there.