基础案例:TodoMVC[通俗易懂]
2023-06-13 09:12:06 时间
大家好,又见面了,我是你们的朋友全栈君。
起步
下载模板:
git clone https://github.com/tastejs/todomvc-app-template.git --depth 1
初始化项目:
ng new todomvc-angular
cd todomvc-angular
ng serve
将 todomvc-angular\src\app\app.component.html
文件内容替换如下:
<section class="todoapp">
<header class="header">
<h1>todos</h1>
<input class="new-todo" placeholder="What needs to be done?" autofocus>
</header>
<!-- This section should be hidden by default and shown when there are todos -->
<section class="main">
<input id="toggle-all" class="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list">
<!-- These are here just to show the structure of the list items -->
<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
<li class="completed">
<div class="view">
<input class="toggle" type="checkbox" checked>
<label>Taste JavaScript</label>
<button class="destroy"></button>
</div>
<input class="edit" value="Create a TodoMVC template">
</li>
<li>
<div class="view">
<input class="toggle" type="checkbox">
<label>Buy a unicorn</label>
<button class="destroy"></button>
</div>
<input class="edit" value="Rule the web">
</li>
</ul>
</section>
<!-- This footer should hidden by default and shown when there are todos -->
<footer class="footer">
<!-- This should be `0 items left` by default -->
<span class="todo-count"><strong>0</strong> item left</span>
<!-- Remove this if you don't implement routing -->
<ul class="filters">
<li>
<a class="selected" href="#/">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<!-- Hidden if no completed items are left ↓ -->
<button class="clear-completed">Clear completed</button>
</footer>
</section>
<footer class="info">
<p>Double-click to edit a todo</p>
<!-- Remove the below line ↓ -->
<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
<!-- Change this out with your name and url ↓ -->
<p>Created by <a href="http://todomvc.com">you</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
安装模板依赖的样式文件:
npm install todomvc-app-css
在 todomvc-angular\src\styles.css
文件中导入样式文件:
/* You can add global styles to this file, and also import other style files */
@import url('../node_modules/todomvc-app-css/index.css');
看到如下页面说明成功。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/155603.html原文链接:https://javaforall.cn
相关文章
- Spartan-6开发案例使用手册——嵌入式AD模块/接口基础测试(下)
- java基础案例4-4学生和老师「建议收藏」
- php案例:统计用户在线时长
- JavaScript案例:获取鼠标在盒子内的坐标
- 通过sql调用procedure_oracle存储过程简单案例
- 基于NetworkX构建复杂网络的应用案例
- 【重识云原生】第六章容器基础6.4.10.4节——StatefulSet实操案例-使用 StatefulSet 部署Cassandra
- 经典jvm问题案例分析及处理详解
- 零基础入门分布式系统 8. 案例研究 Case studies (完)
- 大数据必学Java基础(一百一十一):过滤器注解应用和开发案例
- 大数据NiFi(十五):NiFi入门案例二
- 【愚公系列】2023年01月 .NET CORE工具案例-使用pythonnet实现C#和Python的融合调用
- 建设数据资产一体化管控体系,某大型医药集团实现数据长效赋能业务发展 | 案例研究
- Hadoop入门进阶课程9–Mahout介绍、安装与应用案例详解大数据
- Oracle项目案例:实践为证(oracle项目实例)
- iptables实战案例:马哥教育原校区的防火墙配置设置
- dockerfile生产案例- 基于ubuntu基础镜像制作nginx镜像