learning angular2



1: Clear Environment

 >node –v
C:\Users\jchen>del %USERPROFILE%\.npmrc
Could Not Find C:\Users\jchen\.npmrc
 >rmdir /s/q "c:\Program Files\nodejs"
c:\Program Files\nodejs\node_perfctr_provider.man - Access is denied.
c:\Program Files\nodejs\npm - Access is denied.
c:\Program Files\nodejs\npm.cmd - Access is denied.
Access is denied.
> rmdir /s/q "%APPDATA%\npm"
C:\Users\jchen\AppData\Roaming\npm\NODE_M~1\vs-tac\NODE_M~1\cordova\4300A3~1.0\NODE_M~1\cordova\NODE_M~1\CORDOV~1\NODE_M
~1\CORDOV~1\NODE_M~1\BROWSE~1\NODE_M~1\BROWSE~3\NODE_M~1\COMBIN~1\NODE_M~1\INLINE~1\NODE_M~1 - The directory is not empty.
>rmdir /s/q "%APPDATA%\npm-cache"

Go Control Panel\All Control Panel Items\Programs and Features uninstall nodejs
Manually remove "%APPDATA%\npm" and "%APPDATA%\npm-cache"


2. Install Nodejs

Download the file node-v7.7.2-x64.msi from https://nodejs.org/en/download/current/

3. npm config

Ref: https://my.oschina.net/mumu/blog/834254
npm config list
npm config ls -l
npm config set proxy=''
npm config delete proxy

4. Install angular-cli

Summary: > npm install -g @angular/cli
>npm install -g angular-cli   (> npm install -g @angular/cli 用这个命令比较好)

>dir %AppData%\npm\

>ng --version
@angular/cli: 1.0.0-rc.1
node: 7.7.2
os: win32 x64

>ng help
Cannot find module 'rxjs/symbol/observable'
Error: Cannot find module 'rxjs/symbol/observable'
>npm uninstall @angular/cli –g
>npm cache clean

>npm uninstall -g angular-cli @angular/cli
https://github.com/angular/angular-cli/issues/4363#issuecomment-280358407
Clean up
    remove node_modules from your project
    remove any angular-cli and @angular/cli references from package.json if it's there
    Uninstall angular-cli and @angular/cli globally: npm uninstall -g angular-cli @angular/cli

Reinstall
    Install @angular/cli globally: npm install -g @angular/cli
    Install @angular/cli in your project: npm install --save-dev @angular/cli

> npm install -g @angular/cli

>npm install –g @angular/cli
C:\Users\UserName\AppData\Roaming\npm\node_modules\@angular\cli
C:\Users\UserName\AppData\Roaming\npm-cache\node-sass\
--@angular/cli@1.0.0
 




>npm install –g typescript
g into C:\Users\UserName\AppData\Roaming\npm\node_modules\typescript\bin\tsserver
C:\Users\UserName\AppData\Roaming\npm\  -- typescript@2.2.2npng
 


5. create new project

>ng new my-project1

Installed packages for tooling via npm.
Project 'my-project1' successfully created.

>ng new --routing --prefix dboard dashboardAC
 


6.start to run the project

>cd my-project1
>npm install   (I did not run this command npm. When running ng new, it shows “Installed packages for tooling via npm.”)
>ng serve
  For product
  >ng  serve --prod –aot //Ahead-of-time and Tree Shaking compilation

7. For test cases for testing

>ng test

8. Build the project

ng build --prod --aot

ng build --deploy-url /hotest/a1/ --base-href /hotest/a1/ -aot -prod
产品发布到目录 「\dist」 中

Reference:

. ng
npm install -g gulp yo webpack rimraf
npm install -g typescript typings angular-cli
npm install -g eslint tslint

*ngIf  and [hidden]
[attr.colspan] and [anywords]
[attr.data-anywords]

评论

发表评论

此博客中的热门博文

XML, XSL, HTML

The code in this section is that an XSLT transform is used to translate XML input data to HTML output. Ref: https://docs.oracle.com/javase/tutorial/jaxp/xslt/transformingXML.html Note - The article1a.xsl , which is from in XSLT examples . The following code is for joy.  import java.awt.Desktop; import java.io.*; import java.net.URISyntaxException; import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import javax.xml.parsers.ParserConfigurationException; import javax.xml.transform.Transformer; import javax.xml.transform.TransformerConfigurationException; import javax.xml.transform.TransformerException; import javax.xml.transform.TransformerFactory; import javax.xml.transform.dom.DOMSource; import javax.xml.transform.stream.StreamResult; import javax.xml.transform.stream.StreamSource; // For write operation import org.w3c.dom.Document; import org.w3c.dom.Element; import org.xml.sax.SAXException; public class Stylizer { ...
阅读全文

Input in element.eleme.io

Input Input data using mouse or keyboard. Input is a controlled component, it always shows Vue binding value . Under normal circumstances, input event should be handled. Its handler should update component's binding value (or use v-model ). Otherwise, input box's value will not change. Do not support v-model modifiers. ¶ Basic usage < el-input placeholder = "Please input" v-model = "input" > </ el-input > < script > export default { data() { return { input : '' } } } </ script > Hide ¶ Disabled Disable the Input with the disabled attribute. < el-input placeholder = "Please input" v-model = "input" :disabled = "true" > </ el-input > < script > export default { data() { return { input : '' } } } </ script > ¶ Clearable Make the Input clearable with the...
阅读全文

Data URI是由RFC 2397 ACE

https://www.rfc-editor.org/rfc/rfc2397 http://codingpy.com/article/how-to-turn-your-browser-into-code-editor/ https://ace.c9.io/build/kitchen-sink.html https://c9.io/ https://angular-ui.github.io/ The "data" URL scheme Status of this Memo This document specifies an Internet standards track protocol for the Internet community, and requests discussion and suggestions for improvements. Please refer to the current edition of the "Internet Official Protocol Standards" (STD 1) for the standardization state and status of this protocol. Distribution of this memo is unlimited. Copyright Notice Copyright (C) The Internet Society (1998). All Rights Reserved. 1 . Abstract A new URL scheme, "data", is defined. It allows inclusion of small data items as "immediate" data, as if it had been included externally. 2 . Description Some applications that use URLs also have a need to embed (small...
阅读全文