Angular 笔记一、起步

发布时间：2020-12-17 08:29:20 所属栏目：安全来源：网络整理

导读：input绑定：要先在app.Module中导入FormModule，否则会Console会报错： Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’ import { FormsModule } from '@angular/forms' ;@NgModule({imports: [ ... FormsModule,.... 绑定input

input绑定：

要先在app.Module中导入FormModule，否则会Console会报错：Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
```
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [...
        FormsModule,....
```
绑定input，两种方法：直接使用ngModel或用input的事件辅助。
参考

<form class="form-inline">
    <div class="form-group">
        <label class="sr-only" for="inputNickName">NickName</label>
        <div class="input-group">
            <div class="input-group-addon">昵称:</div>
            <input type="text" class="form-control" id="inputNickName" [(ngModel)]="nickName" placeholder="NickName">
            <!--<input [(ngModel)]="nickName"> <input [value]="nickName" (input)="nickName = $event.target.value">-->
        </div>
    </div>
    <button type="button" class="btn btn-primary" (click)="Login()">进入聊天室</button>
</form>

运行后显示正常，但F12 Console会报错：
If ngModel is used within a form tag,either the name attribute must be set or the form control must be defined as ‘standalone’ in ngModelOptions.
链接

在一个form标签中使用f ngModel，必须设置name属性，或者在ngModelOptions中必须将表单控件定义为“standalone”。[ngModelOptions]=”{standalone: true}”

<input type="text" class="form-control" id="inputNickName" [(ngModel)]="nickName" name="NickName placeholder="NickName">
<!--或-->
<input type="text" class="form-control" id="inputNickName" [(ngModel)]="nickName" [ngModelOptions]="{standalone: true}" placeholder="NickName">

Angular使用toastr，消息提示插件。

Angular 4+ 使用 toastr：链接
Angular 5 使用toastr：链接
system.config.js 加入toastr map

'ngx-toastr': 'npm:_ngx-toastr@8.1.0@ngx-toastr/toastr.umd.js'

提示信息中文乱码：Typescript文件编码类型是ANSI，编译成js UTF8中文乱码，需将TypeScript文件调整成UTF8编码。
ts.config配置说明：参考

Angular版本升级

参考链接
package.json文件依赖版本更新
cnpm install

httpService

对Http请求配置，链接1，链接2，
资料
完后报错(index):30 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:1113/traceur。查阅资料 (1 2) ，可能是systemjs方面的问题。==》Angular已从4升级到5，下一步，用angular_cli取代systemjs。

angular_cli取代systemjs

Angular CLI 安装和使用
.angular-cli.json配置文件参数详解，详解2
systemjs加载方式换成angular_cli加载方式，就不能像使用systemjs.config.js 直接在index.html中添加js、css了。
systemjs的配置文件是system.config.js，angular_cli的配置文件是 .angular-cli.json，app的index要添加什么都在.angular-cli.json中配置了。angular-cli的web开发前后端的分离开发，刚用起来有点别扭，不知道怎么弄？查看从MVC到前后端分离。
理解前后单分离后，下一步，用Visual Studio Code写前段，Microsoft Visual Studio写后端。
Web前段开发好了要怎么发布？
1. 打包应用，一个命令，输出可部署的服务器上的文件，默认路径在dist目录

ng build

6. iis上新建网站，并浏览。

7. **如果是部署在现有IIS网站下的虚拟目录，必须删除index.html中的下面一段，否则js基本、图等资料会找不到。
<base href="/">

8. Hehe，眼睛一下就亮了，总算有头绪了。
—–====2018/1/11

重写以上

Angular-cli 使用Bootstrap，引入bootstrap的css可以在.angular-cli.json中添加。
ng build报错：BrowserslistError，可能是引入的bootstrap@4.0.0-beta.3的问题，Angular官方检测结果。angular-cli要升级到1.6.4才能解决此问题。
升级全局Angular-cli
1. 先卸载：npm uninstall -g angular-cli
2. 清理：npm cache clean （--forced）
3. 安装最新版本： npm install -g @angular/cli@latest
4. 检测版本：`ng -v
升级项目中的Angular-cli 版本(问题多，嫌麻烦，项目不大干脆另外新建一遍)
1. npm uninstall --save-dev angular-cli
2. npm install --save-dev @angular/cli@latest
3. npm install
按2 重新安装bootstrap，安装提示ootstrap@next有依赖没安装。
cnpm install ngx-bootstrap bootstrap@next --save
安装依赖。
cnpm install popper.jscnpm install jquery@1.9.1
ng serve 运行后总是不显示boostrap的样式，是因为用的cnpm安装的，使用cnpm安装的在.angular.cli.json 的Styles配置要带版本。参考。原因是：简单来说，npminstall 下的 node_modules 目录采用和 npm 官方 client 不一样的布局，主要是为了最大限度提高安装速度。参见1，2。
使用cnpm uninstall卸载前面用cnpm安装的，再用npm安装。如果npm安装报错： npm ERR! Maximum call stack size exceeded ，尝试升级npm再试。
npm 安装也真太慢，，还是用cnpm吧。
cnpm安装第三方插件 .angular-cli.json引用
Angular 5 +Angualr-CLI + bootstrap + toastr完成
文件
app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { FormsModule } from '@angular/forms';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';

@NgModule({
  declarations: [
    AppComponent
  ],imports: [
    BrowserModule,FormsModule,BsDropdownModule.forRoot(),BrowserAnimationsModule,// required animations module
    ToastrModule.forRoot(),// ToastrModule added
  ],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  constructor(private toastr: ToastrService) { }

  showSuccess() {
    this.toastr.success('Hello world!','Toastr fun!');
  }
}

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<button type="button" class="btn btn-dark" (click)="showSuccess()">
  Button
</button>
<div class="btn-group" dropdown>
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
    Button dropdown <span class="caret"></span>
  </button>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>

packages.json

{
  "name": "my-cliapp","version": "0.0.0","license": "MIT","scripts": { "ng": "ng","start": "ng serve","build": "ng build --prod","test": "ng test","lint": "ng lint","e2e": "ng e2e" },"private": true,"dependencies": { "@angular/animations": "^5.2.0","@angular/common": "^5.1.0","@angular/compiler": "^5.1.0","@angular/core": "^5.1.0","@angular/forms": "^5.1.0","@angular/http": "^5.1.0","@angular/platform-browser": "^5.1.0","@angular/platform-browser-dynamic": "^5.1.0","@angular/router": "^5.1.0","bootstrap": "^4.0.0-beta.3","core-js": "^2.4.1","ngx-bootstrap": "^2.0.0-rc.0","ngx-toastr": "^8.1.0","rxjs": "^5.5.2","zone.js": "^0.8.19" },"devDependencies": { "@angular/cli": "1.6.4","@angular/compiler-cli": "^5.1.0","@angular/language-service": "^5.1.0","@types/jasmine": "~2.8.3","@types/jasminewd2": "~2.0.2","@types/node": "~6.0.60","codelyzer": "^4.0.1","jasmine-core": "~2.8.0","jasmine-spec-reporter": "~4.2.1","karma": "~2.0.0","karma-chrome-launcher": "~2.2.0","karma-cli": "~1.0.1","karma-coverage-istanbul-reporter": "^1.2.1","karma-jasmine": "~1.1.0","karma-jasmine-html-reporter": "^0.2.2","protractor": "~5.1.2","ts-node": "~3.2.0","tslint": "~5.9.1","typescript": "~2.5.3" } }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!