Angular - 框架

--------------------------------------------------- 环境

安装NodeJS nvm 等

安装vscode : https://code.visualstudio.com/   安装后引用 nodejs snipets

npm intall -g @Angluar/cli   -- 安装Angualr 脚手架 Command LIne Interface  使用cmd/administraotgr

Visual Code 中可能运行不了 ng command -> 以管理员身份运行PowerShell,执行:set-ExecutionPolicy RemoteSigned  解决

卸载及清楚缓存

npm uninstall -g @angular/cli      --&&--   npm cache clean

安装指定版本:

npm install -g @angular/cli@1.5.2

新建项目

ng new xxxx

安装 全局Module.

npm install  

Your global Angular CLI version (13.1.2) is greater than your local version (11.2.5). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".

npm config get registry

npm config set registry https://registry.npm.tabao.org

--------------------------------------------------

 

Angular.json -> index.html and main.ts (->bootstrapModule(AppModule))  -> app.module.ts (bootstrap(AppComponent))

       ->app.component.ts(selector:app-root, templateUrl:'app.component.html')

       Angular中Module即容器,可以存放组件Component

 

 

import { Component, ElementRef, OnInit, Renderer2 } from '@angular/core';
//@Component装饰器 就相当于函数
@Component({
  selector: 'app-root',  // 选择器 'aap-root' 当成Element ; '[app-root]' 当成属性使用; '.appRoot' 当成类< xx class=yyy>使用 
  template: ` <router-outlet></router-outlet> `,
})
export class AppComponent implements OnInit {
...
}

 

创建组件Component:

  ng component 

       在某个module中注册该组件

       使用已注册的组件

posted @   Hai-Zhong  阅读(61)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示