AngularJS 学习笔记第二天

一.搭建项目环境：

1.angularJS 需要node.js和npm，可使用node -v 和 npm -v 检查

2.npm install -g @angular/cli 安装angularjs 组件

3.创建项目文件；ng new hello-AngularJS-demo01

4.实用ng-serve对项目进行打包

5.生成项目组件ng generate component login --inline-template --inline-style；简化写法为ng  g c login --it --is

二.使用form表单做一个登录控件

添加一个输入框与按钮

并且为button绑定事件userNameRef引用输入框中的值传递到button事件当中

auth为服务器文件：建立一个服务器完成业务逻辑ng g s core\auth

生成文件 

首先导入生成的服务器文件至loing.component.ts中

声明成员变量，其类型为CoreauthService

调用service

在coreauth.service.ts中进行逻辑判断

配置全局可用的service或者参数

修改login中的代码

双向数据绑定

在class中声明数据变量

改变onClick内部方法语句

方括号[]的作用是说把等号后面当成表达式来解析而不是当成字符串，如果我们去掉方括号那就等于说是直接给这个ngModel赋值成“username”这个字符串了。方括号的含义是单向绑定，就是说我们在组件中给model赋的值会设置到HTML的input控件中。[()]是双向绑定的意思，就是说HTML对应控件的状态的改变会反射设置到组件的model中。ngModel是FormModule中提供的指令，它负责从Domain Model（这里就是username或password，以后我们可用绑定更复杂的对象）中创建一个FormControl的实例，并将这个实例和表单的控件绑定起来。同样的对于click事件的处理，我们不需要传入参数了，因为其调用的是刚刚我们改造的组件中的onClick方法。

在app.module.ts中导入

否则会报错