Angular2 It's an open source JavaScript library , from Google maintain , Used to create page applications . Issued on 2016 year 9 month , be based on ES6 Development .

One 、 preparation

Use Angular2 Development , You need to do some configuration in advance , Such as NPM、Node.Js、Git etc. , Also right TypeScript Have a general understanding of .

a)NPM It's with NodeJS Package manager installed with , That should be similar NuGet The role of the .NPM Integrated in the NodeJS Installation package , Can be installed together , stay CMD Input npm –v and node –v You can verify that .

b)TypeScript It's an open source programming language developed by Microsoft , yes JavaScript Super , Expanded JavaScript The grammar of , And it's strongly typed .TypeScript Installation , You can download the installation package , It can also be in CMD Input $ npm install -g typescript install .

c) Use TypeScript To write HelloWorld

establish index.html The documents are as follows , quote hello.js. It doesn't exist right now hello.js, Need from TypeScript Compiling hello.ts Compile the generated .

hello.ts The file is just simple alert, You can't see it here typescript The characteristics of grammar .

And then in CMD Add the location of the file and execute tsc hello.ts, In the current folder hello.js,index.html It's ready to run .

d) And install Git, By the way, I installed GitExtension and TortoiseGit.

Two 、 Start Angular 2

a) Use Git Bash, Create project storage path . Then create... In the directory package.json、tsconfig.json、typings.json file , The content can be found in Angular2 Of GitHub Or copy the sample code of this book .

And then you need to perform npm install Install dependent components , But it can't be used directly in China npm, You can install the image of Taobao first $ npm install -g cnpm --registry=https://registry.npm.taobao.org, And then execute cnpm install,cnpm Will be based on package.json Download the components you need to rely on .

b) newly build index.html The content is :

At present, only those that need to be referenced are added js and css, Nothing else . It's necessary to learn about adding these js The purpose of reference .

ES6Shim,Shim It means gasket , The main purpose of this file is to ensure compatibility with older browsers . For supporting the latest ES6 Standard browser , You don't need this file .

Zone, Maybe the effect is to make Angular Be able to detect changes in data , We can't get to know more about .

ReflectMetadata,Angular2 Use Typescript Language ,TypeScript With type annotations (Annotation), This reference is added to be able to use these annotations .

SystemJs, Is a module loader , Used to create modules and resolve dependencies between modules .

c) Next create TypeScript file app.ts,.ts The file is then compiled into .js file .

Use import{things} from “where” The format of , Add dependency .

Angular2 The most important feature of is the component (component). Under normal circumstances , A browser can only recognize a browser that belongs to html The tag , such as <form>、<ul> etc. , If you want a browser to recognize one <hello-world> label , It's impossible by common sense , But it's really Angular2 What the components of , namely “ Teach browsers to recognize new tags ”.

In the picture above @Component A component is defined in ,selector Property specifies DOM The element is the name of the label , When compiling, the corresponding component will be found for processing .

template Property to specify the template , Inverted quotation marks for templates ( `…` ) Cover up , The inverted quotation mark syntax is ES6 New features , Supports multiple lines of characters .

On the last line bootstrap(HelloWorld); Set the program's “ entrance ” by HelloWorld Components , After the program starts ,HelloWorld Will be rendered first .

Learning materials :The Complete Book on AngularJS 2 by Ari Lerner, Felipe Coury, NateMurray, Carlos Taborda

