angularjs:angularjs_tutorial
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
angularjs:angularjs_tutorial [2014/06/14 01:59] – [Service] mithat | angularjs:angularjs_tutorial [2015/06/25 12:25] – [Startup] mithat | ||
---|---|---|---|
Line 1: | Line 1: | ||
====== An AngularJS Tutorial ====== | ====== An AngularJS Tutorial ====== | ||
- | [[https:// | + | [[https:// |
- 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:// |
Some people describe the AngularJS learning curve as being shaped like a [[https:// | Some people describe the AngularJS learning curve as being shaped like a [[https:// | ||
Line 31: | Line 31: | ||
<WRAP center round tip 60%> | <WRAP center round tip 60%> | ||
At the time of this writing, I recommend [[https:// | At the time of this writing, I recommend [[https:// | ||
+ | |||
+ | You can also link just the core to the CDN and use local downloads for everything else. | ||
</ | </ | ||
Line 37: | Line 39: | ||
<code javascript> | <code javascript> | ||
- | 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 |
The resulting not-doing-anything-interesting-yet files might look like: | The resulting not-doing-anything-interesting-yet files might look like: | ||
Line 174: | Line 176: | ||
<ul> | <ul> | ||
< | < | ||
- | < | + | < |
</ul> | </ul> | ||
</ | </ | ||
Line 262: | Line 264: | ||
when('/', | when('/', | ||
controller: ' | controller: ' | ||
- | templateUrl: | + | templateUrl: |
}) | }) | ||
... | ... | ||
Line 296: | Line 298: | ||
$scope.name = " | $scope.name = " | ||
}); | }); | ||
+ | </ | ||
+ | |||
+ | A suitable template (discussed next) for the above might me: | ||
+ | |||
+ | <file html home.html> | ||
+ | < | ||
+ | < | ||
</ | </ | ||
Line 306: | Line 315: | ||
</ | </ | ||
- | The double curly-brackets notation | + | The double curly-brackets notation is AngularJS-speak for, "Replace this double-curly stuff with the property from the '' |
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., '' | + | 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 |
< | < | ||
- | A common application is sorting, which can be achieved with the '' | + | A common application is sorting, which can be achieved with the '' |
<code html5> | <code html5> | ||
Line 414: | Line 423: | ||
a pretty powerful filter named '' | a pretty powerful filter named '' | ||
- | 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. |
</ | </ | ||
Line 549: | Line 558: | ||
Note that factories know nothing of '' | Note that factories know nothing of '' | ||
- | In the following, we have rewritten the '' | + | In the following, we have rewritten the '' |
<code javascript> | <code javascript> | ||
Line 610: | Line 619: | ||
</ | </ | ||
- | I won't 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> | ||
- | The factory and service we created above are very simplistic. Typically you would put methods for doing [[wp> | ||
===== Data binding ===== | ===== Data binding ===== | ||
TODO | TODO | ||
===== AJAX and APIs ===== | ===== AJAX and APIs ===== | ||
+ | TODO | ||
+ | |||
+ | ===== Additional modularization ===== | ||
TODO | TODO | ||
angularjs/angularjs_tutorial.txt · Last modified: 2015/06/25 12:30 by mithat