angular快速⼊门_带有Ag-Grid的Angular快速⼊门
angular快速 ⼊门
⾓度安装 (Angular Installation)
先决条件 (Prerequisites)
Angular projects are dependent on npm packages. So by installing Node.js, we by default get npm package manager, which is used to install npm packages.
Angular项⽬依赖于npm软件包。 因此，通过安装Node.js，我们默认获取npm软件包管理器，该软件包管理器⽤于安装npm软件包。
Once the installation done, we get node and npm binaries added to systems environment path. That means, now you can use node and npm command.
安装完成后，我们将节点和npm⼆进制⽂件添加到系统环境路径中。 这意味着，现在您可以使⽤node和npm命令。
Lets check the version of Node installed by using the following commands in our terminal:
让我们在终端中使⽤以下命令检查安装的Node版本：
Command Prompt — Node and NPM Versions
命令提⽰符-节点和NPM版本
安装Angular CLI (Installing Angular CLI)
Now, Lets Install Angular!!. Enter the following command in the terminal:
现在，让我们安装Angular !!。 在终端中输⼊以下命令：
npm install -g @angular/cli
We can check the version of Angular installed.
我们可以检查安装的Angular版本。
ng version
创建您的Angular项⽬ (Create Your Angular Project)
ng new my-sample --style scss --routing false
In the above command we are passing --style scss, so that we can customize our project using Sass and --routing false , as we will not be implementing routing.
在上⾯的命令中，我们传递了--style scss ，因此我们可以使⽤Sass和--routing false定义项⽬，因为我们不会实现路由。
Output from Command Prompt — After running the above command
命令提⽰符的输出-运⾏上述命令后
Make your way into the project that has been created via the following command:
进⼊通过以下命令创建的项⽬：
cd my-sample
Now let us start our angular project using ng-serve.
angular安装现在让我们使⽤ng-serve开始我们的⾓度项⽬。
ng serve
Output from Command Prompt — After running ‘ng serve’ command
命令提⽰符的输出-运⾏'ng serve'命令后我们可以通过以下URL从浏览器中查看我们的应⽤程序：
If everything goes as expected, then Congratulations .. Yeeee..
如果⼀切都按预期进⾏，那么恭喜 .. Yeeee ..
Angular App — Browser at First
Angular应⽤程序–最初是浏览器
Lets stop the command prompt by pressing “Ctrl + c” and add the Ag-Grid NPM packages to our project.
让我们通过按“ Ctrl + c”来停⽌命令提⽰符，然后将Ag-Grid NPM软件包添加到我们的项⽬中。
npm install --save ag-grid-community ag-grid-angularnpm install
Now that the Ag-Grid packages are added and a great deal of time has passed since. Lets get to the code . We have to add the Ag-Grid styles to the styles.scss (my-sample\src\styles.scss).
现在，已经添加了Ag-Grid程序包，并且已经过去了很多时间。 让我们来看看代码 我们必须将Ag-Grid样式添加到styles.scss(my-sample \ src \ styles.scss)中。
@import "../node_modules/ag-grid-community/src/styles/ag-grid.scss";
@import "../node_modules/ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin.scss";
.ag-theme-alpine {
@include ag-theme-alpine();
}
The next step is to add the Ag-Grid Angular module to the root AppModule file by importing it and add AgGridModule to the imports array (my-sample\src\dule.ts):
下⼀步是通过导⼊将Ag-Grid Angular模块添加到根AppModule⽂件，并将AgGridModule添加到imports数组(my-sample \ src \ app
\ dule.ts)：
Next, we have to declare the grid (my-sample\src\app\appponent.ts):
接下来，我们必须声明⽹格(my-sample \ src \ app \ appponent.ts)：
In the code above we have used column definitions (columnDefs) and the Row data (rowData). Here in our example we have three columns where each of them contain two properties ‘headerName’ whi
ch contains Header Name and ‘fields’which contains the data field to be displayed in the body of the table.
在上⾯的代码中，我们使⽤了列定义(columnDefs)和⾏数据(rowData)。 在我们的⽰例中，我们有三列，其中每列包含两个属性“headerName”和“ fields”，其中“ headerName”包含标题名称，“ fields”包含要在表主体中显⽰的数据字段。
Please Note: The value in ‘columndef (key,value)’ must match with the key of ‘rowData (key,value)’.
请注意：“ columndef(键，值)”中的值必须与“ rowData(键，值)”中的键匹配。
Now lets add the HTML component to our code (my-sample\src\app\appponent.html).
现在，将HTML组件添加到我们的代码中(my-sample \ src \ app \ appponent.html)。
If everything goes as expected, then Congratulations Once Again!.
如果⼀切都按预期进⾏，那么再次恭喜您！是的 ...
从服务器获取/获取数据 (Get/Fetch Data from a Server)
Now that we have successfully displayed hard coded data, lets try getting our data from a server or in this case github where i have a JSON file.
现在我们已经成功显⽰了硬编码数据，让我们尝试从服务器或本例中我有JSON⽂件的github中获取数据。
json⽂件的Github URL： :
启⽤HTTP服务 (Enable HTTP Services)
Let’s add HttpClient to the root AppModule file by importing it and add HttpClientModule to the imports array (my-sample\src\dule.ts) which is used for communicating with a server.
让我们通过导⼊将HttpClient添加到根AppModule⽂件中，并将HttpClientModule添加到⽤于与服务器进⾏通信的imports数组(my-sample \ src \ app \ dule.ts)中。
Now we need to remove the hard-coded data and fetch it from a server by making changes to the appponent file (my-sample\src\app\appponent.ts):
现在，我们需要通过更改appponent⽂件(my-sample \ src \ app \ appponent.ts)来删除硬编码数据并从服务器中获取它们：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。