User Tools

Site Tools


angularjs:angularjs_tutorial

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
angularjs:angularjs_tutorial [2014/07/01 02:57] mithatangularjs:angularjs_tutorial [2015/06/25 12:30] (current) – [Specifying routes] mithat
Line 1: Line 1:
 ====== An AngularJS Tutorial ====== ====== An AngularJS Tutorial ======
  
-[[https://angularjs.org/|{{:angularjs:angularjs-logo48.png?nolink&36|A}}]] lot of [[https://angularjs.org/|AngularJS]] books and tutorials start with the framework's data binding features, then move on to controllers and models, and then finally to routes. This sequence doesn't fit the way my brain wants to grok things. AngularJS is a framework for writing [[wp>Single_page_application|SPA]]s, and it uses an [[wp>https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller|MVC]]-ish architecture. Thus it seems to make more sense to me to learn the framework the way I learn other MVC-ish frameworks:+[[https://angularjs.org/|{{:angularjs:angularjs-logo48.png?nolink&36|A}}]] lot of [[https://angularjs.org/|AngularJS]] books and tutorials start with the framework's data binding features, then move on to controllers and models, and then finally to routes. This sequence doesn't fit the way my brain wants to grok things. AngularJS is a framework for writing [[wp>Single_page_application|SPA]]s using an [[wp>https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller|MVC]]-ish architecture. Thus it makes more sense to me to learn the framework the way I learn other MVC-ish frameworks:
  
   - Routing   - Routing
Line 39: Line 39:
 <code javascript>var app = angular.module('RoutingDemoApp', []);</code> <code javascript>var app = angular.module('RoutingDemoApp', []);</code>
  
-The second parameter (in this example an empty array) is not optional: it's where additional modules that your app module will use are specified. You'll almost certainly want to put this JS in a separate file.+The second parameter (in this example an empty array) is not optional: it's where additional modules (i.e., dependencies) that your app module will use are specified. You'll almost certainly want to put this JS in a separate file, say, ''app.js''.
  
 The resulting not-doing-anything-interesting-yet files might look like: The resulting not-doing-anything-interesting-yet files might look like:
Line 71: Line 71:
 ==== Preparing index.html ==== ==== Preparing index.html ====
  
-To use AngularJS's routing, you'll need to include an additional JS file, ''angular-route.min.js'', after the ''angular-min.js'' include. This file defines the ''ngRoute'' module which (surprise!) handles routing:+To use AngularJS's routing, you'll need to use the ''angular-route.min.js'' dependency. Include an additional JS file, ''angular-route.min.js'', after the ''angular-min.js'' include:
  
 <code html5> <code html5>
Line 117: Line 117:
 ==== Specifying routes ==== ==== Specifying routes ====
  
-You next need to tell the your app instance that it should use the ''ngRoute'' routing module using the second parameter to ''angular.module'', and you need to define some routes. This yields the following ''app.js'', wherein I have specified exactly one route:+You next need to tell the your app instance that uses the ''ngRoute'' routing module by specifying it in the second parameter of ''angular.module''. You also need to define some routes. This yields the following ''app.js'', wherein I have specified exactly one route:
  
 <file javascript app.js> <file javascript app.js>
Line 176: Line 176:
 <ul> <ul>
     <li>tel: +1.212.555.5555</li>     <li>tel: +1.212.555.5555</li>
-    <li>email: whatever</li>+    <li>email: wh@tev.er</li>
 </ul> </ul>
 </file> </file>
Line 621: Line 621:
 I'm not going to cover and values and providers (for now?). I'm not going to cover and values and providers (for now?).
  
-The factory and service we created above are very simplistic. In a more typical app, you would put methods for doing [[wp>https://en.wikipedia.org/wiki/Create,_read,_update_and_delete|CRUD]] operations into your factories and services. All we've done so far is some primitive R. To do CUD, it will help a thing or two about data binding.+The factory and service we created above are very simplistic. In a more typical app, you would put methods for doing [[wp>https://en.wikipedia.org/wiki/Create,_read,_update_and_delete|CRUD]] operations into your factories and services. All we've done so far is some primitive "R". To do "C", "U", and "D", it will help a thing or two about data binding.
  
 ===== Data binding ===== ===== Data binding =====
angularjs/angularjs_tutorial.1404183429.txt.gz · Last modified: 2014/07/01 02:57 by mithat

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki