I'm working on a project where I need to use the AngularJS 1.4.3.
The problem is that I have to use the new routing of course, but on a view I need to use another partial views.
E.g.
I have a Home view, and this contains 2 dynamic table generated by data from a REST call. These tables should be partial views depends on the user role, etc.
Because the 1.4 is brand new I've not found any correct tutorial, or documentation, how can I create these type of sub-components.
Please help me,
Thanks in advance
Since nested views, and therefore ng-viewports in views do not work at the moment, ng-include is the current method of choice to accomplish this.
Edit:
I'am currently also working on a 1.4 project and we decided to use the next sprint to move to the ui router again, because of ngNewRouters many problems.
Related
Angular js is new in market so is there any advantage of using angular js with magento ?
If yes then anyone knows how can we use both in a single project ?
Angular is not new in the market, it´s pretty old already. Anyway, the benefit of using Angular (or another client framework) is that your shop can be a lot faster - instead of a page refresh for every click, you can load data/templates with Angular. For example, with a REST API. Meaning: you only load what you need and the server can handle more users.
There are many resources about this topic already, here´s a small list:
https://github.com/Wildhoney/Magento-on-Angular
http://www.webspeaks.in/2014/03/integrating-angular-js-with-magento.html
https://firebearstudio.com/blog/moa-magento-on-angular.html
http://www.neevtech.com/blog/2013/04/12/lightning-fast-magento-store-with-json-angularjs-and-magento-j-a-m/
https://www.reddit.com/r/Magento/comments/33mcgq/we_did_it_we_converted_our_magento_site_to_a/
Read through all those links and you will know why it´s good and how it can be done.
Is there any way to make an ionic modal have a ui router nested state with multiple modal pages?
It sounds like you are describing a wizard, A model that has multiple pages (or steps). Because Ionic and AngularJS go hand in hand with each other you can use some of the pre-built AngularJS components to achieve this, here is a link to a few:
https://github.com/mgonto/angular-wizard
https://github.com/simpulton/angularjs-wizard
There is an ionic wizard plugin, which although it is designed for wizard like steps, will pretty much provide a set of linked modal pages which share state, which should meet your needs.
http://arielfaur.github.io/ionic-wizard/
It also has nice features such as preventing progression in a wizard until fields are filled out etc.
I would recommend not doing that because I have tried it in the past and in the end I realized that it wasn't really practical. What you could do is, add:
ng-include src="'your-template.html'" ng-controller="yourTemplateController">
Now you have a view and a controller associated with it. All that is left to is, make the URL change. This can be done by using location.hash, or setting $stateParams and checking for it using $watch. I hope this helps.
I started working with AngularJs recently.
Looking to understand the reason for using multiple controller, I found different site explaning how to use multiple controller (AngularJS site). But what I'm actually looking for is a rationnal for using multiple controller.
So my question is : Why or when should we use multiple controller in a project? and the subquestion that is tied to this question: is it a good pratice to use multiple controller in an Angular project.
That's also an MVC question as angular extends this pattern. In Apple's View Controller Programming Guide for iOS, it says :
Every view is controlled by only one view controller.
So the idea in MVC pattern is to separate views. By having 1 Controller per View it makes it easier to achieve this. it simplifies the organization of controllers that serve one module. You do not suffer from code smells.
Also, it is important for routing issues in app.js for angular case. It clarifies structure for other developers that will have look at project. Using testacular in angularjs, unit testing is great, having multiple controllers makes unit testing easier.
Edit :
You would also most likely need more controllers for further functionalities. For example a Auth Controller where users can create new accounts. In addition to this you need a superadmin view where you can edit the resources with higher privileges. In such a case it is quite common to have separate controller. Scope and security issues has to change.
It is just a very good pratice to use 1 controller per 1 view. So for example you should have seperate controller for /home view, another one for /gallery, and another /contact.
It forces you as a developer to organise your code, so that you can take advantage of using services, filters etc.
Also it is easier to write unit tests because you can see what is covered and what is not.
I need to add new features to an already existing application. The application is built using Lithium and jQuery. The features that needs to be included have a complex view which allow users to analyze data and perform CRUD functionality. I won't go into details about the features here, but after working on a few simple Angular tutorials and side projects, I know that using AngularJS to create this view will make my life a lot more easier than creating the view using jQuery.
Over the course of the next few months we may convert the entire app to AngularJS.
I am uncertain about where I should place the Angular files and how to setup routing. How can I integrate AngularJS to Lithium so that part of the Lithium routing works and part of it is handled by AngularJS.
I also found this answer on stackoverflow but it doesn't mention folder structures or how to integrate Angular with Lithium. I think this link mentioned in the answers is supposed to have what I am looking for but it doesn't seem to exist anymore.
The link is down, but you can clone the source repository and run it yourself here: https://github.com/nateabele/li3-angular-presentation
Regarding organization, the simplest way would be to place the directory structure for your Angular components inside of /webroot. The more advanced (and in my opinion better) way would be to make them two separate applications: an AngularJS UI app, and a backend API in Li3 that it talks to.
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( .