初探AngularJs框架

Posted 2021-01-06 Mrnx

一、需要准备的环境

    Nodejs：https://nodejs.org/en/download/ 

    Python：https://www.python.org/downloads/release/python-370/

    下载安装版本，不需要用户自己手动配置环境变量，环境安装完成后如下图（使用python - version，使用ctr + z退出程序）：

    

    【可以通过npm config ls -l查看npm的配置文件】

 

    安装Angular CLI，直接运行如下命令：

    npm install -g @angular/cli

    如果使用npm安装失败，可以使用淘宝的镜像，先使用npm安装cnpm，再安装AngularCLI，使用如下命令：

    npm install -g cnpm --registry=https://registry.npm.taobao.org

    cnpm install -g @angular/cli

    node.js中npm模块的安装分为（local）本地安装、（global）全局安装两种，如果要打包已经下载好的模块，需要找到相应的路径。
    local本地安装:
    npm install xxx 安装到命令行所在目录的node_module目录。
    global全局安装:
    npm install xxx  -g 安装到 \\AppData\\Roaming\\npm\\node_modules目录。

    推荐使用VSCode作为编辑器，下载如下插件：

 

 二、创建第一个项目

    使用cmd进入到需要创建项目的文件夹，创建一个名为my-app的项目（时间大概8分钟），使用如下命令行：

    ng new my-app

    创建完成后，进入到my-app文件夹下，安装依赖，运行如下命令：

    cnpm install

    启动服务，运行命令如下：

    ng serve --open

    在浏览器中http://localhost:4200/就可以看到如下的Angular默认界面：

三、项目文件目录说明

    项目目录如下图所示：

    

    每个文件对应的作用如下表所示：

    

    src文件夹下的目录结构如下所示：

     

    每个文件的作用如下表所示：

     

四、创建组件

    在app文件夹下创建components文件夹，进入项目的根目录，创建自定义组件，执行如下命令：

    ng g component components/header

    

    在项目目录下可以看到新增组件文件，如下图：

     

    在app.component.html中使用app-header标签即可引用自定义组件。（因为是使用AngularCLI创建组件，所有无需手动添加任何信息）

 

五、深入了解app.module.ts文件以及app.components.ts文件

1．@NgModule装饰器将AppModule标记为Angular模块类【NgModule类】

   @NgModule接受一个元数据对象，告诉Angular如何编译和启动应用

2．declarations：表示引入当前项目运行的组件，自定义的组件都需要引入（import）并且在app.module.ts中引用，并且在declarations中配置。

3．Imports：表示当前的项目依赖哪些模块

4．Providers：定义的服务放到这里

5．Bootstrap：默认启动哪个组件

6．Export class AppModule：根模块不需要输出任何东西

 

1．首先从argument核心引入Component

2．@Component中标明selector（组件的引用名称），templateUrl（html），styleUrls（css）

3．export class AppComponent{}中主要用于定义数据

ps:     如果是新创建的组件，在export class **{}类实现了OnInit接口中，会有construct()构造函数，以及ngOnInit()生命周期函数（加载触发的函数）