I presented it at my company to give them a brief introduction of Angular 2, which were published officially recently. TypeScript is using in Angular 2 by default to extend a lot of benefits on writing best code.
5. Single Page Application
AngularJS start parsing, downloading template,
stylesheet, etc. and doing compiler on the browser
11/1/2016 Zyllem@Angular 2
7. What is Angular?
• Angular is JavaScript framework.
• Building client side application.
• Using HTML,CSS and a programing language such as
JavaScript.
11/1/2016 Zyllem@Angular 2
9. Why Angular 2?
11/1/2016 Zyllem@Angular 2
• Performance.
• Component Based-UI. No more concept of controllers
• Goodbye $scope
• Modern – using new features – classes, object with support of
ES6 / TypeScript
12. Component
11/1/2016 Zyllem@Angular 2
• View layout
• Created with
HTML
• Includes
binding and
directive
• Code supporting the
view
• Created with TypeScript
• Includes
• Property - data
• Method - logic
• Extra data
• Defines with
decorator
16. Available Language
11/1/2016 Zyllem@Angular 2
• ES5(EcmaScript 5) – Run in the browser.
• ES6(EcmaScript 2015) – Lots of new features (classes, let,
arrow)
• TypeScript – Superset of JavaScript, Strong typing, IDE
• Dart.
17. TypeScript
11/1/2016 Zyllem@Angular 2
• Open source language.
• Superset of JavaScript.
• Transpiles to plain JavaScript.
• Strongly typed.
• .ts Extension.
• Class-Based object orientation.
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.
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.
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(){ }
A component controls a patch of screen called a view/template.
Example
App root with Navigation
List of Delivery
Delivery detail
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
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