It wasn't until a year ago that I didn't think I'd write a book, until two or three years ago I wouldn't have thought of putting my spare time on a writing (technical blog). At the beginning, I just wanted to summarize the problems I encountered in my work and publish them in my blog for future reference. Do not want to get everyone's approval, so more intentions to maintain, update their blog.Recently joined the new project team is responsible for front-end technology pre-research and selection
By learning these concepts, you can simply describe a tab button for an option feature:Data:1. Arrays:Instantiate a class of an array, if you want to use the data in this class, you need to use a public property in the component to storm the class such as heroes=heroes;Const Array Name heroes: Data structure in array =[]Command instructions1.*ngfor= "Let value of Arr/json" ==> {{value}}2. (click) = function name (parameter)Module template syntax for angular: https://www.angular.cn/docs/ts/latest
-of]= "items" #item = "" #i = "index">2 [{{i+1}}] {{item}} 3 Now the resulting results are more disciplined:1 2 3 Grammar sugarSimilar to Ngif, ANGULAR2 also provides two syntactic sugars for ngfor:1 // using template attribute 2 template= "ng-for #item of items; #i =index">...3// Use the * prefix 4 *ng-for= "#item of items; #i =index">...There is no doubt that you should try to use *ng-for 's simple notation, which can improve the readability of
Angular2: about * ngFor nested loop, angular2ngfor
The data obtained in the project development should be traversed cyclically. However, in ng2, it seems that the Object cannot be traversed directly.
datas: any = [ { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"}, { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"}, { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "
ANGULAR2 has two of the more useful upload files of the third-party library, one is ng2-file-upload , one is ng2-uploader . ng2-uploaderis a lightweight upload file support library, the function is weak, but ng2-file-upload is a feature more comprehensive upload file support library. Here ng2-file-upload is the main introduction of the use.The following are described in the Mac OS operating system.1. InstallationInstall with NPM. To open terminal in t
return an array of routing links. The router will eventually parse the array into a URL and a component view.
We can also add a routerlinkactive directive to
Appcomponent templates
Template: '
6. Router Status
At the end of each navigation lifecycle, the router builds a activatedroute tree that represents the current state of the router. We can access the current Routerstate value in any application using the router service and its routerstate properties.
7.router_directives
The purpose of the angular module is to organize the logical structure of the app.
The class used by @ngmodule in Ng is considered to be a NG module. Ngmodule can manage components, directives, pipes within the module, introduce service, and control the access of external components to internal members.
ANGULAR2 has the concept of the module, and responds to the call of the backstage program, cohesion well-structured classes the low coupling. Module
() {
this.info=student;
}
HTML:
In property bindings, a value is passed from the model to the target property on the screen. We mark the target property by enclosing the name in square brackets, []. This is a one-way data binding from the model to the view.
In event bindings, values are passed from the target property on the screen to the model. We mark the target attribute by enclosing the name in parentheses, (). This is a reverse one-way data binding from view to model.
When the bindi
JavaScript is the typescript code that is available. Exceptions: the WITH () function and the const keyword for firefox. Variable types cannot be changed dynamically
Variables that do not use VAR in the variable JS are global variables TS inside this will be an error. TS Global variables need to declare var myvar = 0 at the highest level of the program;
Type TS has optional type detection: main type, array, enum, type strong
Interface TS int
Forced type conversions for typescript
Converting a number to a string in typescript will cause an error:
var a:number = 12345;var b:string = Laygroundsingle.ts (24,18): Error ts2352:neither type ' number ' nor type ' string ' is assignable to the other.
This writing is not an error, but there are no eggs to use:
var a:number = 12345;var b:string = Console.log (typeof B)"Number" playgroundsingle.js:19:1
the reader can organize the code according to his own ideas, thus writing a new game engine. Plus now with the typescript tool, you can intuitively use the "class definition" syntax and provide compile-time type checking and code refactoring to help you write concise code and improve development efficiency.So I used typescript to reorganize and write the sample code in the book, and to add some of my own d
This article will briefly introduce several basic types of typescript.
There are several basic types of typescript:
Boolean
Number
String
Array
Tuple
Enum
Any
There is also a void type, which is primarily used to identify the type of the method return value.Here are some simple examples to illustrate the basic usage of these types1 //
Decorators is a feature of TypeScript that is becoming more and more common in many major libraries. This lesson walks-through what decorators is and how to create your own.Nomarl to decorate a object:Const PERSON = {name: ' John '}; function Addage (age) { returnfunction(person) { return { , name:person.name } = addage (person); Console.log (John);//{name: "John", age:30} In
A recent project, the use of typescript to write JS script, the results are riddled with errors, repair also let me summarize the TS in how to use this.
TS provides static types similar to C # and Java (strongly typed), declaring a function directly in global and namespace global and using the Functions keyword (which is the function keyword of JS), while in class you cannot use function to declare a method. Let's compare it to the C # difference
This article describes how to define and use methods in Typescript.
I. Method standard declaration and use1 // Method Declaration 2 function func (X:number, Y:number): number {3 return x + y; 4 }In Typescript, a method declaration can clearly define the type of each parameter, and the type of the return value. At compile time, the compiler checks whether the return value type of the method body con
One of the core design principles of TypeScript is the type check, which can be checked through Interfaces to satisfy the traditional Object-oriented Thinking, facilitate effective development and effectively avoid type conversion problems. In TypeScript, interfaces are used as constraints. When compiled into JavaScript, all interfaces are erased because JavaScript does not have interfaces.
Let's take a lo
1, install sublime text3, there are many online, can also leave contact and I want to, I do not know how to upload the file here, know the pro can tell me a bit. 2, download typescript, Address: https://visualstudiogallery.msdn.microsoft.com/2d42d8dc-e085-45eb-a30b-3f7d50d55304, installation.3, here the key introduction several sublime Text3 development typescript plug-in1, t3s,: Https://github.com/Railk/T3
ClassIn typescript, a structure similar to C #, where multiple classes can exist in a file, and the filenames can be arbitrarily taken, let's look at a simple example of a class.1 class Person {2 private name:string;3 private age:number;4 5 Public Constructor (name:string, Age:number) {6 This. Name =name;7 This. Age =Age ;8 }9 Ten Public talk () { OneAlert ("Hi, my name is" + This. Name + ", I am" + This. age.tostring () + "!");
may be more convenient and faster. Why use ES5,ES6,TypeScript to demo ? Let's introduce these three concepts:ES5: Full Name ECMAScript5, which can be understood as our regular JavaScript(in fact JavaScript also contains the DOM and the BOM ), which is currently supported by most browsers JavaScript syntax characteristics, in ES5 before that, there was ES3 . ES6: It is the ECMAScript Language Specification , which expands the new grammatical feature
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.