Introduction to Angular 2

Editor's Notes

• #5 Since the dawn of the Web, the browsing experience has worked like this: a web browser would request a particular page (say, “http://www.zyllem.com/”), causing a server somewhere on the Internet – this case Azure to generate an HTML page and send it back. This has worked well because browsers weren’t very powerful and HTML pages represented documents that were mostly static and self-contained. JavaScript, created to allow web pages to be more dynamic, didn’t enable much more than image slideshows and date picker widgets. After years of advances in personal computing, creative technologists have pushed the web to its limits, and web browsers have evolved to keep up. Now, the Web has matured into a fully-featured application platform, and fast JavaScript runtimes and HTML5 standards have enabled developers to create the rich apps that before were only possible on native platforms.
• #6 It wasn’t long before developers started to build out entire applications in the browser using JavaScript, taking advantage of these new capabilities. Apps like Gmail, the classic example of the single-page app, could respond immediately to user interactions, no longer needing to make a round-trip to the server just to render a new page.The bulk of the application logic (views, templates, controllers, models, internationalization, etc.) lives in the client, and it talks to an API for data. The server could be written in any language, such as Ruby, Python, or Java, and it mostly handles serving up an initial barebones page of HTML. Once the JavaScript files are downloaded by the browser, they are evaluated and the client-side app is initialized, fetching data from the API and rendering the rest of the HTML page. This is great for the user because once the app is initially loaded, it can support quick navigation between pages without refreshing the page, and if done right, can even work offline. This is great for the developer because the idealized single-page app has a clear separation of concerns between the client and the server, promoting a nice development workflow and preventing the need to share too much logic between the two, which are often written in different languages.
• #12 Before we can use the external class, we need to tell the module loader where to find it. We do It with import statement. Same purpose with using in C# that allow us to use exported members from external modules. Or import from 3rd Decorator is the function that adds metadata into a class. Prefix with @ Declare immediately right above the class. Similar to attribute of other programming languages Use @Component to identify class as the Angular component [Authorize] public class MainController(){ }
• #13 A component controls a patch of screen called a view/template. Example App root with Navigation List of Delivery Delivery detail
• #14 Angular apps are modular and Angular has its own modularity system called Angular modules or NgModules. While the root module may be the only module in a small application, most apps have many more feature modules, each a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. An Angular module, whether a root or feature, is a class with an @NgModule decorator. There are no standard way to group modules, but the recommendations are: Features as a module Shared utilities as a module Customer: CustomerListComponent, CustomerDetailComponent, CreateCustomerComponent, CustomerService Product: ProductListComponent, ProductDetailComponent, CreateProductComponent, ProductService
• #16 We have the index.html file set up to host the application by select the selector from the root component as the directive. Compile application in the browser dynamically and launch it be platformBrowserDynamic BrowserModule is the module needed for every web application run on browser