How can i add multi web part sharepoint which used angularjs module?
I have web part in which i have used angular the problem is when i want to add this web part for several times in a page i don't know how to separate angular modules name? when there is only one web part added in the page it works properly but when there are more than one problem start
i guess i should create dynamic names for modules in server side am i right? is there any other way?
I used angular.bootstrap.
This resource helped me to figure out how to load different angularjs html+js files in 2 different content editor webparts. I also made sure to load angularjs only once on the page.
Related
I've developed two angular applications:
Contacts
MailClient
Both need to be deployed on their own endpoints. However: MailClient has a tab that needs to load Contacts and communication should be possible between the Contacts tab and the MailClient.
What is the best way to achieve this?
I first thought of using an iFrame and use angular.bootstrap to load a second angular application, but I've read that "AngularJS applications cannot be nested within each other."
So my second thought was to somehow convert the the Contacts-app to a module/component (bower?) which can be loaded in the MailClient. But how to achieve this? Or are there other (better) alternatives (like configuring the MailClient project to use symbolic links to the Contact project and just use them in the project - I don't now how we would configure the build-server in that case though)?
I am just trying to connect MongoDB using Web api.
I followed steps present in
http://www.sunyingroup.com/web2012/mongapi.htm
I confused with step 3, Build Angular JS MVC Pattern .
My question is how/where to add Angularjs script present in the above mentioned website.
Looking into your link example, it uses MVC page but that page is not provided (they provided just the javascript code), but basically you can go with a pure html file where you define your grid to show the data, and add your button. you need to add ng-app directive to body tag of the html file with app named after their module name "CRUD", and include that code into a javascript tag, in the same file for example or separate file.
the following link gives you a starting point of how to use angularjs with API
http://www.codeproject.com/Articles/737030/A-basic-SPA-application-using-AngularJS-WebAPI-and
hope that helps.
We have started using AngularJS within some SharePoint WebParts. So far, this has been working really well, however, we noticed that when we started placing more than one AngularJS WebPart onto a WebPart page, only the first WebPart on the page was bootstrapped by AngularJS. The second, or third, one simply didn't function. This is because we set up each WebPart as it's own Module/App in AngularJS. We were able to get around this using a technique described here:
Multiple apps and controllers in the same file
Is this a best practice for using AngularJS within SharePoint WebParts, or is there a better approach?
Steps:
1) Upload the angular JS files at top site collection level.
2) Refer angular JS files in master page.
3) Create a module in master page and refer the same in all the pages(Create separate controllers for each page).
4) Create a html page which has all the display which you want for the web part using angular JS.
5) Add a content editor web part on the page and refer that html page.
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.