[Da Nang Scrum Breakfast] Angular Tour
•
0 likes•266 views
Da Nang Scrum Breakfast in July 2017 with topic Angular Tour. For more information, please visit: www.fb.com/AxonActiveVietnam or www.fb.com/scrumbreakfast.vn
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to [Da Nang Scrum Breakfast] Angular Tour
Similar to [Da Nang Scrum Breakfast] Angular Tour (20)
More from Scrum Breakfast Vietnam
More from Scrum Breakfast Vietnam (20)
Recently uploaded
Recently uploaded (20)
[Da Nang Scrum Breakfast] Angular Tour
- 4. www.axon.vnfb.com/AxonActiveVietNam • Web development overview • Introduction of Angular • Build your own application • Touch to the most important parts in Angular • Workshop Agenda
- 5. www.axon.vnfb.com/AxonActiveVietNam History of Web development
- 7. www.axon.vnfb.com/AxonActiveVietNam Ajax Ajax(asynchronous JavaScript and XML): Used to update a part of screen. If client have list users, we can update UI in client side.
- 12. www.axon.vnfb.com/AxonActiveVietNam • Angular 2.0.0 was released in September 2016 • Angular 4.0.0 was released in March 2017 and backwards compatible with 2.x.x. • Current version is 4.3.1 Angular Roadmap
- 13. www.axon.vnfb.com/AxonActiveVietNam • Fix a bug and release it, increase the last number. • A new feature is added, increase the second number. • Release a breaking change, increase the first number. Semantic Versioning
- 15. www.axon.vnfb.com/AxonActiveVietNam • Patch releases every week. • 3 monthly minor release after each major release. • A major release with easy-to-migrate-over breaking changes every 6 months. Tentative release schedule
- 16. www.axon.vnfb.com/AxonActiveVietNam • Support for web components • Usage of Typescript • Great performance • Angular CLI • General simplicity of the interface • A stronger templating system • Possesses easier APIs, lazy loading, simpler/faster debugging • Much more testable • Provides nested components • Google and the lesson learn Why Angular?
- 17. www.axon.vnfb.com/AxonActiveVietNam Creating app in 3 steps 1. Setup the environment 2. Create a new project 3. Serve the application
- 28. www.axon.vnfb.com/AxonActiveVietNam Parent – Child communication
- 31. www.axon.vnfb.com/AxonActiveVietNam Types of component Dumb or Representational component Smart or Container component.
- 35. www.axon.vnfb.com/AxonActiveVietNam Services Value, function or feature. Almost anything can be a service. Typically a class with well-defined purpose. Services should be everywhere.
- 38. www.axon.vnfb.com/AxonActiveVietNam Routing & Navigation Router imports Configuration Router outlet Router links Router state
- 40. www.axon.vnfb.com/AxonActiveVietNam Testing: Tools and technologies
- 41. www.axon.vnfb.com/AxonActiveVietNam Give it a try Workshop instruction: https://goo.gl/jvgBBT
Editor's Notes
- Languages : php, jsp, asp... Data model, business logic keep in server side. Return HTML to browser. JavaScript just for validating before submit form. Disadvantage: reload page on every user’s interactions such as click
- Client side keep data state and do business logic Use rest API in server side. JavaScript (JQuery) processes business, manipulates DOM -> need a framework for managing, handling, binding data as well as manipulating effectively with DOM
- Backbone and Knockout: 2010 AngularJs 2010. Angular September 2016. React open source in 2013 VueJs 2014 AngularJs became very popular JS framework, had been used by 1000 developers over the world to develop so many applications.
- There is a confusion of the name and version of the angular platform, and it’s not convenient to search for learning, question on Stack Overflow or just talk with your partner.
- In order to solve this frustrating issue, the Angular team decided about the name terminology: the old angular, angular 1 is called AngularJS. And the new angular 2/2+/4/5 is called Angular, just Angular
- The Core Angular libraries are versioned the same way, but distributed as different NPM packages. Due to this misalignment of the router package’s version, the team decided to go straight for Angular v4. All the core packages are aligned which will be easier to maintain and help avoid confusion in the future.
- Rather than having a closed system for modularizing AngularJS applications, Angular’s foundations lie on the emerging Web Components standard. The biggest selling point of TypeScript is tooling. It provides advanced autocompletion, navigation, and refactoring. Having such tools is almost a requirement for large projects. Angular doesn't do deep object comparison. If items are added/removed to/from an array, change detection won't detect it. The same for object properties as long as they are not directly bound from the view. The Angular CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices.
- On step 2, patience please. It takes time to set up a new project, most of it spent installing NPM packages.
- Framework for building client applications in HTML and JS ( or a language like TS that compiles to JS). Consists of several libraries, some of them core and some optional. Focus on the big picture, you’re able to see that we write NG app by: Composing HTML templates with ‘Angularized’ markup. Writing component classes to manage those templates. Adding application logic in services. Boxing or packing components and services in modules. Lunching the app by bootstrapping the root module. Angular takes over, presenting your application content in browser and responding to the user’s interaction.
- Angular apps are modular and Angular has its own modularity system call NgModules.
- At least one NgModule class, the root module, conventionally named AppModule. While the root module may be the only module in a small application, most apps have many more feature modules. Each feature module is used in order to help us organize our application into cohesive blocks of functionality. An NgModule is class with an @NgModule decorator
- Is a decorator function that takes a single metadata object whose properties describe the module. The most important properties are: The NgModule — a class decorated with @NgModule — is a fundamental feature of Angular.
- JS also has its own module system for managing collection of JS objects. It’s completely different and un-related to the NgModule system. In JS each file is a module and all objects defined in the file belong to that module.
- Component is a class which defined by @Component decorator. Component controls a patch of screen called a view. You define a component's application logic—what it does to support the view—inside a class. The class interacts with the view through an API of properties and methods. Template is component's view with its companion template. A template is a form of HTML that tells Angular how to render the component.
- You can either use ‘template’ or ‘templateUrl’ metadata property. How to bind data from component class to the view?
- A template looks like regular HTML, except for a few differences: typical html elements: <button>, <div> Code like {{buttonLabel}}, *ngFor, [participant], <participant-tile>, (click) uses Angular’s template syntax
- Without framework, you’re responsible for pushing data values into HTML and turning user’s responses into actions and value updates. Writing such a push/pull logic by hand is incredibly difficult and nightmare to read, as you might experience using JQuery. Angular supports data binding with four form syntaxes: to the DOM, from the DOM or in both directions.
- Is the combination of property and event binding in a single notation using ngModel directive. This is the only 2-way binding mechanism supported by Angular, of course, we’re able to make custom 2-way binding, however, it’s not recommended. In the 2-way data binding, a data property value flows to the input box from component as with property binding. The user’s changes also flow back to the component, resetting the property value to the latest value, as with event binding. Angular automatically creates and attaches an NgForm directive to the <form> tag. The NgForm directive supplements the form element with additional features. It holds the controls you created for the elements with an ngModel directive and name attribute, and monitors their properties, including their validity.
- Data binding is also important for communication between parent and child component.
- Property decorator, need to import from @angular/core. In case you’d like your component’s internal variable name is different from its usage, you’re able to use alias name. Input is used to pass data from parent to child. The child component exposes an EventEmitter property with which it emits events when something happens. The parent binds to that event property and reacts to those events. There are other ways to communicate between parent and child component such as: Local variable, @ViewChild decorator and service
- In Angular, everything is component, it is the main way we build and specify element and logic on the page.
- Basing upon the usage of components, they’re divided into two types.
- Could you please tell me which one should be dump and smart?
- A directive is a custom html element that is used to extend the power of HTML. Is a class with @Directive decorator, a component is a directive with a template. @Component decorator is actually a @Directive decorator extended with template oriented feature.
- There are two kinds of directive: Attribute and Structural directive Attribute directive changes the appearance or behavior of an element, component, or other directive, the usage as the same as html attribute. While structural directive changes the DOM layout by adding and removing DOM elements (change structure of view), there are two built-in: ngFor and ngIf
- How to communicate between component that not in parent-child relationship? How to fetch data from server, to play some business logic? Example: log service, data service, validation service, configuration data… Component classes should be clean, they don’t fetch data from server, validate user’s input…, they delegate such tasks to services. A component’s job is to enable user experience and nothing more, a good component presents properties and method for data binding.
- How can those services be available to components? Angular exposes these through Dependency Injection. DI is a way to supply new instance of a class with fully-form dependencies it requires. Most dependencies are services. Angular uses DI to provide new components with the services they need. Angular can tell which services a component needs by looking at the types of its constructor parameters (e.g..). When Angular -> component -> injector -> services -> call component’s constructor. How does the injector know how to make a service? -> Registration: via module or component
- Most front-end applications communicate with backend server over the HTTP protocol. Use: import HttpClientModule from ‘@angular/common/http’ -> inject HttpClient to component or services.
- How does it navigate from list to detail view? The Angular Router enables navigation from one view to the next as users perform application tasks. After the end of each successful navigation lifecycle, the router builds a tree of ActivatedRoute objects that make up the current state of the router. You can access the current RouterState from anywhere in the application using the Router service and the routerState property: access parameter via router.
- You can write and run Angular tests with a variety of tools and technologies. This guide describes specific choices that are known to work well.