angular 与其他的差别
angular cli 安装
cnpm install -g @angular/cli
最新版本
cnpm uninstall -g @angular/cli
卸载全局版本
npm install -g @angular/cli@1.2.1
指定版本
环境报错 https://juejin.im/post/5aa0d8906fb9a028e25d2123
ionic 的安装
cnpm install -g cordova ionc
如果报错
npm install @ionic/app-scripts@latest --save-dev
项目解决问题
npm i --save-dev @angular-devkit/core
报错解决
"@angular/flex-layout": "^5.0.0-beta.13",
创建项目
ng new 项目名称
创建项目
cd 项目名
- cnpm install //
- cnpm install --by=npm
- ng serve --open // 直接打开 npm sr
快速删除 node_modules
- npm install rimraf -g
- rimraf node_modules
- rm -rf node_modules
项目结构分析
.angular-cli.json Angular CLI 的配置文件
.editorconfig 给你的编辑器看的一个简单配置文件
.gitignore 一个 Git 的配置文件
karma.conf.js 给 Karma 的单元测试配置
src 目录结构
app/app.component.{ts,html.CSS,spec,ts}
组件使用 HTML 模块, css 样式和单元测试定义 AppComponent 组件, 他是根组件
app/app.module.ts 定义 AppModule, 这个跟模块会告诉 Angular 如何申明组件
assets/* 静态文件
environments/* 这个文件夹中包括为各个环境准备的文件
favicon.ico 请把他换成你自己的图标
mian.ts 这是应用的主要入口点
jQuery 和 Bootstrap
安装 jQuery 和 Bootstrap
- npm install jquery --save
- npm install bootstrap --save
cnpm i -S bootstrap@3.3.7
指定版本
让 Typescript 类型识别 jquery 和 Bootstrap 类型的描述文件
- npm install @types/jquery --save-dev
- npm install @types/bootstrap --save-dev
在. angular-cli.josn 文件中的 apps 下 scripts 里分别写入
- "../node_modules/jquery/dist/jquery.min.js",
- "../node_modules/bootstrap/dist/js/bootstrap.min.js"
在全局引入 css 找到 style.css 文件. 写入全局样式
@import "~bootstrap/dist/css/bootstrap.min.css";
生成组件
在根目录运行
ng g component component/navbar
生成导航条组件 (在 component 下创建 navbar 组件) 并会 app.module.ts 里面添加这个组件并且声明组件
组件名 | 用途 |
---|---|
app | 项目自带的默认 component |
navbar | 网页 / APP 导航条 |
search | 搜索区域 |
product | 商品详情 |
stars | 星级评分 |
foot | 底部信息 |
打开我们的 app.component.html 把单页面应用的基本骨架搭建起来
组件
app.conponents.ts 这个组件
@Component 组件的装饰器
selector 用来定义组件渲染的标签名称, 说白了就是组件的名字
templateUrl 用来指定组件的模板文件
styleUrls 一个数组, 用来存放组件相关的样式文件
- import {Components.ts} from "@angular/core"
- @Component({
- selector:"app-root",
- templateUrl:"./app.component.html"
- styleUrls:["./app.component.css"]
- })
- export class AppComponent{
- title="app"; // 组件的数据, 或者函数
- }
- typescript
- npm install -g typescript
- <li *ngFor="let todo of todos"> {{todo.title}}</li> const todos=[{id:1,title:'小明',done:true}] <footer class="footer" *ngIf="todos.length"></footer> <ng-template [ngIf]="todos.length"></ng-template>
- ngClass="{类名: true}"
- // 可以跟双向双向绑定一起进行绑定 class
- <div id="{{msg}}">ffff</div>
- <div [title]="msg">鼠标喵上去</div>
- <div [innerHTML]="h"></div>
- // 可以识别 constructor 里面 this.h 的标签内容
- <li *ngFor="let item of list3;let key=index"> {{item.titlte}}---{{key}} </li>
- import { FormsModule } from "@angular/forms";
- imports: [
- FormsModule // 添加这个
- ],
- app-routing.module.ts
- import { RouterModule, Routes } from '@angular/router';
- import { FooComponent } from './foo/foo.component'
- import { BarComponent } from './bar/bar.component'
- const routes: Routes = [
- {
- path: '',
- redirectTo: '/contacts', // 当请求根路径的时候, 跳转到 contacts 联系人组件
- pathMatch: 'full' // 必须完全匹配到路径的时候才做重定向
- },
- // 路由嵌套导航
- {
- // 当我们访问 contacts 的时候, 会先把 LayoutComponent 渲染出来
- path: 'contacts',
- component: LayoutComponent,
- children: [
- {
- path: '',
- component: ContactListComponent
- },
- {
- path: 'new', // 这里的 new 的请求路径是 /contacts/new
- component: ContactNewComponent
- },
- {
- path: 'edit',
- component: ContactEditComponent
- }
- ]
- },
- {
- path: 'foo',
- component: FooComponent
- },
- {
- path: 'bar',
- component: BarComponent
- }
- ]
- @NgModule({
- imports: [
- RouterModule.forRoot(routes)
- ],
- exports: [ RouterModule ]
- })
- export class AppRoutingModule {}
来源: https://www.cnblogs.com/fangdongdemao/p/8972616.html