Duncan Hunter & Adam StephensenPart 1: Why Angular is Awesome FireBootCamp helps developers learn Angular 2 in 6 weeks with a mentor. Our goal is to get our students building real- world enterprise Angular 2 apps in the shortest possible time. The key difference between FireBootCamp and other training courses is the mentoring. Instead of learning by watching, you learn by doing. Why Angular If you go to a 1, 2 or 3 day course, you will learn lots of information, but when you try to apply it on your project the next week, we find most people get stuck. This is because there is a large gap between learning the concepts and applying them in a real-world application. FireBootCamp solves this problem is Awesome by providing students with mentors who are real Why you should use Angular 2 programmers to pair program, coach and train them one-on-one twice a week for 6 weeks while they go through the curriculum. SSW Enterprise Software Development 1 Part 1: Why Angular is Awesome Part 1: Why Angular is Awesome Code generation Angular turns your templates into code that’s highly optimized for today’s JavaScript virtual machines. Angular is Progressive Web Apps Use modern web platform capabilities to deliver app-like experiences. NativeScript and React Native.com Angular 2 Online SSW Enterprise Software Development 3 .NET. Windows and Linux using the same Angular methods you’ve learned for the web. desktop web applications . High performance.js. Also paves the way for sites that optimize for SEO. Code Splitting Angular apps load quickly with the new Component Router which delivers automatic code-splitting so users only load code required to render the view they request. plus the ability to access native OS APIs. giving you all the benefits of hand- Angular is the best development Angular is written code with the productivity of a framework. platform for building mobile and Fast Universal Serve the first view of your application on node. Native Build native mobile apps with strategies from Ionic Framework. Desktop Create desktop-installed apps across Mac. offline Cross-Platform and zero-step installation. PHP and other servers for near-instant rendering in just HTML and CSS. 2 FireBootCamp. Web Search interest Worldwide. Ember enabled components. Accessibility Knockout Create accessible applications with ARIA. instant errors and other feedback in popular editors and IDEs. then instantly deploy. you get intelligent code completion. IDEs going to be huge! With TypeScript. Be more Angular CLI Command line tools: start building fast.Part 1: Why Angular is Awesome Part 1: Why Angular is Awesome Templates Quickly create UI views with simple and powerful template syntax. Lifecycle Animation Create high performance complex choreographies and animation timelines with React very little code through Angular’s intuitive API. you can know if you’ve broken things every time you save. Relative Interest Over Time Faster Testing With Karma for unit tests. add Angular 2 is productive components and tests. And Angular Development Protractor makes your scenario tests run faster and stably. and built-in a11y test infrastructure. 2014 .com Angular 2 Online SSW Enterprise Software Development 5 . developer guides. Jan 2014 Jul 2016 Google Trends .present 4 FireBootCamp. Part 1: Why Angular is Awesome Part 2: For the Devs Happy Devs Using the latest in modern web technologies.. This means. desktop-like user experience on web. Excited Users Rich. Profitable Businesses Maintainable applications with more engaged users and development teams leads to more successful software projects. building more powerful apps in less time.com Angular 2 Online SSW Enterprise Software Development 7 . mobile and desktop platforms. For the Devs A crash course in Angular 2 6 FireBootCamp.. 9 4 Component’s companion template. 9 Set public appTitle property as type ‘string’ and initialize its value as ‘Hello World Application’.com Angular 2 Online SSW Enterprise Software Development 9 . used to bind values onto the page. 7 3 The selector specifies a simple CSS selector for an HTML element 8 that represents the component. 6 [(ngModel)] two-way data binding syntax to both display a data property and update that property on the component model. 10 Templates can also be stored in external HTML files. 8 FireBootCamp. 5 Double-curly braces. 10 setCurrentTime( ) is a JavaScript function using the ES6 shorthand syntax. 7 Event binding syntax consists of a target event within parentheses on the left of an equal sign. component properties and functions 2 3 1 Import the Angular 2 core file so that our component code can 4 have access to the @Component decorator. 8 An Angular class responsible for exposing data to a view and handling most of the view’s display and user-interaction logic. {{ }}. 5 2 @Component decorator adds metadata that tells Angular how to 6 create and use this component.Part 2: For the Devs Part 2: For the Devs ‘Hello World’ Explained 1 This code sample shows a simple ‘Hello World’ component with databinding. written in an enhanced form of HTML that tells Angular how to render this component’s view. and a quoted template statement on the right that often refers to a function on the component class. and each of those in turn is a parent to their child components. The benefits of the component tree: -. The App Component is the parent of the Todo Component. which is the parent of the Todo List Component and the Todo Input Component. Composability Todo -. The top level component contains several tree child components. Fast change detection strategies Component -. We’ll begin working on a new Angular 2 component that supports a Todo list. ‘Todo’ App An Angular 2 application is a tree of App Component component components.com Angular 2 Online SSW Enterprise Software Development 11 . Component communication between parent and child Todo List Todo Input Component Component 10 FireBootCamp.Part 2: For the Devs Part 2: For the Devs Let’s move beyond Hello World and introduce something closer to the real world. TodoFormComponent and the TodoService to be available in this file. TodoListComponent. OnInit.com Angular 2 Online SSW Enterprise Software Development 13 . updates and destroys them. Todo interface. 5 4 ( ) parenthesis on the left side of the equals sign represent an output of an event from a component/directive. 12 FireBootCamp. Here we use ngOnInit to run state initialization logic. 2 @Component is a decorator that allows us to associate metadata 3 with the component class. 6 Components have a lifecycle managed by Angular as it creates. The metadata tells Angular how to 4 create and use this component. Angular has its own dependency injection framework.Part 2: For the Devs Part 2: For the Devs ‘Todo’ App Explained 1 This code sample shows a typical component with injected dependencies and nested components. 6 5 Class constructor defining a component’s injected dependencies. 7 addTodo(todo: Todo) is a JavaScript function using the ES6 shorthand syntax. 3 [ ] square bracket property binding syntax on the left side of the equals sign represent an input of a property into a component/ directive. 2 1 Import Component. We utilize 7 TypeScript’s constructor syntax for declaring parameters and properties simultaneously. t s A module loader provides the ability to dynamically load modules.css . . This module can then share dependencies with the initial page bundle without having to reload any dependencies.t s Module . allowing for better .scss . it may become Bundler necessary to dynamically load a new module.p ng .htm l optimized bundles of code to be shipped to the browser.js ES6 MODULES . . Modules export values. the module registry would be populated by an initial compiled bundle of modules. and also keeps track of all loaded modules in a module registry.js .c s s Typically. .js 14 FireBootCamp. which is what module bundlers like webpack and SystemJS/JSPM can do. which can then be imported by other modules.Part 2: For the Devs Part 2: For the Devs Angular 2 embraces the new ECMA Script 6 module loading syntax. Module Later in the page state.png . in production.js A module is simply a JavaScript file written Loader with module syntax.com Angular 2 Online SSW Enterprise Software Development 15 . . The TypeScript compiler will fail with detailed error messages without having to leave your IDE. code. These are almost a requirement for large projects to reduce fear of refactoring a large code base. Open source. ES5 or ES6.com Angular 2 Online SSW Enterprise Software Development 17 .Part 2: For the Devs Part 2: For the Devs TypeScript is a typed superset of JavaScript -. Compile Time Checking Errors in TypeScript are shown in the IDE as you write your code. typed function parameters Any host. Built In Compiler TypeScript is not only the language of choice If you use the latest ES6 JavaScript but most third party libraries. blog posts language features you need to compile and the actual Angular 2 code base is written in your JavaScript to ES5 browser compatible TypeScript. and return types. Easier Code To Read that compiles to plain JavaScript. docs. Any OS. 16 FireBootCamp. although you can use JavaScript or Dart. TypeScript is much more explicit code. Any browser. With interfaces. navigation. making it easy to understand. TypeScript’s compiler by default can compile down to ES3. TypeScript is the default language for Angular 2. -. -. and refactoring. Great Tooling TypeScript’s type system allows for advanced autocompletion. -. Directives are modules.ssw. which can then be imported by other modules. e. @Component( ) DOM to the component. DIRECTIVES with module syntax.com. PROPERTY BINDING 2. 1.ts 7.component. a narrow. tive. EVENT BINDING A mechanism for binding A TypeScript decorator that tells Angular A mechanism to communicate properties defined on the how to process the component class. the DOM. we assemble our application from many A chunk of HTML used to render a elements in the DOM. www. Angular's most fundamental feature. function or feature that our nism for creating and delivering parts application needs. usually a Component.au/rules-to-better-angular-2 version 1. Almost anything can be of an application to other parts of an a service. TEMPLATE re-shaping and interacting with HTML In general.ssw. SERVICES 8.g.g. <hello-world></hello-world> 4.com.https://rules. both the ones we write ourselves and the view driven by an Angular Direc. ones we acquire from others. app/hello-world. METADATA 5.au @AdamCogan @DuncHunter @AdamStephensen . A service is typically a class with ARCHITECTURE application that request them. well-defined purpose. The component is the fundamental build- ing block of Angular applications. e.1 .Part 2: For the Devs Part 2: For the Devs MODULE MODULES A module is simply a JavaScript file written 6.g. An Angular class responsible for creating. events and values from the components model into e. Modules export values. 3. DEPENDENCY INJECTION THE OF NGULAR 2 Service is a broad category encompassing Both a design pattern and a mecha- any value. COMPONENT An Angular class responsible for exposing data to a view and user-interaction logic. Part 2: For the Devs Part 2: For the Devs RxJS is an essential ingredient of Angular 2 and simplifies asynchronous code RxJS ReactiveX combines the Observer pattern with the Iterator pattern and functional programming with collections to fill the need for an ideal way RxJS has over one hundred operators and is why some people think of RxJS as Lodash for events. 20 FireBootCamp.com Angular 2 Online SSW Enterprise Software Development 21 . be less expressive and less performant without RxJS. take more lines of code. switchMap( ) Map search text field values into a new observable of http search requests. -. This four line typeahead example would of managing sequences of events. distinctUntilChanged( ) Only emit the next search text field value if it has changed. -. debounce(500) Only emit the next search text field value every 500ms. Operators used: -. and development experience. View 22 FireBootCamp. Store -. by supercharging it with RxJS. State is immutable and reducers are the only part of the application that can change state.com Angular 2 Online SSW Enterprise Software Development 23 . The redux pattern helps you manage and simplify your application state. Actions Three principles of the redux pattern -. Redux (big R) is a library and redux (little r) is a design pattern ngrx ngrx builds on the concepts made popular by Redux. that is completely framework agnostic.Part 2: For the Devs Part 2: For the Devs The redux pattern is a way to implement a predictable state + + = container for JavaScript apps. that will revolutionize your applications -. The store is acted upon using special functions called reducers. The entire state of the application is represented in a single JavaScript object The result is a tool and philosophy Reducers called a store. Execute the official Angular 2 linter and run clang-format. create simple test shells for all of these. services and milliseconds in page load performance has an pipes with a simple command. According to research at Google. Run your unit tests all search engines can access your content. or your end-to-end tests with the breeze of a command. the difference of just 200 Angular CLI Universal Generate components. Server-side pre-rendering is a Test.Part 2: For the Devs Part 2: For the Devs ng new Better Perceived Performance The Angular 2 CLI makes it easy to create an First time users of your application will application that already works. It already follows our best practices! greatly improves perceived performance and Angular ng generate the overall user experience. The CLI will also impact on user behavior. Optimized for Search Engines Server-side Rendering ng serve Although Googlebot crawls and renders most for Angular 2 apps Easily put your application in production dynamic sites. flexible and efficient way to ensure that Make your code really shine. 24 FireBootCamp. routes.com Angular 2 Online SSW Enterprise Software Development 25 . many search engines expect plain HTML. right out of the instantly see a server rendered view which box. Lint. Format reliable. Automatic Progressive Web Apps modern UI components that work across Build Progressive Web Apps with ease using Angular CLI and Angular Mobile Toolkit. Focus Themable. device platforms. because every millisecond counts. Firefox Material Design and Safari. discoverability of the Web The Angular Mobile Toolkit makes it easy to Toronto 45° build snappy Web apps that load instantly on any device.com Angular 2 Online SSW Enterprise Software Development 27 . mobile and desktop. Service Worker and Application Manifest make it easy to create installable. mobile-network- Fast and Consistent Finely tuned performance. 26 FireBootCamp. and current versions of Chrome. shareability and no-install-required-ability of the Web without compromise. components for One developer. Fully tested across IE11 Material friendly apps in minutes.Part 2: For the Devs Part 2: For the Devs Angular Mobile Weather °C/°F Toolkit San Francisco 55° All the tools and techniques to build high performance mobile apps New York 48° Performance of native. Dallas 75° Sprint from Zero to App Hit the ground running with comprehensive. brand or just have a favorite color. Plugins web. Optimized for Angular Built by the Angular team to integrate seamlessly with Angular 2. Accessible and less energy on making experiences and internationalized so that all users are consistent across development teams and welcome. Edge. offline-capable. even without an internet Nunavut 25° connection. Take advantage of the searchability. for when you need to stay on- more energy on building better experiences. many platforms Angular 2 apps A single Web development team is now a Versatile cross-platform application powerhouse. Angular and libraries for App Shell. 0 developers visualize the application through component trees and visual debugging tools.Part 2: For the Devs Part 3: The Best Angular 2 Online Course Visual Interface Helps Angular 2. The red line shows registered providers with the Angular injector. The blue line shows the component hierarchy. Learn Angular 2 online in 6 weeks 28 FireBootCamp. Angular An example Augury visualization tool is Augury the Injector Graph.com Angular 2 Online SSW Enterprise Software Development 29 . The dotted line shows injected dependencies. Who should take This course is for frontend and backend developers who want to upskill to Angular 2 in this course? the shortest possible time.Part 3: The Best Angular 2 Online Course Part 3: The Best Angular 2 Online Course Detailed curriculum with 1-on-1 weekly mentorship The aim of this program is to With so much interest in the new Angular 2 get developers writing enterprise platform there is a race on to learn the tech as fast as possible. 30 FireBootCamp. experienced professionals who are working on Angular projects. All of our mentors are Angular 2 apps ASAP Learn Online. Most split their time Learn Part Time. between training and developing full time. We teach you how to build scalable/enterprise apps following best practices we have learned from experience on client projects.com Angular 2 Online SSW Enterprise Software Development 31 . so you are being taught by experts with cutting edge experience. Your The Benefits of Anywhere Benefits to our teaching style include: mentor will give you individualized attention so you can master every concept before moving forward. With regular 1-on-1 who are currently working on Angular 2 projects.Part 3: The Best Angular 2 Online Course Part 3: The Best Angular 2 Online Course Our program allows you to learn Angular 2 FireBootCamp mentors are experienced developers online at your own pace. Hold you accountable and offer extra help on -. Mentorship -. FireBootCamp is 1-on-1. mentoring sessions we can help monitor your progress and ensure you’re on the right track to Whereas a classroom may have a 1-to-20 student- Anytime from achieve your goals.You set your own hours Your mentor will: -. Pair program with you to build your projects -. You will have your questions answered every session.com Angular 2 Online SSW Enterprise Software Development 33 .Interact with fellow students and alumni with your weaknesses our online forums -.Complete the program in 10-15 hours/week -. to-teacher ratio.Weekly 1-on-1 mentoring sessions -. Save you from burning hours by getting you unblocked quickly 32 FireBootCamp. Task List App . Routing.Components and Data-binding Implementation -. Services and Payments Routing -. Material.Phase 3: Add Auth Week 3 Advanced Tackles building data-centric applications and how to work with Angular forms.Components. & Routing -. Angular 2 Syntax and Structural Directives Store . Hello World App . Unit Testing and End to End Testing Services and Dependency Injection -.Component Communication. RxJS and Observables Week 6 Music Introduces the redux pattern to simplify state management and walks through implementing & Forms -. Angular 2 Material -. Music Store Project: Phase 4: -. component architecture.com Angular 2 Online SSW Enterprise Software Development 35 .authentication -. How to setup your machine Store .Phase 2: Adding -. Music Store Project . Understanding redux -. & Basic Principles -. Importing 3rd party libraries Store .Part 3: The Best Angular 2 Online Course Part 3: The Best Angular 2 Online Course Gets you writing simple Angular applications. Introduction to Angular 2 Week 4 Music components for Angular 2. -. Introduces the Anglular CLI and Angular learning basic syntax. Learn the Plumbing .Initial -.Redux redux using ngrx into the Music Store.Phase 1 Week 2 Exploring Builds on understanding syntax. Week 5 Music Focuses on building the two most commonly Syntax. Advanced Component Communication -.io Quickstart & Authentication -. deploying and testing your application and Angular 2 Material is the best of breed UX Week 1 Kick off -. Services requested enterprise features . Music Store Project . Counter App . Music Store Project . Customer Manager App Implementing redux using ngrx 34 FireBootCamp. component communication. -. services and routing. Custom Directives and Angular Forms -. Directives -. Authentication with Auth0 -.Understanding the Angular. The Angular CLI -. Adding Payments with Stripe -.Payments and payments. dependency injection and services. The Angular CLI simplifies building. Collaboration and Content.org . SharePoint.js. Marlon Marescia . Dynamics CRM and SQL Server. Digital Advertising.io . SSW Rules to Better Angular 2 . TypeScriptLang. and Management and Virtualisation. Bibliography Angular. . Designer Rebecca Liu . earning a gold in Application Development. SSW Rules to Better Angular 1x . we were first recognized as a Microsoft Gold Partner. Redux. Application Lifecycle Management. Azure. Editors Adam Cogan . SSW has over 25 years of experience training developers and developing awesome Microsoft solutions using AngularJS. Today SSW has competencies in a variety of areas. Adam Stephensen . TFS. Stephen Carter . In 1999. The inspiration for this book came from Ben’s ‘The Best (and worst) JavaScript Frameworks in Under 2 Minutes!’ Code valid until: Writers Duncan Hunter . online bootcamp SSW is the consulting company behind FireBootCamp.org .NET. The little book of angulaR 2 $7.firebootcamp.99 www.5 .com SSW Enterprise Software development version 1.