Angular4学习笔记(一)-环境搭建

下载nodejs

  • 下载地址
  • 在命令行输入:npm -v 如果出现如下画面即安装成功 Angular4学习笔记(一)-环境搭建

    安装Angular的cli命令行工具

  • 命令:sudo npm install -g @angular/cli
  • 输入ng -v,如出现以下画面即表示安装成功Angular4学习笔记(一)-环境搭建

    创建项目

  • 命令:ng new XXX,XXX表示项目名称,如:ng new iAngularAngular4学习笔记(一)-环境搭建
    此时在相应目录下就会有新项目生成
    Angular4学习笔记(一)-环境搭建

    Angular组件

    默认项目构成

    Angular4学习笔记(一)-环境搭建

组件构成

Angular4学习笔记(一)-环境搭建

启动顺序

  1. main.ts
    通过platformBrowserDynamic().bootstrapModule(AppModule)来加载模块AppModuleAngular4学习笔记(一)-环境搭建
  2. AppModule
    Angular4学习笔记(一)-环境搭建
    通过declarations: [AppComponent]声明并通过bootstrap: [AppComponent]加载AppComponent组件
  3. AppComponent
    Angular4学习笔记(一)-环境搭建
    通过装饰器@Component指定了选择器名称、模板URL和组件样式文件
  4. 模板文件(*.html)
    Angular4学习笔记(一)-环境搭建
    通过{{title}}表达式读取控制器中的元素title
  5. 样式文件(*.css)

    Angular4学习笔记(一)-环境搭建
    此处本来是空的,样式是自己加的

  6. 首页index.html
    Angular4学习笔记(一)-环境搭建

启动项目

  1. 在项目根目录下执行npm start命令,出现以下画面即表示启动成功:
    Angular4学习笔记(一)-环境搭建
  2. 访问
    Angular4学习笔记(一)-环境搭建
上一篇:Hive的三种安装方式(内嵌模式,本地模式远程模式)


下一篇:maven war工程重命名