Angular 2 Basics ( One ) More articles on environment construction

  1. Centos Basic development environment construction Maven Private clothes nexus

    hmaster install nexus And start mode /usr/local/nexus-2.6.3-01/bin ./nexus status Centos Basic development environment construction Maven Private clothes nexus . Software   ...

  2. Angular Conclusion 1 : Environment building

    If a worker wants to do a good job, he must sharpen his tools first , Development Angular The first thing for a project is to build an environment .Angular There are three aspects in the construction of the environment , development environment WebStorm, Command line tools Angular CLI, as well as nodejs. One . install ...

  3. Python Basics 1-Python Environment building

    Python First of all, input through the terminal window "python" Command to see if it has been installed locally Python as well as Python Installation version of : If not, you need to download and install , The following is linux and windo ...

  4. Big data foundation -2-Hadoop-1 Environment build test

    Hadoop Environment build test 1 Install the software 1.1 Planning catalogue /opt [root@host2 ~]# cd /opt [root@host2 opt]# mkdir java [root@host2 o ...

  5. .Net Core + Angular Cli / Angular4 Development environment construction

    One . Basic environment configuration 1. install VS 2017 v15.3 Or above 2. install VS Code The latest version 3. install Node.js v6.9 Above version 4. Reset the global npm Source , Amend to read Taobao's NPM Mirror image : npm  ...

  6. .Net Core+Angular Cli/Angular4 Development environment building tutorial

    One . Basic environment configuration 1. install VS2017v15.3 Or above 2. install VSCode The latest version 3. install Node.jsv6.9 Above version 4. Reset the global npm Source , Revised to Taobao's NPM Mirror image :npminstall-gcnpm ...

  7. Angular2.0 Basics : Environment building

    Studying recently Angular2 Use , Actually, I have seen Angular2 I know all about the documents , Compared with the previous Angular1,Angular2 It's a big change . And for ‘angular2 In the construction of the local development environment , Our first ...

  8. 【1】 Learn step by step Zabbix : First knowledge and foundation depend on environment construction ( LNMP )

    Let me write it out front Operation and maintenance monitoring is a big topic , In this area, the more prominent services of personal contact mainly include Nagio and Zabbix Two paragraphs . And the companies that have been skipping over the past few years ,Zabbix Always the first and only choice ,Nagios No, I didn 't . ...

  9. openstack(liberty): Deploy the experimental platform ( One , Basic network environment construction )

    openstack Project research , To this day , It's time to enter the real world , It's time to deploy the experimental platform . No more devstack 了 . in other words , Be independent controller,compute,storage and network 了 . To do this ...

Random recommendation

  1. html5 canvas Note 4 ( deformation Transformations)

    Drawing complex graphics is an indispensable method save() preservation canvas state restore() recovery canvas state Canvas The state of is a snapshot of all styles and deformations applied to the current screen . Canvas The state of ...

  2. Two dimensional linear table list Realization

    class Coordinate{ private int x; private int y; } List<Coordinate> list=new ArrayList<Coord ...

  3. Redisson Simple use of distributed locks

    One : Preface I have encountered such a problem in the actual environment , Distributed generation id The problem of ! Because of business logic , I have a build id Methods , It's based on the business ID +id As a unique value ! and uuid It's incremental , from 1 It's going to increase all the time , So on the same machine ...

  4. jQuery Implement cross domain requests

    We all know ,xhr(XMLHttpRequest) Cross domain is not allowed . and jQuery Of ajax The method is based on xhr Of , therefore , You can't use it directly across domains . General , We use it as follows $.ajax Methodical : $.ajax( ...

  5. 2018.11.01 NOIP Training Increasing sequence ( Iteration deepening )

    Portal Direct iteration deepens the search . It's found to double at most each time , At least one more , So decisively cut the upper and lower bounds . Code

  6. [iOS The problem comes down to ]iPhone Problems with uploading projects

    1. When uploading projects ,UpLoad App Store Pop up after iTunes Store operation failed. The reason for the error : you are here ItunesConnect(https://itunescon ...

  7. 【poj3420】 Quad Tiling

    http://poj.org/problem?id=3420 ( Topic link ) The question give $n*m$ The grid of , use $1*2$ How many schemes are there for the block coverage of . Solution The data is very big , We can't do it directly , Let's multiply .0 ...

  8. 【BZOJ】2440: [ Zhongshan City 2011] Complete square

    [ The question ]T The first time I asked k The number of a small multiple of incomplete squares .T<=50,k<=10^9.( It's Square free —— The prime factor exponents are 0 or 1 Number of numbers ) [ Algorithm ] number theory ( Mobius function ) [ Answer key ] Consider dichotomy , Turn it into asking [1,x ...

  9. Picture larger than div In the middle of

    When the picture is larger than div when , Want the picture to be centered , If the image is scaled down, it may not fill the whole image div, If you don't set the width and height of the picture directly , Put it on the outside div Set up overflow:hidden: At this point, even the outer layer div Set up a horizontal and vertical house ...

  10. Link-based Classification Related data sets

    Link-based Classification Related data sets Datasets Document Classification Datasets: CiteSeer: The CiteSeer dat ...