一个自己能看懂的错误很多的angular2自学笔记

angular2js 学习笔记

Angular-CLI 安装配置
利用淘宝镜像安装angular-cli:
npm install -g angular-cli –registry=https://registry.npm.taobao.org

如果安装失败过，最好在安装angular-cli之前先卸载干净，
npm uninstall -g angular-cli
npm cache clean

在检查全局的npm文件下还残留ng和ng.cmd，删掉后再安装最新的angular-cli。
node.js 安装 配置path环境变量
nom install -g typescript typings 全局安装typescript
npm install -g @angularjs/cli 全局安装最新的angular-cli
npm config list 查看配置
npm config set proxy 设置代理
npm config delete proxy 删除代理
安装成功：
ng --version
ng help 查看帮助
ng new project01 创建工程
ng serve 开启项目服务
ng g c user 创建user组件
Angular 三大核心 Component组件，Module模块，Router路由
Component ng g c user 创建UserComponent
先执行 构造函数 constructor
再执行 初始化函数 OnInit
Module ng g m role 创建 RoleComponent
@NgMoudle ({装饰器类 描述模块属性的元数据对象
declarations: [//视图类，组件，指令等
AppComponent, //根组件
。。。。
],
import: [ //导入其他的模块
BrowserModule, //浏览器访问模块
RouterModules,//自定义的路由模块
FormsModule, //导入表单模块
]，
providers: [
UserService //服务提供者
]

Router ng g r route 创建route路由
import { TeacherComponent } from './teacher/teacher.component';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin/admin.component';
import { RoleAdminComponent } from './admin/role-admin/role-admin.component';
import { AuthAdminComponent } from './admin/auth-admin/auth-admin.component';

const routes: Routes = [
{ path: "teacher", component: TeacherComponent},
{ path: "admin", component: AdminComponent , children: [
{path: "role-admin", component: RoleAdminComponent},
{path: "auth-admin", component: AuthAdminComponent}

] },
{ path: "", redirectTo: "./user/forget-password", pathMatch: "full"}
];

export const RouterRoutes = RouterModule.forRoot(routes);
<router-outlet></router-outlet>
<a [routerLink]="['/admin']">admin</a>
<a [routerLink]="['/teacher']">teacher</a>
<a href="" [routerLink]="['/admin/role-admin']">roleadmin</a>
<a href="" [routerLink]="['/admin/auth-admin']">authdmin</a>

组件和模板之间的传值
{{}} [] ()
[] ts->html
[()]双向绑定
父子组件传值
父组件-->子组件
父组件定义：
name: string ;
this.name = "tom";
父组件html调用子组件标签<app-zizujian [getName]='name'></app-zizujian>
在子组件ts中
@Input() getName: string;
子组件html中{{getName}}
子组件-->父组件
子组件:html <a (click)="hello()">click</a>
ts @output b =new EventEmitter<any>();
this.b.emit("msg");
父组件：html <app-zizujian (b)="fu($event)"></app-zizujian>
ts fu(event){
alert(event);
}

指令：
ngClass [ngClass]="currentClass" class="col"
ts currentClass={};
ts this.currentClass={col:false};
css .col{ color: "red"}
ngIf
ngFor
ngSwitch

创建服务 ng n s test1 创建test1 服务；

引入jQuery包：
模块化引入：
添加 jQuery包 npm install jquery --save
载入包 npm install @types/jquery --save
引入jq
import * as $ from "jquery"
以插件形式引入：

实际项目中是一个组件树

 

转载于:https://www.cnblogs.com/xiaocainiaohuzhuo/p/8315527.html