Getting started with Bootstrap and AngularJS

In this video I walk through the basics of Bootstrap and AngularJS, starting from a completely blank page and building out a complete app in small incremental steps. Although 2/3 of the video are focused on pure Bootstrap and AngularJS, at the end I package the html/js/css and connect it to SharePoint using REST. Checkout more details on the solution and the code at www.richdizz.com.

[@edwardferron]

This one of the better explanations of Angular and Bootstrap I have seen to date. SharePoint is a just a bonus. Great job, great video!

[@slyfoxrocks]

Excellent video that gently eases into using Bootstrap, AngularJS and SharePoint using accessible bite size chunks related to each piece of the puzzle. Thoroughly enjoyed (and actually understood things!) - thank you so much Richard!

[@mustaphag]

The best angularjs example so far in KZbin. Excellent job

[@pascalsi1]

Fantastic !!! - fantastic bootstrap demo - fantastic angularjs demo - fantastic sharepoint dev demo Great job ! Well done !

[@ga7853]

Hey man, that was really wonderful except for you do not zoom in when coding that made it very hard to see, but its one of the best video on angular out there, thanks for the great effort, it was really helpful.

[@gianners]

Probably the most straightforward video tutorial on Bootstrap and Angular I've seen... Also, BEATLES not BEALTES

[@0xanand]

bootstrap,angular explained!!!....thnx for awesome explaination of these open source frameworks in an "open source platform".....

[@DanielPerez-hy6qi]

Very useful several years later..

[@andrepeo]

Thank you, it's a really great video: perfect for beginners as for expert developers who never approached angularjs but are familiar with MVC. ..and I really agree with the opening statement: Microsoft has really changed its approach to open-sourcing and self-learning (with the collaboration line, Sharepoint and Office365 above all). It really is a chance to create professionalism and foster the development of new technologies and the betterment of the development process. Keep up the good work.

[@etayluz]

This is the best tutorial I've seen of Bootstrap, thank you! So much garbage out there

[@craigShell]

Dude, your text is so small it's impossible to read! it would be nice if you include a link to the plunker, so we can debug!

[@budman85]

thought it was just my old eyes... :) Tried zooming even at 300% no luck made it worse. KZbin isn't scaling the video up.

[@aeypn1725k]

Very wonderful video tutorial to learn angular js and bootstrap.Thank you bro

[@ningzhu3311]

Great video! Very detailed, clear, practical and hands-on! Could you tell me, around 12:04 in the video, how did u use p*4> to make 4 paragraphs in what seems like one action? Thanks

[@norboost]

+Ning Zhu Just hit tab after writing ie div.container>p*4>lorem to generate the elements. en.wikipedia.org/wiki/Emmet_(software) Emmet is available for quite a few editors if you like this functionality.

[@FreshStart082010]

Thanks man! This was an amazing video! I finally understood everything other trainings/videos confused the heck out of me about! Thanks again! AWESOME! I'll check your channel, but if you haven't already, please do something more in-depth on REST/Angular.

[@shannonpolok8963]

Hi Richard, This is an amazingly clear demonstration!!!!!!! I have followed and learnt a lot, but at the 33 minute mark there when started adding the data-ng-app="musicApp" ..... options I could no longer get the same result as you. and the {{search}} word shows up as the text "{{search}}" rather than an invisible until text is entered into the search form. from then on the dynamic function do not function as it does for you. Do you have a copy of the code you were using to see it I missed some syntax that changes the way it functions :) Regards Shannon

[@rowansiwakoti9928]

Thank you for such a nice tutorial Richard. But, when you search for an item and click on it then it always shows that you have clicked on the first item (i.e. item having index 0). How to solve it?? Thanks!

[@ja909]

Excellent video. Now, if we only could develop sharepoint hosted apps without visual studio. Are there any seed projects that leverage a build / deploy workflow using grunt or gulp?

[@positivevibes566]

I like your video very much and decide to try what you were showing. I went to plunker website and when I added the bootstrap IE 11 gave an error "...program stopped working". The bootstrap code was not inserted. Is there anything else I should know to proceed?

[@JosephJeethu]

Excellent video...very well done!!

[@relaxwithkev229]

nice one and good introduction in bootstrap

[@premierde]

Thank you, very informative. Hope more videos like this from the author.

[@nattikunja]

