background preloader

0 - Bootstrapping

0 - Bootstrapping
Loading... In this step of the tutorial, you will become familiar with the most important source code files of the AngularJS phonecat app. You will also learn how to start the development servers bundled with angular-seed, and run the application in the browser. Before you continue, make sure you have set up your development environment and installed all necessary dependencies, as described in Get Started. In the angular-phonecat directory, run this command: git checkout -f step-0 This resets your workspace to step 0 of the tutorial app. You must repeat this for every future step in the tutorial and change the number to the number of the step you are on. If you haven't already done so you need to install the dependencies by running: npm install To see the app running in a browser, open a separate terminal/command line tab or window, then run npm start to start the web server. You can now see the page in your browser. The HTML page that displays "Nothing here yet!" app/index.html: <!

https://docs.angularjs.org/tutorial/step_00

Related:  AngularJSAngular JSjavascript

TechEd NA 2014 – Building Rich Apps with AngularJS on ASP.NET TechEd North America 2014, Houston Building Rich Apps with AngularJS on ASP.NET – John Papa Day 4, 15 May 2014, 8:30AM-9:45AM (DEV-B420) Disclaimer: This post contains my own thoughts and notes based on attending TechEd North America 2014 presentations. Some content maps directly to what was originally presented. Other content is paraphrased or represents my own thoughts and opinions and should not be construed as reflecting the opinion of either Microsoft, the presenters or the speakers.

MaptimeSEA As a simple web search will tell you, D3 is a data visualization library that runs like lightening in your web browser. You may hear data visualization and think I don't need a data viz lib, I make maps. Well, maps run on data, plus D3 is actually pretty good with maps, so keep an open mind. Tutorial: Tutorial Loading... A great way to get introduced to AngularJS is to work through this tutorial, which walks you through the construction of an AngularJS web app. The app you will build is a catalog that displays a list of Android devices, lets you filter the list to see only devices that interest you, and then view details for any device. Follow the tutorial to see how AngularJS makes browsers smarter — without the use of native extensions or plug-ins:

Why you should use ng-init Let's see some (incomplete) code that use ng-init <ul ng-controller="UserCtrl" ng-init="loadCurrentUser()"><li>{{currentUser}}</li></ul> myApp.controller("UserCtrl", function ($scope, AuthSrvc) { $scope.loadCurrentUser = function() { AuthSrvc.fetchCurrent().then(function(answeredUser) { $scope.currentUser = answeredUser.name; }); }; }); And it's equivalent without ng-init <ul ng-controller="UserCtrl"><li>{{currentUser}}</li></ul> myApp.controller("UserCtrl", function ($scope, AuthSrvc) { AuthSrvc.fetchCurrent().then(function(answeredUser) { $scope.currentUser = answeredUser.name; }); }); At first glance second possibility is less verbose.

API: $rootScope.Scope Processes all of the watchers of the current scope and its children. Because a watcher's listener can change the model, the $digest() keeps calling the watchers until no more listeners are firing. This means that it is possible to get into an infinite loop. This function will throw 'Maximum iteration limit exceeded.' if the number of iterations exceeds 10. Usually, you don't call $digest() directly in controllers or in directives. enjalot.github Pre-Game Some things to go over before we dive in SVG Overview overview of most common SVG elements and key ways SVG is similar to and different from html Binding API introduction to the d3 API functions that relate to the DOM and data binding, such as selections, transitions and the enter/update/exit pattern. Non-Binding API overview of the rest of the d3 API functions which can be used in all kinds of situations Reusable Charts introduction to the reusable chart pattern Diving Board Links and resources for diving even deeper into d3

Building Nested Recursive Directives in Angular - Sebastian's Blog I learnt a new trick over the weekend using Angular, how to build a recursive tree of objects using directives. In this post I want to share how to do it. Let’s say that you have some data that looks like this, it can be as deep as you want: And using this data you want to build a tree, e.g.

Understanding Scopes · angular/angular.js Wiki Executive Summary: Scope inheritance is normally straightforward, and you often don't even need to know it is happening... until you try 2-way data binding (i.e., form elements, ng-model) to a primitive (e.g., number, string, boolean) defined on the parent scope from inside the child scope. It doesn't work the way most people expect it should work. What happens is that the child scope gets its own property that hides/shadows the parent property of the same name. This is not something AngularJS is doing – this is how JavaScript prototypal inheritance works. New AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view and ng-include all create new child scopes, so the problem often shows up when these directives are involved.

Mapping with D3 - Maptime Boston A friendly introduction Andy Woodruff for Maptime Boston @maptimeBoston | @awoodruff Follow along! maptimeboston.github.io/d3-maptime Or get the code for examples: Interceptors in AngularJS and Useful Examples - Web Development is Easy! The `$http` service of AngularJS allows us to communicate with a backend and make HTTP requests. There are cases where we want to capture every request and manipulate it before sending it to the server. Other times we would like to capture the response and process it before completing the call. Global http error handling can be also a good example of such need. Interceptors are created exactly for such cases.

Angular Function Declarations, Function Expressions, and Readable Code We spend more time reading our code than writing it. That’s why it makes sense to write code that is easier to read. The good news is that there are a lot of really simple things that can make your code much more readable. This post describes simple techniques to make AngularJS controllers and services/factories more readable.

D3 <div id="js_warning"><strong>JavaScript is turned off, so this page won&rsquo;t be very interactive.</strong> Switch JavaScript back on in your web browser for the full experience.</div>

Related: