在上一节中我们学会了如何在页面中添加一个组件以及一些基本的Angular知识,而这一节将用Angular来创建一个单页应用(SPA).这意味着,取代我们之前用Express在服务端运行整个网站逻辑的方式(jade.路由都需要在服务端编译),我们将用Angular在客户端浏览器上跑起来.PS:在正常的开发流程上,我们可能不会在服务器端创建了一个网站,然后又用SPA重建它.但从学习的角度来说这还不错,这样掌握了两种构建方式. 上一节所有Angular相关的代码都在一个js里面,这不便管理和维护,这一…

这个系列一共会涉及两个JavaScript框架的讲解,一个是Express用做后端,一个是Angular用于前端.和Express一样,Angular分离内容,处理视图.数据和逻辑.和MVC模式很相似,但其实Angular定义是MVW框架,W代表(what ever works for you).意味着它可以是控制器或者视图模型,或者服务,就看你怎么定义的.这一节会介绍基本的Angular知识:然后改造我们之前做的页面:并且调用之前的定义的api来获取数据. Angular的数据绑定是指视图的改…

英雄指南教程(Tour of Heroes)涵盖了 Angular 的基本知识. 在本教程中,你将构建一个应用,来帮助人事代理机构来管理一群英雄. 这个入门级 app 包含很多数据驱动的应用所需的特性. 它需要获取并显示英雄的列表.编辑所选英雄的详情,并且在包含有英雄数据的不同视图之间进行导航. 在本教程的最后,你的应用可以做下面的工作: 使用Angular 的内置指令(Angular directives)来显示 / 隐藏元素,并显示英雄数据的列表. 创建 Angular 组件(Angular…

昨天写的2019年Angular7——安装搭建路由方法不太正统,今天又去翻了下angular官网,跟着上面的环境搭建与部署走了一遍 从安装@angular/cli命令行工具开始 本篇主要记录下搭建过程中的报错 1.根据官网教程,首先安装cli npm install -g @angular/cli 这里没问题 2.创建一个Angular项目 ng new angular-demo 这一步报错了: E:\wsl2019\my-projects>ng new angular-demo? Would…

最近搞到手了一部Angular4的视频教程,这几天正好有时间变学了一下,可以用来做一些前后端分离的网站,也可以直接去打包web app. 环境&版本信息声明 运行ng -v @angular/cli: 1.2.0 node: 8.1.2 os: win32 x64 @angular/* 4.2.5 ... 好吧,那就顺便写个笔记/教程/备忘/博客咯 安装Angular脚手架 安装的时候选择全局安装 npm install @angular/cli -g 创建Angular项目 运行命令 ng n…

本人原来是iOS开发,没想到工作后,离iOS开发原来越远,走上了前端的坑.一路走来,也没有向别人一样遇到一个技术上的师傅,无奈只能一个人苦苦摸索.如今又开始填angular的坑了.闲话不扯了.(本人学习是根据官网教程,如果想根据官网教程学习,我建议先把官网的例子先学一遍,路由的路基部分,都是根据这个例子来讲的).https://www.angular.cn/(官网地址)本章部分基本是官网的内容. 基础知识 1.应用的开始都会有一个根目录开始,路由也一样,所以使用路由就在index.html的<h…

JS知识栈:Node为主,JQuery为辅,Bootstrap & React为辅辅,其他如Angular了解用途即可 今天在学习ReactJS和NodeJS,看到关于ReactJS的这篇文章,还是很不错的:<一看就懂的ReactJs入门教程-精华版> http://www.cnblogs.com/yunfeifei/p/4486125.html 其中引用的这篇文章也很不错: http://www.infoq.com/cn/articles/subversion-front-end-u…

原文地址 https://www.jianshu.com/p/22e0f95bcf24 什么是管道 每个应用开始的时候差不多都是一些简单任务:获取数据.转换它们,然后把它们显示给用户. 获取数据可能简单到创建一个局部变量就行,也可能复杂到从WebSocket中获取数据流.一旦取到数据,我们可以把它们原始值的toString结果直接推入视图中. 但这种做法很少能具备良好的用户体验. 比如,几乎每个人都更喜欢简单的日期格式,例如1988-04-15,而不是服务端传过来的原始字符串格式 —— Fri…

各种服务: $location:可以监听事件的改变 link 在没有设置template的情况下,指令作为标签使用的时候,ele是指令(伪数组的形式); * 如果指令作为属性使用的话,ele是使用该指令的元素(伪数组的形式) * 如果设置了template的情况下,指令作为属性,标签使用,ele是模板里面父元素(伪数组的形式) angular的方法 fromJson:字符串转对象  toJson: 对象转为字符串…

AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 ng-directives 扩展了 HTML. The ng-app 定义 AngularJS 应用程序.(ng-app指令标记了AngularJS脚本的作用域 The ng-model 将 HTML 控件 (输入. 选择. 文本区域) 的值绑定到应用程序数据.. The ng-bind 将应用程序数据绑定到 HTML 视图.. 1. AngularJS…