I might be late in using this sample to develop with, but I am using it none the less. I do have a problem when it comes to using the REST service to connect to the app to the SharePoint 365. Everything works when the data is hard coded, but when I applied the Query string code snippet and the Angular App/Service for SharePoint and ensureFormDigest code I cannot write to the List or or read form it. You did not cover Publishing an App in the process and I am wondering if this playing a role in the missing data. I am using a SharePoint 2013 Online account. I hope I can still get a response from you.

[@ningzhu3311]

I'm totally new to bootstrap! My nav row of 3-col width is always stacked on the other row, with the exact code you used. Do you have an idea why this happens?

[@sandeeppaul4132]

wrap 3-col div within a div class "row"

[@jongsmasher]

thank you so much for posting this video, this is really great and helpful.

[@dakotawray1043]

do you still have the solution available for download? Your onedrive link no longer works. Working through implementing this by hosting all the files in a site assets library.

[@generice3398]

any luck with this? i'm doing the same, but using MasterPages. Not able to get it to work correctly.

[@hokemspitter]

The code URL / onedrive is broken. Can you supply a working URL?

[@v1kytor]

Thank you Richard, it is very helpful. Is it possible building the same way on Sharepoint 2010?

[@alejandromcsd]

You don't have an app model in Sharepoint 2010, but it will be 95% the same. You just need to replace the Sharepoint 2013 App for a Sharepoint 2010 solution. Deploy all your angular/scripts/views as modules.

[@hokemspitter]

As soon as I began adding the routing portion, the page stopped matching the video. Also, the URL above for the source is broken.

[@manoharboddu2982]

Very nice post.... Thanks

[@martinakirschmann4441]

Thank you Richard.

[@hokemspitter]

Hi. I tried to retrieve this solution and I get redirected to One Drive and the file and am told that the file cannot be reached. I'd love to dig into this further. Is the solution available elsewhere. Thanks, Howard

[@ankitrai96]

He says that the internet is slow. What he doesn't says is that he's using Internet Explorer/edge! xoxo

[@abellarosasilva7533]

Thanks for this very valuable work!!!!

[@isogunro]

Awesome! Plunker is awesome!!!!

[@shimon-hadida]

hi..where i can download the project files? the links in yours website was broken

[@VanderPina]

impressive demo. Really helpfull.

[@antoniofcable]

Great tutorial. Awesome

[@shivasaik323]

hi rich for me ngRoute is not working its still a broken page please help!

[@silentgut]

how to i put this to a web part for my sharepoint?

[@jungormerod6387]

Thank you so much Richard! I watched your video over and over. I am little bit familiar with various programming languages including C#, Java, and Javascript. When I first watch it, "oh man, it's easy", but when I was actually doing it, it was a different animal! But, I was able to make it work and add some more functions. See my improved Music App: plnkr.co/edit/UdtD5nshPoLDGManzMHK?p=preview I noticed that the complete Music App (before the SP integration) has bugs. Cancel button does not work since the detail view has ng-data binding that will instantly update the data before user clicks on a button. I noticed that the data displayed on the detail-view page is not a shadow copy, but it is THE data. So, I used data-ng-model-options="{ updateOn: 'submit' } to fix the issue. I'm gonna shoot for SP integration now, which is my ultimate goal!

[@aymeninoubli8272]

+Jung Ormerod Thank you for sharing

[@shra1j]

Thanks a lot for sharing !!! :)

[@rohitwaghela5121]

Thanks Richard for Sharing this Excellent video. This is one of the best video for beginner to learn SharePoint + AngularJS + bootstrap.

[@gandevijaykumar]

Guru, onedrive links are broken please post the updated one :(

[@randommindz6782]

{{search}} at 29:08 is not working for me. all it does is shwo {{search}} in the header the only thing different from this code is that I'm using the updated angular (2.0.0) and bootstrap (3.3.2) what am I missing?

[@randommindz6782]

ps yes I tried angular.js 1.4 beta....same result

[@randommindz6782]

issues with data-ng-repeat

[@perfecttime2533]

have you added the script in head of html? ng-app mentioned ? ng-controller is referenced correctly ?

[@randommindz6782]

[@perfecttime2533]

RandomMindz where you mention your ng-app ?

[@cyberbabagaming4273]

Good

[@mwont]

bearly can read anything.

[@positivevibes566]

I found the solution here: connect.microsoft.com/IE/feedback/details/856775/browser-crash-when-it-doesnt-like-an-angular-js-event

[@shubhamgupta7770]

please share me code .and thanks a lot.

[@Eian00]

just learn some proper html and css!!