├── .bowerrc ├── .gitignore ├── LICENSE.md ├── README.md ├── a2firstlook.module.js ├── assets ├── 2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2 ├── PS_logo.png ├── angular-animate.min.js ├── angular-aria.min.js ├── angular-material.min.css ├── angular-material.min.js ├── angular.min.js ├── app.css └── ps-icon.png ├── bower.json ├── card.controller.js ├── card.service.js ├── examples ├── a1-a2 │ ├── a1 │ │ ├── 2-way │ │ │ └── plnkr.demo.html │ │ ├── binding-events │ │ │ └── plnkr.demo.html │ │ ├── controller │ │ │ └── plnkr.demo.html │ │ ├── http │ │ │ └── plnkr.demo.html │ │ ├── property-binding │ │ │ └── plnkr.demo.html │ │ ├── services │ │ │ └── plnkr.demo.html │ │ └── structural-directives │ │ │ └── plnkr.demo.html │ └── a2 │ │ ├── 2-way │ │ └── plnkr.demo.html │ │ ├── binding-events │ │ └── plnkr.demo.html │ │ ├── component │ │ └── plnkr.demo.html │ │ ├── http │ │ └── plnkr.demo.html │ │ ├── property-binding │ │ └── plnkr.demo.html │ │ ├── services │ │ └── plnkr.demo.html │ │ └── structural-directives │ │ └── plnkr.demo.html ├── component-input-output │ └── plnkr.demo.html ├── component-nest │ └── plnkr.demo.html ├── component-simple │ └── plnkr.demo.html ├── data-binding │ └── plnkr.demo.html ├── http-async │ └── plnkr.demo.html ├── http-promise │ └── plnkr.demo.html ├── http │ └── plnkr.demo.html ├── lifecycle │ └── plnkr.demo.html ├── need-http │ └── plnkr.demo.html ├── need-router │ └── plnkr.demo.html ├── need-services │ └── plnkr.demo.html ├── router-child │ └── plnkr.demo.html ├── router │ └── plnkr.demo.html ├── services-and-di │ └── plnkr.demo.html └── storyline-tracker │ └── plnkr.demo.html ├── index-old.html ├── index.html ├── package.json └── yarn.lock /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "bower_components" 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | bower_components -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2015-2016 JohnPapa,net, LLC 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # angular2-first-look-laungher 2 | 3 | ## THERE BE DRAGONS HERE 4 | 5 | This is the code for the original Angular 2 First Look course, written with the Angular 2 betas. It is now **deprecated** and replaced. 6 | 7 | With what? Glad you asked. Here is where you probably want to go :) https://github.com/johnpapa/angular2-first-look 8 | 9 | -------------------------------------------------------------------------------- /a2firstlook.module.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | angular 5 | .module('a2firstlook', ['ngMaterial']) 6 | .config(configure); 7 | 8 | configure.$inject = ['$mdThemingProvider', '$mdIconProvider']; 9 | function configure($mdThemingProvider, $mdIconProvider) { 10 | $mdThemingProvider.theme('default') 11 | .primaryPalette('deep-orange') 12 | .accentPalette('pink') 13 | .warnPalette('red'); 14 | } 15 | })(); -------------------------------------------------------------------------------- /assets/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/angular-2-first-look-launcher/e6375ace87e07c9eae50d23d31a1fed2505fd94e/assets/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2 -------------------------------------------------------------------------------- /assets/PS_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/angular-2-first-look-launcher/e6375ace87e07c9eae50d23d31a1fed2505fd94e/assets/PS_logo.png -------------------------------------------------------------------------------- /assets/angular-aria.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | AngularJS v1.4.8 3 | (c) 2010-2015 Google, Inc. http://angularjs.org 4 | License: MIT 5 | */ 6 | (function(u,n,v){'use strict';var r="BUTTON A INPUT TEXTAREA SELECT DETAILS SUMMARY".split(" "),p=function(a,c){if(-1!==c.indexOf(a[0].nodeName))return!0};n.module("ngAria",["ng"]).provider("$aria",function(){function a(a,f,l,m){return function(d,e,b){var g=b.$normalize(f);!c[g]||p(e,l)||b[g]||d.$watch(b[a],function(b){b=m?!b:!!b;e.attr(f,b)})}}var c={ariaHidden:!0,ariaChecked:!0,ariaDisabled:!0,ariaRequired:!0,ariaInvalid:!0,ariaMultiline:!0,ariaValue:!0,tabindex:!0,bindKeypress:!0,bindRoleForClick:!0}; 7 | this.config=function(a){c=n.extend(c,a)};this.$get=function(){return{config:function(a){return c[a]},$$watchExpr:a}}}).directive("ngShow",["$aria",function(a){return a.$$watchExpr("ngShow","aria-hidden",[],!0)}]).directive("ngHide",["$aria",function(a){return a.$$watchExpr("ngHide","aria-hidden",[],!1)}]).directive("ngModel",["$aria",function(a){function c(c,m,d){return a.config(m)&&!d.attr(c)}function k(a,c){return!c.attr("role")&&c.attr("type")===a&&"INPUT"!==c[0].nodeName}function f(a,c){var d= 8 | a.type,e=a.role;return"checkbox"===(d||e)||"menuitemcheckbox"===e?"checkbox":"radio"===(d||e)||"menuitemradio"===e?"radio":"range"===d||"progressbar"===e||"slider"===e?"range":"textbox"===(d||e)||"TEXTAREA"===c[0].nodeName?"multiline":""}return{restrict:"A",require:"?ngModel",priority:200,compile:function(l,m){var d=f(m,l);return{pre:function(a,b,c,h){"checkbox"===d&&"checkbox"!==c.type&&(h.$isEmpty=function(b){return!1===b})},post:function(e,b,g,h){function f(){return h.$modelValue}function m(){return q? 9 | (q=!1,function(a){a=g.value==h.$viewValue;b.attr("aria-checked",a);b.attr("tabindex",0-!a)}):function(a){b.attr("aria-checked",g.value==h.$viewValue)}}function l(){b.attr("aria-checked",!h.$isEmpty(h.$viewValue))}var q=c("tabindex","tabindex",b)&&!p(b,r);switch(d){case "radio":case "checkbox":k(d,b)&&b.attr("role",d);c("aria-checked","ariaChecked",b)&&e.$watch(f,"radio"===d?m():l);q&&b.attr("tabindex",0);break;case "range":k(d,b)&&b.attr("role","slider");if(a.config("ariaValue")){var n=!b.attr("aria-valuemin")&& 10 | (g.hasOwnProperty("min")||g.hasOwnProperty("ngMin")),s=!b.attr("aria-valuemax")&&(g.hasOwnProperty("max")||g.hasOwnProperty("ngMax")),t=!b.attr("aria-valuenow");n&&g.$observe("min",function(a){b.attr("aria-valuemin",a)});s&&g.$observe("max",function(a){b.attr("aria-valuemax",a)});t&&e.$watch(f,function(a){b.attr("aria-valuenow",a)})}q&&b.attr("tabindex",0);break;case "multiline":c("aria-multiline","ariaMultiline",b)&&b.attr("aria-multiline",!0)}h.$validators.required&&c("aria-required","ariaRequired", 11 | b)&&e.$watch(function(){return h.$error.required},function(a){b.attr("aria-required",!!a)});c("aria-invalid","ariaInvalid",b)&&e.$watch(function(){return h.$invalid},function(a){b.attr("aria-invalid",!!a)})}}}}}]).directive("ngDisabled",["$aria",function(a){return a.$$watchExpr("ngDisabled","aria-disabled",[])}]).directive("ngMessages",function(){return{restrict:"A",require:"?ngMessages",link:function(a,c,k,f){c.attr("aria-live")||c.attr("aria-live","assertive")}}}).directive("ngClick",["$aria","$parse", 12 | function(a,c){return{restrict:"A",compile:function(k,f){var l=c(f.ngClick,null,!0);return function(c,d,e){if(!p(d,r)&&(a.config("bindRoleForClick")&&!d.attr("role")&&d.attr("role","button"),a.config("tabindex")&&!d.attr("tabindex")&&d.attr("tabindex",0),a.config("bindKeypress")&&!e.ngKeypress))d.on("keypress",function(a){function d(){l(c,{$event:a})}var e=a.which||a.keyCode;32!==e&&13!==e||c.$apply(d)})}}}}]).directive("ngDblclick",["$aria",function(a){return function(c,k,f){!a.config("tabindex")|| 13 | k.attr("tabindex")||p(k,r)||k.attr("tabindex",0)}}])})(window,window.angular); 14 | //# sourceMappingURL=angular-aria.min.js.map 15 | -------------------------------------------------------------------------------- /assets/app.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | font-family: 'Roboto', sans-serif; 3 | font-size:14px; 4 | height:100%; 5 | margin: 0px; 6 | padding: 0px; 7 | } 8 | 9 | /*Custom Styles*/ 10 | 11 | md-toolbar a { 12 | color: inherit !important; 13 | text-decoration: none; 14 | } 15 | 16 | .md-headline { 17 | font-size: 16px; 18 | line-height: 18px; 19 | } 20 | 21 | md-content { 22 | margin: 4em auto !important; 23 | width: 92%; 24 | padding: 1em; 25 | } 26 | 27 | md-content > p.intro { 28 | margin: 0em 1em !important; 29 | } 30 | 31 | md-card { 32 | margin: 16px 8px !important; 33 | } 34 | 35 | md-card md-card-title { 36 | padding: 8px 12px; 37 | } 38 | 39 | md-toolbar.card-title { 40 | min-height: 32px; 41 | } 42 | 43 | md-toolbar.dark { 44 | position:fixed !important; 45 | background-color: #222 !important; 46 | top: 0; 47 | z-index: 99999; 48 | } 49 | 50 | .md-title-icon > i { 51 | background-image: url("ps-icon.png"); 52 | background-repeat: no-repeat; 53 | background-position: center center; 54 | padding: 1em 2em; 55 | } 56 | /*End Custom Styles*/ 57 | 58 | 59 | /* Toolbar area */ 60 | 61 | .menu { 62 | background-color: transparent; 63 | border: none; 64 | height: 38px; 65 | margin: 16px; 66 | width: 36px; 67 | } 68 | 69 | md-toolbar h1 { 70 | margin: auto; 71 | } 72 | 73 | /* Sidenav area */ 74 | 75 | md-list .md-button { 76 | color: inherit; 77 | font-weight: 500; 78 | text-align: left; 79 | width: 100%; 80 | } 81 | md-list .md-button.selected { 82 | color: #03a9f4; 83 | } 84 | 85 | md-sidenav md-list { 86 | padding: 0px 0px 8px 0px; 87 | } 88 | 89 | 90 | /* Primary content area */ 91 | 92 | #content { 93 | overflow: hidden; 94 | } 95 | 96 | #content { 97 | padding-left: 40px; 98 | padding-right: 40px; 99 | padding-top: 5px; 100 | } 101 | 102 | #content .md-button.contact { 103 | background-color: transparent; 104 | border: none; 105 | width: 48px; 106 | height: 48px; 107 | margin: 8px auto 16px 0; 108 | position: absolute; 109 | top: 10px; 110 | right: 40px; 111 | } 112 | 113 | #content md-icon.avatar { 114 | margin-top: 10px; 115 | } 116 | 117 | #content .md-button.contact > md-icon { 118 | fill:black; 119 | width:36px; 120 | height:36px; 121 | } 122 | 123 | md-button.menuBtn > md-icon { 124 | fill:white; 125 | width:24px; 126 | height:24px; 127 | } 128 | 129 | #content .md-button.contact:active > md-icon { 130 | background-color: #dadada; 131 | border-radius: 75%; 132 | padding:4px; 133 | transition: all 100ms ease-out 30ms; 134 | } 135 | 136 | #content img { 137 | display: block; 138 | height: auto; 139 | max-width: 500px; 140 | } 141 | 142 | /* Utils */ 143 | 144 | .content-wrapper { 145 | position: relative; 146 | } 147 | 148 | /* Typography support coming in 0.8.0 */ 149 | 150 | md-toolbar h1 { 151 | font-size: 1.250em; 152 | font-weight: 400; 153 | } 154 | 155 | .avatar { 156 | position: relative; 157 | width: 128px; 158 | height: 128px; 159 | border: 1px solid #ddd; 160 | border-radius: 50%; 161 | display: inline-block; 162 | overflow: hidden; 163 | margin: 0px; 164 | vertical-align: middle; 165 | zoom:0.70; 166 | transform: translateZ(0); 167 | -webkit-transform: scale(0.70); 168 | -moz-transform:scale(0.70); 169 | } 170 | 171 | 172 | md-bottom-sheet md-icon { 173 | margin-right:20px; 174 | } 175 | 176 | span.name { 177 | font-weight: bold; 178 | font-size:1.1em; 179 | padding-left:5px; 180 | } 181 | -------------------------------------------------------------------------------- /assets/ps-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/angular-2-first-look-launcher/e6375ace87e07c9eae50d23d31a1fed2505fd94e/assets/ps-icon.png -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-first-look", 3 | "description": "Angular 2 First Look", 4 | "version": "0.0.2", 5 | "license": "MIT", 6 | "private": true, 7 | "dependencies": { 8 | "angular": "^1.4.8", 9 | "angular-animate": "^1.4.8", 10 | "angular-aria": "^1.4.8", 11 | "angular-material": "^1.0.0" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /card.controller.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | angular 5 | .module('a2firstlook') 6 | .controller('CardController', CardController); 7 | 8 | CardController.$inject = ['CardService']; 9 | 10 | function CardController(CardService) { 11 | var vm = this; 12 | 13 | vm.cards = CardService.getCards(); 14 | } 15 | })(); -------------------------------------------------------------------------------- /card.service.js: -------------------------------------------------------------------------------- 1 | 2 | (function () { 3 | 'use strict'; 4 | 5 | angular 6 | .module('a2firstlook') 7 | .service('CardService', CardService); 8 | 9 | CardService.$inject = []; 10 | function CardService() { 11 | this.getCards = getCards; 12 | var cacheBuster = '?bust=' + Date.now(); 13 | 14 | var demoFile = 'plnkr.demo.html' + cacheBuster; 15 | var cards = [ 16 | { 17 | id: 0, 18 | title: 'Angular 2 Storyline Tracker', 19 | example: 'storyline-tracker/' + demoFile, 20 | summary: 'Example of all of the concepts put together in an application.' 21 | }, 22 | { 23 | id: 1, 24 | title: 'A1 - A2: Angular 1 Controller', 25 | example: 'a1-a2/a1/controller/' + demoFile, 26 | summary: 'Simple example of an Angular 1 Controller.' 27 | }, 28 | { 29 | id: 2, 30 | title: 'A1 - A2: Angular 2 Component', 31 | example: 'a1-a2/a2/component/' + demoFile, 32 | summary: 'Simple example of an Angular 2 Component.' 33 | }, 34 | { 35 | id: 3, 36 | title: 'A1 - A2: Angular 1 Structural Directives', 37 | example: 'a1-a2/a1/structural-directives/' + demoFile, 38 | summary: 'Simple example of an Angular 1 Structural Directive.' 39 | }, 40 | { 41 | id: 4, 42 | title: 'A1 - A2: Angular 2 Structural Directives', 43 | example: 'a1-a2/a2/structural-directives/' + demoFile, 44 | summary: 'Simple example of an Angular 2 Structural Directive.' 45 | }, 46 | { 47 | id: 5, 48 | title: 'A1 - A2: Angular 1 Two-Way Data Binding', 49 | example: 'a1-a2/a1/2-way/' + demoFile, 50 | summary: 'Simple example of Angular 1 Two-Way Data Binding.' 51 | }, 52 | { 53 | id: 6, 54 | title: 'A1 - A2: Angular 2 Two-Way Data Binding', 55 | example: 'a1-a2/a2/2-way/' + demoFile, 56 | summary: 'Simple example of Angular 2 Two-Way Data Binding.' 57 | }, 58 | { 59 | id: 7, 60 | title: 'A1 - A2: Angular 1 Property Binding', 61 | example: 'a1-a2/a1/property-binding/' + demoFile, 62 | summary: 'Simple example of Angular 1 Property Binding.' 63 | }, 64 | { 65 | id: 8, 66 | title: 'A1 - A2: Angular 2 Property Binding', 67 | example: 'a1-a2/a2/property-binding/' + demoFile, 68 | summary: 'Simple example of Angular 2 Property Binding.' 69 | }, 70 | { 71 | id: 9, 72 | title: 'A1 - A2: Angular 1 Event Binding', 73 | example: 'a1-a2/a1/binding-events/' + demoFile, 74 | summary: 'Simple example of Angular 1 Event Binding.' 75 | }, 76 | { 77 | id: 10, 78 | title: 'A1 - A2: Angular 2 Event Binding', 79 | example: 'a1-a2/a2/binding-events/' + demoFile, 80 | summary: 'Simple example of Angular 2 Event Binding.' 81 | }, 82 | { 83 | id: 11, 84 | title: 'A1 - A2: Angular 1 Services and DI', 85 | example: 'a1-a2/a1/services/' + demoFile, 86 | summary: 'Simple example of Angular 1 Services and DI.' 87 | }, 88 | { 89 | id: 12, 90 | title: 'A1 - A2: Angular 2 Services and DI', 91 | example: 'a1-a2/a2/services/' + demoFile, 92 | summary: 'Simple example of Angular 2 Services and DI.' 93 | }, 94 | { 95 | id: 13, 96 | title: 'A2: Components', 97 | example: 'component-simple/' + demoFile, 98 | summary: 'A Component contains application logic that controls a region of the user interface that we call a view.' 99 | }, 100 | { 101 | id: 14, 102 | title: 'A2: Nested Components', 103 | example: 'component-nest/' + demoFile, 104 | summary: 'A Component may contain other components.' 105 | }, 106 | { 107 | id: 15, 108 | title: 'A2: Input/Output Components', 109 | example: 'component-input-output/' + demoFile, 110 | summary: 'A Component may have input properties and output events.' 111 | }, 112 | { 113 | id: 16, 114 | title: 'A2: Data Binding and Directives', 115 | example: 'data-binding/' + demoFile, 116 | summary: 'Interpolation, Property Binding, Event Binding, Two Way Binding, and built-in Directives.' 117 | }, 118 | { 119 | id: 17, 120 | title: 'A2: Need Services', 121 | example: 'need-services/' + demoFile, 122 | summary: 'A Service provides anything our application needs. It often shares data or functions between other Angular features' 123 | }, 124 | { 125 | id: 18, 126 | title: 'A2: Services and Dependency Injection', 127 | example: 'services-and-di/' + demoFile, 128 | summary: 'Dependency Injection is how we provide an instance of a class to another Angular feature.' 129 | }, 130 | { 131 | id: 19, 132 | title: 'A2: Component Lifecycle Hooks', 133 | example: 'lifecycle/' + demoFile, 134 | summary: 'Lifecycle Hooks allow us to tap into specific moments in the application lifecycle to perform logic.' 135 | }, 136 | { 137 | id: 20, 138 | title: 'A2: Needs Http', 139 | example: 'need-http/' + demoFile, 140 | summary: 'Angular applications can connect with a web server to get or save data using HTTP. This example lacks http, whereas the next example has it.' 141 | }, 142 | { 143 | id: 21, 144 | title: 'A2: Http', 145 | example: 'http/' + demoFile, 146 | summary: 'Angular applications can connect with a web server to get or save data using HTTP.' 147 | }, 148 | { 149 | id: 22, 150 | title: 'A2: Http with Async Pipe', 151 | example: 'http-async/' + demoFile, 152 | summary: 'Using Http with Observables and the Async Pipe.' 153 | }, 154 | { 155 | id: 23, 156 | title: 'A2: Http with Promises', 157 | example: 'http-promise/' + demoFile, 158 | summary: 'Using Http with promises.' 159 | }, 160 | { 161 | id: 24, 162 | title: 'A2: Needs Router', 163 | example: 'need-router/' + demoFile, 164 | summary: 'Use this sample to practice adding a router to navigate to components.' 165 | }, 166 | { 167 | id: 25, 168 | title: 'A2: Router', 169 | example: 'router/' + demoFile, 170 | summary: 'Routing allows our application to navigate between different Components, passing parameters where needed.' 171 | }, 172 | { 173 | id: 26, 174 | title: 'A2: Child Router', 175 | example: 'router-child/' + demoFile, 176 | summary: 'Child routing isolates routing configuration to a set of related coponents, helping make that set extractable.' 177 | } 178 | ]; 179 | 180 | //////////////// 181 | 182 | function getCards() { 183 | return cards; 184 | } 185 | 186 | } 187 | })(); 188 | -------------------------------------------------------------------------------- /examples/a1-a2/a1/controller/plnkr.demo.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /examples/a1-a2/a1/http/plnkr.demo.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /examples/a1-a2/a1/services/plnkr.demo.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /examples/a1-a2/a1/structural-directives/plnkr.demo.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /examples/a1-a2/a2/2-way/plnkr.demo.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /examples/a1-a2/a2/component/plnkr.demo.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /examples/a1-a2/a2/http/plnkr.demo.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /examples/a1-a2/a2/services/plnkr.demo.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /examples/a1-a2/a2/structural-directives/plnkr.demo.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /examples/component-input-output/plnkr.demo.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /examples/component-nest/plnkr.demo.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /examples/component-simple/plnkr.demo.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /examples/http-async/plnkr.demo.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /examples/http-promise/plnkr.demo.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /examples/http/plnkr.demo.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /examples/lifecycle/plnkr.demo.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /examples/need-http/plnkr.demo.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /examples/need-router/plnkr.demo.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /examples/need-services/plnkr.demo.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /examples/router-child/plnkr.demo.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /examples/router/plnkr.demo.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /examples/services-and-di/plnkr.demo.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /index-old.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular 2 First Look 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 |

