It is recommended to start programming Angular 2 using TypeScript. Angular 2 has ES5 API, but Angular 2 is written in TypeScript and most people use TypeScript. Writing Angular 2 with TypeScript is more beautiful and easy.
Angular ' s Dependencies// Installing Nodejs // Installing TypeScript Install typescript-g// Windows user recommended installation Cygwin
Angular 2 is itself a JavaScript file and requires a lot of dependencies to run it. To use Angular 2, you don't need to fully understand every dependency, but you have to introduce them.
Angular 2 relies heavily on 4 libraries:
<Scriptsrc= "Node_modules/es6-shim/es6-shim.js></script><script src="Node_modules/angular2/bundles/angular2-polyfills.js></Script><Scriptsrc= "Node_modules/systemjs/dist/system.src.js></script><script src="Node_modules/rxjs/bundles/rx.js></Script><Scriptsrc= "Node_modules/angular2/bundles/angular2.dev.js></script># ES6 shim# Angular 2 polyfills# systemjs# rxjsfirst Project
Establish app.ts. Then the browser does not know how to run the. ts file, so we need to compile the. ts file into a. js file.
// /<reference path= "node_modules/angular2/ts/typings/node/node.d.ts"/> // /<reference path= "node_modules/angular2/typings/browser.d.ts"/>import {bootstrap} from "angular2/ Platform/browser "Angular2/core"; @Component ({ ' hello-world ', Template: ' <div> HelloWorld </div> '}) class HelloWorld {} bootstrap ( HelloWorld);TypeScript is a type of JavaScript. In order to be able to use angular in our browser, we need to tell TypeScript where the compiler needs to find typing files. The reference tag declares the path to typing files (ending with. d.ts).
The import tag defines the module (modules) that we use in our code. Here we introduce two modules: Component and Bootstrap.
We introduced conponent from "Angular2/core". The "Angular2/core" module tells the program where the dependent location is needed. We also introduce bootstrap from "Angular2/platform/browser".
Note the structure of the import syntax is import { things } from wherever .
One of the core concepts of Angular 2 is component.
In the Angular application we use HTML Markup language to build the interaction of the app, but the browser recognizes only a few tags, such as, the <select> <form> <video> functional tags defined by the creator of the browser. But what if we want to teach the browser some new tags? What if we want to have a <weather> label to show the weather? Or do we need a <login> tab to create a landing panel?
This is the idea behind components: we teach the browser to use new tags with new features.
The first component we create when we use our components in an HTML document:
So how do we actually define a new component? A basic component consists of two parts:
- A Component Annotation
- A Compontent Definition Class
Adding a templatebooting our applicationbootstrap(HelloWorld);The app will be launched. The 1th hidden implication is that the main component of our app is the HelloWorld component.
Once the application is loaded (bootstrapped), the fragments in the index.html file will be rendered by the HelloWorld component.
Loading our ApplicationTo run our app, we need to do two things:
- We need to your HTML document to import our app file
- We need to the use of our component
In the <body> add:
<Script>System.config ({packages: {app: {format:'Register', Defaultextension:'JS' } } }); System.import ('App.js'). Then (NULL, Console.error.bind (console));</Script><Hello-world></Hello-world>Running the appcompiling the TypeScript Code to. jsserving the appadding Data to the ComponentNot to be continued ...
Angular 2 Study notes (i)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
