Angular for mvc-Project Construction (1)

Today is ready to use ANGULAR+MVC to create a project, found that the last study about angular all forgotten, suddenly think of the last time I made up a blog post, looked at it did not recall the details.
Helpless, re-study on one side, this time is the practice side of the record, I hope that in a while I come again, I hope to help. That's why I want to record a blog. conducive to temperature.
If you feel useful, do not spray, thank you!

1. Create an MVC Project

2. Create a angular project

2.1 First install angular environment

Download install node. js and npm,:https://nodejs.org/en/download/(Run command in console window node -v and npm -v  显示版本号安装成功 )

　　　　

Install Globaltypescript，安装命令： npm install -g typescript 

　　　　

InstallationAngular CLI，安装命令：npm install -g @angular/cli （测试是否安装成功 ng -v）

　　　　
　　　　如果之前安装过angular但是不能用，重新安装之前执行如下操作，卸载angular，卸载命令：npm uninstall -g @angular/cli ,清缓存命令：npm cache clean

　　　　如果执行了上述指令还是没用的话，建议执行玩命令，把npm文件下的node_modules\@angular文件夹删除，再试试
　　　　　　

Create angular project run instruction ng new project name (example: Ng new App1)
　　　　

The project is created successfully, the build runs, and the following commands are executed: NG Serve-open
　　　　

3.mvc+angular Project successfully built, red box right click Restore Package



3.1 Delete redundant files. No files. If you are not sure to delete those, it is recommended to refer to the official instance address: Https://www.angular.cn/guide/setup
My method of operation, the official case of theNon-Essential-Files.TXT file put to my local project, in the command to execute his
For /F%IInch (non-essential-files. do del % i /f /s /q
Rd . git /s /q
Rd e2e /< Span class= "PLN" >s /q
3.2 Final project structure, in addition to MVC and red box angular related

4.vs direct Run effect display


Summary: Before we developed the way that angular is used by command generation each time, the benefits of this approach can be generated directly in VS, to increase the speed of development.
Note: According to the official case may be error,

Workaround: Configure the path of the RXJS in Systemjs.config.js (see below for reference only)

/** * System configuration for Angular samples * Adjust as necessary for your application needs. */(function (global) {System.config ({paths: {//Paths serve as Alias ' NPM: ': ' Node_modu Les/'},//map tells the System Loader where to look for things map: {//Our app are with In the App folder ' app ': ' app ',///angular bundles ' @angular/core ': ' NPM: @angular/core/bu Ndles/core.umd.js ', ' @angular/common ': ' NPM: @angular/common/bundles/common.umd.js ', ' @angular/compil Er ': ' NPM: @angular/compiler/bundles/compiler.umd.js ', ' @angular/platform-browser ': ' NPM: @angular/platform-brows Er/bundles/platform-browser.umd.js ', ' @angular/platform-browser-dynamic ': ' NPM: @angular/platform-browser-dynami            C/bundles/platform-browser-dynamic.umd.js ', ' @angular/http ': ' NPM: @angular/http/bundles/http.umd.js ', ' @angular/router ': ' NPM: @angular/router/bundles/router.umd.js ', ' @angular/forms ': ' NPM: @angular/forms/bundles/forms.umd.js ',//other libraries ' Rxjs ': ' Npm:rxjs ', ' angular-in-memory-web-api ': ' Npm:angular-in-memory-web-api/bundles/in-memory-web-a Pi.umd.js '},//packages tells the System loader how to load when no filename and/or no extension PA                        Ckages: {app: {defaultextension: ' js ', meta: {'./*.js ': {            Loader: ' Systemjs-angular-loader.js '}}, ' RXJS ': {main: ' Index.js ', defaultextension: ' JS '}, ' Rxjs/ajax ': {main: ' Index.js ', defaultextension: ' JS '} , ' rxjs/operators ': {main: ' Index.js ', defaultextension: ' JS '}, ' rxjs/testing ': {main: ' Index.js ' , defaultextension: ' JS '}, ' Rxjs/websocket ': {main: ' Index.js ', defaultextension: ' JS '},}}) (this);

　　

Related Information navigation:
Http://www.runoob.com/angularjs2/angularjs2-typescript-setup.html
Https://www.angular.cn/guide/setup
Https://www.youtube.com/watch?v=rbHSTJBhJ44
https://www.angular.cn/guide/visual-studio-2015

We're not finished.

The final reflection: The above is just a project to build the process, a lot of deep-rooted principles of things still do not understand, slowly in the study and practice summary.
(Does not write blog, feel like Journal, haha)

/span>

　　　　
　　　

　　　　

　　　　

 

Angular for mvc-Project Construction (1)