30 | Angular 2 First Look 31 |

32 | 33 |
34 | Angular 2 35 | John Papa 36 |
37 |
38 | 39 | 40 | 41 | 42 |

The following are examples for the core fundamentals of Angular 2. Click the button to view each sample in a plunker.

43 | 44 | 45 | 46 | 47 | {{card.id}}. {{card.title}} 48 | 49 | 50 | 51 | 52 | 53 | {{card.summary}} 54 | 55 | 56 | 57 | View Sample 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular 2 First Look 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 36 | 37 | 38 | 39 | 40 | 41 |
42 | 43 |

44 | Angular 2 First Look 45 |

46 |
47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | Now updated for Angular's 2.x release 56 | 57 | 58 | 59 | 60 | 61 | This course has been updated to reflect the Angular 2 final release. Press the button to go to all of the revised code samples. 62 | 63 | 64 | 65 | Go 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-first-look", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "lite-server" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/johnpapa/angular2-first-look.git" 12 | }, 13 | "author": "John Papa (http://johnpapa.net/)", 14 | "license": "ISC", 15 | "bugs": { 16 | "url": "https://github.com/johnpapa/angular2-first-look/issues" 17 | }, 18 | "homepage": "https://github.com/johnpapa/angular2-first-look#readme", 19 | "devDependencies": { 20 | "lite-server": "^2.2.0" 21 | } 22 | } 23 | --------------------------------------------------------------------------------