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/06/14 01:59] – [Service] 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 9: Line 9:
   - Additional groovy bits   - Additional groovy bits
  
-So, this is my lame-ass attempt to do that. It assumes you know at least a little bit how MVC works and what a SPA is. I will focus exclusively on what you (i.e., I) will probably want to do with the framework rather than the million and a half things you //can// do with it and the gazillion ways of doing those things.+So, this is my lame-ass attempt to do that. ((This might turn out to be a [[http://jan.varwig.org/archive/how-to-do-nested-views-in-angularjs-hint-dont|bad way of approaching AngularJS]]; we'll see.)) It assumes you know at least a little bit how MVC works and what a SPA is. I will focus exclusively on what you (i.e., I) will probably want to do with the framework rather than the million and a half things you //can// do with it and the gazillion ways of doing those things.
  
 Some people describe the AngularJS learning curve as being shaped like a [[https://www.google.com/#q=angularjs+hockey+stick|hockey stick]]: fundamental concepts are easy, advanced concepts not as much. This tutorial only pretends to cover the short part of the stick. Some people describe the AngularJS learning curve as being shaped like a [[https://www.google.com/#q=angularjs+hockey+stick|hockey stick]]: fundamental concepts are easy, advanced concepts not as much. This tutorial only pretends to cover the short part of the stick.
Line 31: Line 31:
 <WRAP center round tip 60%> <WRAP center round tip 60%>
 At the time of this writing, I recommend [[https://code.angularjs.org/|downloading the latest stable directly]] since additional modules that are critical to writing SPAs with AngularJS are not available through Bower and are not publicized by Google CDN. At the time of this writing, I recommend [[https://code.angularjs.org/|downloading the latest stable directly]] since additional modules that are critical to writing SPAs with AngularJS are not available through Bower and are not publicized by Google CDN.
 +
 +You can also link just the core to the CDN and use local downloads for everything else.
 </WRAP> </WRAP>
  
Line 37: 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 69: 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 115: 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 174: 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 262: Line 264:
 when('/', { when('/', {
     controller: 'uselessController',     controller: 'uselessController',
-    templateUrl: 'views/nada.html'+    templateUrl: 'views/bored.html'
 }) })
 ... ...
Line 296: Line 298:
     $scope.name = "Olivia";     $scope.name = "Olivia";
 }); });
 +</file>
 +
 +A suitable template (discussed next) for the above might me:
 +
 +<file html home.html>
 +<h2>Hello, {{name}}!!</h2>
 +<p>This is my home page. Fascinating, isn't it?</p>
 </file> </file>
  
Line 306: Line 315:
 </file> </file>
  
-The double curly-brackets notation is officially called “interpolation” and is AngularJS-speak for, "Use a property from the ''$scope'' object."+The double curly-brackets notation is AngularJS-speak for, "Replace this double-curly stuff with the property from the ''$scope'' object that has the given name." The process is called interpolation.
  
 Pretty simple. Pretty simple.
Line 386: Line 395:
 ==== Template filters ==== ==== Template filters ====
  
-Another way you can do some lightweight processing and formatting of data in the template is by using filters. They can be applied to both AngularJS data attributes and to template interpolations (i.e., ''%%{{whatever}}%%'' expressions). The syntax is:+Another way you can do some lightweight processing and formatting of data in the template is by using filters. They can be applied to both AngularJS data attributes (i.e., ''%%data-ng-<whatever>="..."%%''and to template interpolations (i.e., ''%%{{whatever}}%%'' expressions). The syntax is:
 <code>the-thing-you-want-filter | filter-name : filter-parameters</code> <code>the-thing-you-want-filter | filter-name : filter-parameters</code>
  
-A common application is sorting, which can be achieved with the ''[[https://docs.angularjs.org/api/ng/filter/orderBy|orderBy]]'' filter and which will serve as an example of using a filter on an AngularJS data attribute:+A common application is sorting, which can be achieved with the ''[[https://docs.angularjs.org/api/ng/filter/orderBy|orderBy]]'' filter:
  
 <code html5> <code html5>
Line 414: Line 423:
 a pretty powerful filter named ''[[https://docs.angularjs.org/api/ng/filter/filter|filter]]'' that lets you select a subset of items from array against some rather flexible matching criteria. And (I am lead to believe) you can create your own filters. a pretty powerful filter named ''[[https://docs.angularjs.org/api/ng/filter/filter|filter]]'' that lets you select a subset of items from array against some rather flexible matching criteria. And (I am lead to believe) you can create your own filters.
  
-If you want to apply more than one filter at a time, they can be chained:+Filters can be chained if you want to apply more than one filter at a time:
  
 <code html5> <code html5>
Line 424: Line 433:
  
 <WRAP center round tip 60%> <WRAP center round tip 60%>
-If you find yourself going nuts with control-flow-like directives and/or filters in templates, you might want to ask yourself whether the templates have exceeded their responsibility and whether some of the logic in them ought to be moved to the controllers or models.+If you find yourself going crazy with control-flow-like directives and/or filters in templates, you might want to ask yourself whether the templates have exceeded their responsibility and whether some of the logic in them ought to be moved to the controllers or models.
 </WRAP> </WRAP>
  
Line 549: Line 558:
 Note that factories know nothing of ''$scope'', controllers. or templates. Nice and clean. Note that factories know nothing of ''$scope'', controllers. or templates. Nice and clean.
  
-In the following, we have rewritten the ''fruitController'' to use a ''fruitFactory''. The only upside to this complication for now is that the fruits in the factory can be shared with other controllers. Ultimately the associated data doesn't have to be hard-coded; it might come from database or elsewhere.+In the following, we have rewritten the ''fruitController'' to use a ''fruitFactory''. The only upside to this complication for now is that the fruits in the factory can be shared with other controllers. Ultimately the associated data doesn't have to be hard-coded; it might come from an API call or database or elsewhere.
  
 <code javascript> <code javascript>
Line 610: Line 619:
 </code> </code>
  
-won'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 "C", "U", and "D", it will help a thing or two about data binding.
  
-The factory and service we created above are very simplistic. Typically you would put methods for doing [[wp>https://en.wikipedia.org/wiki/Create,_read,_update_and_delete|CRUD]] operations in them. We have done some primitive R. To do CUD, it might help a thing or two about data binding. 
 ===== Data binding ===== ===== Data binding =====
 TODO TODO
  
 ===== AJAX and APIs ===== ===== AJAX and APIs =====
 +TODO
 +
 +===== Additional modularization =====
 TODO TODO
  
angularjs/angularjs_tutorial.1402711190.txt.gz · Last modified: 2014/06/14 01:59 by mithat

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki