Introduction to Angular 2

Editor's Notes

• #4: GOOGLE APPS 1600 WAS ONLY FOR DESIGNERS Ng2.0 is not stable now
• #7: By combining these four capabilities web developers can create declarative components (Custom Elements) which are fully encapsulated (Shadow DOM). These components can describe their own views (Template Element) and can be easily packaged for distribution to other developers (HTML Imports). When these specifications become available in all major browsers, we are likely to see developer creativity explode as many endeavor to create reusable components to solve common problems or address deficiencies in the standard HTML toolkit
• #10: This is the typical folder layout that I recommend: The best advice about huge apps is not to make them. Write small, focused, modular parts, and progressively combine them into bigger things to make your app. For larger organizational project, you can checout the seed angular project: https://github.com/angular-app/angular-app As you add more files, it might make sense to create subdirectories to further organize controllers and services. For instance, I often find myself making a models directory inside of services. My rule of thumb is to only further sort files into directories if there is some rational hierarchy by which you can organize the files.
• #11: Angular's modular library design and mobile-specific routing help keep your app's code lean, so users on low-bandwidth networks don't need to wait. Other mobile-first features include first-class support for touch event gestures, tuning for performance and low-memory usage on mobile platforms, and material design UI components with responsive, cross-device support.
• #12: Note that every single Binding often has a corresponding Key object which is internally created and maintained by Guice. Providers, if any, which are associated with the Injector can be retrieved by the following method. Provider provider = injector.getProvider(SomeType.class)
• #13: DIRTY CHECKING 2 WAY DATA BINDING $digest (calls watch at frequest intervals of time) $watch is angular method, for dirty checking. Any variable or expression assigned in $scope automatically sets up a $watchExpression in angular. You can create a watch express yourself as well So assigning a variable to $scope or using directives like ng-if, ng-show, ng-repeat etc all create watches in angular scope automatically. e.g $scope.text = ''; creates a $watch for ‘text’ automatically in angular. $apply $apply() is a angular method, internally invokes $digest.
• #16: The mechanism to check a single binding was optimized to allow the Javascript VM to optimize that code into native code via just-in-time compilation. Instead of scanning recursively a tree of objects, a function is created at Angular startup to see if the binding has changed. This binding-checking function looks like a function that we would write by hand to test for changes and it can be easily optimized away by the VM. Dont chck immutable 1- make the model an Observable: 2- make the model immutable, using for example Facebook's immutable.js.
• #17: In Angular 1, the Angular modules are mostly dependency injection containers that group related functionality. Problem The problem is, let's say we lazy load a second backendService with a completely different implementation: it would overwrite the first one! There is currently no way to have two services with the same name but different implementations, which prevents lazy-loading from being implemented in Angular 1 in a safe way . Types of di in ng 1 in the link function by position in the directive definition by name in the controller function by name, etc.
• #18: The idea behind dependency injection is very simple. If you have a component that depends on a service. You do not create that service yourself. Instead, you request one in the constructor, and the framework will provide you one. By doing so you can depend on interfaces rather than concrete types. This leads to more decoupled code, which enables testability, and other great things. Solution: If a component does not have a dependency defined, it will delegate the lookup to it's parent injector and so forth. This sets the ground for providing native lazy-loading support in Angular 2.
• #19: The mechanism to check a single binding was optimized to allow the Javascript VM to optimize that code into native code via just-in-time compilation. Instead of scanning recursively a tree of objects, a function is created at Angular startup to see if the binding has changed. This binding-checking function looks like a function that we would write by hand to test for changes and it can be easily optimized away by the VM. Dont chck immutable 1- make the model an Observable: 2- make the model immutable, using for example Facebook's immutable.js.
• #21: One of the goals of Angular 2 is to provide a clear migration path from Angular 1. This will only become clear when Angular 2 is near it's initial release, but for now the following is foreseen in the ng-upgrade project:
• #22: Application is the root component. The Filters component has the speaker input and the filter button. TalkList is the list you see at the bottom. And TalkCmp is an item in that list. A component is a directive with a view. But you can still write decorator-style directives, which do not have views. Components are fundamental building blocks of Angular 2 applications. They have well-defined inputs and outputs. They have well-defined lifecycle. They are self-describing.
• #23: Application is the root component. The Filters component has the speaker input and the filter button. TalkList is the list you see at the bottom. And TalkCmp is an item in that list. A component is a directive with a view. But you can still write decorator-style directives, which do not have views. Components are fundamental building blocks of Angular 2 applications. They have well-defined inputs and outputs. They have well-defined lifecycle. They are self-describing.