0

I'm trying to find the Best way to Build a SharePoint site(not an app) with Angular. I've multiple Content Editor webparts where I use the REST/JSOM to load content(Ex: Image Slider, List of Calendar upcooming events, some angular forms etc..).The question is how to efficiently create webparts so that I can just add the webpart where ever I want in my site. Right now I'm using following method.

  1. create an app js and refer it JS in masterpage.
  2. create a root element in each layout file (or in masterpage main contentplaceholder)
  3. create a JS where I all the controllers resides(controllers.js-created by gulp, bundling) and refer in masterpage.
  4. Each CEWP have an element with ng-controller attribute. in VS, create folder for each webpart(we call it feature), create a html,service and controller.

  5. bundle all controller and services into a single JS file and refer them in masterpage.

    Is this the correct way to use angular with SharePoint? Please Guide if anyone have a better approach.

Thanks.

Improve this question
1

1 Answer 1

Reset to default
1

Sekhar, Here is my 2 paisa's (cents :) ) worth -

  1. Build a global service for all crud functions - ideally a factory
  2. Designate a landing page, (that would be the home/default page of your site). In this, add a cewp with reference to your spa html.
  3. The SPA html (lets call it app.html) will have all your references of js and css.
  4. Your webparts can either be a multiple components of a single view, or multiple subviews (ideally a mix of both)
  5. Add further views and controllers - (in their own specific directory) as you need.

Make sure you follow Angular Style Guide - John Papa . Its comphrensive guide to angularJs best practices.

If you want to make a view with webparts intuitive, consider looking into

Masonary JS

Bootstrap Material Design

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.