Posts

Showing posts with the label Angular

Angular promises

By Anonymous
Image
I have been struggling to understand Angular promises for months, and I finally found an answer on Stack Overflow that explains them really well. There's also this really helpful cartoon which has a nice story explaining the fetching of data . However, the Stack Overflow answer was what really did it for me, and fully deserves its current status of 383 upvotes. The problem The problem that promises set out to solve is that when you make asynchronous calls to a server where the results of one call are dependent on another call, you need to return the results in the order of your dependencies, not in the random order that will happen depending on which server call returns its results first. Example Say I have a page where users can subscribe to or unsubscribe from email mailing lists and RSS feeds. The data displayed on the page is an amalgam of two different services fetching data from two different servers. The unsubscribe action and the subscribe action both send calls to the se...
Post a Comment
Read more

AngularJS style switcher

By Anonymous
It's often the case that you want to provide more than one CSS stylesheet for your app or website. You can do this by including a style switching function in your app. Here's how to do it in AngularJS. In the HTML, create a button for each stylesheet that you want to switch between, and pass in the filename of the stylesheet as a variable: <button ng-click="changeStyle('colors.css')" id="pink">Brookes Pink</button><br /> <button ng-click="changeStyle('colors-lime.css')" id="lime">Brookes Lime</button><br /> <button ng-click="changeStyle('colors-muted.css')" id="muted">Muted colours</button><br /> <button ng-click="changeStyle('colors-dark.css')" id="dark">Dark colours</button> You will also need to put the ng-app attribute in the <html> element, and an angular variable in the path to...
Post a Comment
Read more

Submit a post request from an Angular modal and refresh the main page

By Anonymous
I have a main controller with some data (fetched by $http.get), and when you click on one item, it pops up a modal with more details. In my modal, there is a button to modify the data (sent by $http.post) which then closes the modal and needs to tell the parent controller to refresh the data, because it has been modified by the event in the modal. NB: if you use my solution - don't forget to add Angular UI bootstrap to your main controller as follows: var myApp = angular.module('myApp', ['ui.bootstrap']); HTML <!--MODAL WINDOW for item details --> <script type = "text/ng-template" id = "itemModalContent.html" > < div class = "modal-dialog ng-hide=" hidden "> < div class = "modal-content" > < div class = "modal-header" > < button type = "button" class = "cancel rig...
Post a Comment
Read more

Getting multiple Angular modals to work with http response data

By Anonymous
Your app will undoubtedly have more than one modal (pop-up div), and it can be hard to see how to get more than one of them working in Angular. Here's a step-by-step guide to how to do it. Step 1. Put the required script tags in your HTML <script src = "scripts/angular.min.js" ></script> <script src = "scripts/ui-bootstrap.js" ></script> <script src = "scripts/ui-bootstrap-tpls.min.js" ></script> angular.min.js  is the main Angular library;  ui-bootstrap.js  is the Angular UI bootstrap library;  ui-bootstrap-tpls.min.js  is the Angular templating script to make the modal template display properly. Step 2. Put the modal template in your HTML, inside your ng-app div <div role = "main" id = "main" class = "ui-content scroll" ng-app = "myApp" > <!--MODAL WINDOW for item details --> <script type = "text/ng-template" id = "itemM...
Post a Comment
Read more