Angular 创建页面

最新推荐文章于 2024-02-07 00:38:51 发布
最新推荐文章于 2024-02-07 00:38:51 发布
阅读量1.9k 收藏
点赞数
分类专栏： Angular 文章标签： angular.js typescript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/will_net/article/details/124446034
版权

1、进入需要创建页面的目录

cd E:\项目\Acadsoc.SalesSystem.Angular\src\app\pages\sales-system

2、创建页面

ng generate component --skip-tests sales-course-lesson-statistics-new

3、进入需要创建service的目录

cd E:\项目\Acadsoc.SalesSystem.Angular\src\app\services\controller

4、创建service

ng generate service --skip-tests sales-course-lesson-statistics-new

5、修改路由配置，找到sales-system.module.ts 将新建文件的配置加入sales-system-routing.module.ts

sales-system.module.ts
在这里插入图片描述sales-system-routing.module.ts
在这里插入图片描述
在这里插入图片描述

will_net
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angular新建页面流程
qq_20382175的博客
06-08 103
https://juejin.cn/post/6844904151374102535
AngularJS 打开新的标签页实现代码
12-01
废话不多说了，直接给大家贴代码了，具体代码如下所示： <!DOCTYPE html> <html ng-app="myPro"> <head> <meta charset="UTF-8"> <title>angularJS-打开新的标签页</title> [removed][removed] [removed][removed] </head> <body
angular7教程（2）——新建页面
小牛呼噜噜的博客
03-14 5491
继续上一章，我们用命令行 ng generate component login 生成了一个新的组件。现在我想让它成为一个新的页面，不仅仅让他成为其他页面的组件。 1、修改app.component.html &lt;router-outlet&gt;&lt;/router-outlet&gt; 2、修改路由app-routing.module.ts import { NgMod...
angular命令集
a1192492677的博客
09-26 1366
npm install -g @angular/cli 安装angular cli脚手架 npm install -g cnpm 安装淘宝镜像 npm uninstall -g @angular/cli 卸载angular cli npm cache clean 清除缓存 cnpm install -g @angular/cli npm 淘宝镜像方式重新安装 ng -v 查看版本/检验是否...
【angular】开发一个新页面
Elsa
05-14 4312
前言      开发一个新页面途中，总结的一些经验。页面效果      功能1：查询签到/未签到结果            功能2：模糊查询          功能3:修改状态          经验总结【引入primeng】       参考：大神博客、primeNG官网       具体使用:       当需要一个控件来满足我的需求页面的时候，我可以去primeNG里面找一些差不多的控件来改...
Angular开发关键页面流程之创建模块
IT小人物丶的博客
12-20 301
October 28, 2016 10:11 AM简介该流程基于Node -v 6.9.1，Npm -v 3.10.9 版本 以新增模板为例。内容说明 利用终端进入你所需要建造的模板的根目录下，输入：ng g module my-demo my-demo是我需要创建的模块 打开你所建造的模块中的.html 文件，我的是my-demo.component.html 创建个div 而div的cla
使用Angular缓存父页面数据的方法
08-31
3. **在父页面中创建子视图**： 在父页面HTML模板中，我们需要添加一个`<ui-view>`标签来承载子视图。如果只有一个`ui-view`，可以省略其名字。 ```html <ui-view name="subView"></ui-view> <!-- 其他HTML代码 ...
Angular2监听页面大小变化的解决方法
08-29
在Angular2（以及更新版本的Angular）开发过程中，有时我们需要监听浏览器窗口的大小变化，以便在用户调整窗口尺寸时更新页面布局或组件的行为。本文将详细介绍如何在Angular中实现这一功能，并探讨一些优化策略。 ...
动态创建Angular组件实现popup弹窗功能
08-29
虽然在服务中无法直接获取`ViewContainerRef`，但我们可以通过原生DOM操作将创建的组件插入到页面中，例如插入到`body`标签的末尾。 在实际应用中，可以使用以下步骤实现动态创建组件： 1. 使用`...
angular实现spa单页面应用实例
08-30
在 Angular 中，每个组件都有自己的生命周期，即从组件创建到组件销毁的过程。在组件的生命周期中，我们可以执行一些操作，例如，初始化组件、加载数据、绑定事件等。 例如，在上面的代码中，我们可以看到以下组件...
Angular6 Filter实现页面搜索的示例代码
10-17
在Angular6中，实现页面搜索通常涉及到Filter和Pipe的使用，这是Angular提供的数据转换机制。在本示例中，我们将探讨如何创建一个自定义的Pipe，用于全局搜索，并将其应用于HTML模板中，以便用户可以输入关键词，...
新建一个angular项目
写了个 bug
03-15 1656
新版本的angular是基于Typscript的 不是js ， angualr的项目 基于TypeScript compiler、webpack、Karma、Jasmine、Protracter 等模块。，而自己动手搭建这些模块很麻烦， ng cli命令可以帮我们省去这一麻烦的环节。首先确保你的电脑上安装了 node， 如果没有请去node的官网安装匹配的版本。1.全局安装cnpm ,使用cnpm...
Angular ionic 创建页面和页面跳转
qq_41768447的博客
03-10 593
一：创建tab4模块 cd到项目目录； 通过ionic g page 页面名称； PS E:\Angular\ionicdemo01> ng g page tab4 3.删除默认配置在app-routing.module.ts里的路由； 4.在tabs.router.module.ts中，配置tab4 5.在tabs.page.html中新增tab4的路由 ...
Angular4.0_页面搭建
十二指环的博客
07-05 1979
开发页面布局 app.component.hrml &amp;amp;amp;amp;amp;lt;app-search&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;/app-search&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;div class=&amp;amp;amp;amp;quot;container&amp;amp;amp;am
如何使用angularjs创建一个单页面的web应用程序
自我修炼之路
03-02 3699
1.创建一个空的web应用程序。2.通过nuget导入angularjs。3.建立一个新的html页。4.写入以下内容，注意引入angularjs.min.js，ng-app,ng-view的使用。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset=...
第一个 Angular 项目 - 静态页面
最新发布
GoldenaArcher的博客
02-07 1553
这是在学完了上面这三个内容后能够完成的项目，目前因为还没有学到数据在不同组件之前的传输，因此只会有一个 UI 的渲染，而不会涉及到事件的实现。
AngularJs轻松入门（一）创建第一个应用
weixin_34233618的博客
04-30 95
AngularJs是Google工程师研发的一款JS框架，官方文档中对它的描述是，它是完全使用JavaScript编写的客户端技术，同其他历史悠久的Web技术（HTML，CSS等）配合使用，使得Web开发变得更简单、更高效。它是笔者用过的比较有特色的一款框架，以HTML作为模版语言并扩展HTML属性，使得应用组件开发保持高度的清晰和一致。本系列文章將以实际的案例简单的介绍...
Yeoman创建angularjs项目——添加新页面和路由
archer的技术故事
03-17 692
本文主要参考：《angularjs高级编程》本文主要介绍如何通过Yeoman进行新模块的添加。上一篇文章我们讲述了如何通过Yeoman进行angularjs项目的创建。现在我们要添加一个新的界面，并且设置路由。使用命令：yo angular:route first-page这样的指令执行后会自动的完成一个新页面的添加，同时添加路由。路由的名称就是first-page，但是controller的名字...
angular登录页面
08-18
Angular提供了一个简单的方式来创建登录页面。下面是一个简单的示例： 1. 创建一个新的组件，比如 `login.component.ts`： ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent { username: string; password: string; login() { // 在这里处理登录逻辑 console.log('Username:', this.username); console.log('Password:', this.password); } } ``` 2. 在 `login.component.html` 中定义登录表单： ```html <div> <h2>Login</h2> <form (ngSubmit)="login()"> <div> <label for="username">Username:</label> <input type="text" id="username" [(ngModel)]="username" name="username" required> </div> <div> <label for="password">Password:</label> <input type="password" id="password" [(ngModel)]="password" name="password" required> </div> <button type="submit">Login</button> </form> </div> ``` 3. 在需要显示登录页面的地方，使用 `<app-login></app-login>` 添加组件。 4. 运行应用程序，你将看到一个带有用户名和密码输入框的登录表单。当用户点击登录按钮时，`login()` 方法将被调用，你可以在该方法中处理登录逻辑。 请注意，这只是一个简单的示例，并没有涉及实际的身份验证。在实际应用中，你需要根据具体需求来实现登录逻辑，比如向后端发送请求进行身份验证，处理错误等。 希望这可以帮助你开始创建Angular登录页面！如果有任何进一步的问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值