The composition of the MVVM framework: Data binding, repertoire, component-based programming, routing and navigation, state preservation, third-party component libraries |
AngualrJS v1.x official website: https://angularjs.org
Angular v2.x and above official website: https://angular.io Chinese mirror official website: https://angular.cn
AngularJs development method: ①script introduction ②scaffolding method
Angular development method: ①scaffolding method
Build the Angular environment:
Prerequisites: ① Install the corresponding version of node and npm ② Understand typeScript
npm install -g typescript # 安装最新的TypeScript稳定版
1. Download and install the scaffolding tool (one computer only needs to be installed once)
Default repository: registry.npmjs.com
Tips: Use a third-party npm download repository View the current npm default download warehouse address: npm config get registry Modify the default download warehouse address of npm to the domestic mirror website: npm config set registry new warehouse address For example, you can use the npm image provided by Taobao: npm config set registry https://registry.npm.taobao.org |
npm install -g @angular/cli
By default, it is installed in the installation package of C:\Users\{User}\AppData\Roaming\npm
All global tools are installed to the above paths and cannot be modified.
Common problems when downloading scaffolding: ①ENOENT:no such file or directory,access to C:/User/...Roaming/npm Solution: Log back in with an administrator account ②npm ERR:Cannot read property resolve of undefined Solution: try again later, or change the warehouse address ③git command not found Reason: For versions above v8.x, angular creates a .git file by default, and uses git to manage projects Solution: Just install git on the computer, and it will not affect the use of angular if it is not installed |
2. Run the scaffolding tool to create a blank project
ng new my-app
Select the file directory to save the project, and create
3. Enter the blank project and run the development server
cd my-app
npm start
ng serve
The command starts the development server, watches the files, and rebuilds the app when those files change.
--open
(or just -o
the abbreviation) option will automatically open your browser with access http://localhost:4200/
.
--port 3000 选项会修改默认端口号,
access http://localhost:3000/
4. Client access test
http://localhost:4200
http://127.0.0.1:4200