angularjs 入门

angular及其安装

使用npm i -g angular 来安装angular

依赖 json-server bootstrap

npm i -g json-server
npm i -g bootstrap

angular js依赖的使用及其介绍

json-server

在真实的生产环境中由于前端并不是独立的存在使用假数据又不能正常的反映出程序的运行情况，这时候就应当使用
json-server建立一个restful服务器来模拟数据的请求对程序来进行调试

json-server 的使用

建立json文件 例如  rest-server.json
{
	'user':[
		{
			'name':'long'，
			'age':18,
			'gender':'男',
			'group':'组1'	
		},
		{
			'name':'long'，
			'age':18,
			'gender':'男',
			'group':'组1'	
		},
		{
			'name':'long'，
			'age':18,
			'gender':'男',
			'group':'组1'	
		}
	],
	'group':[
		{
		'id':1,
		'name':'组1'
		},
		{
			'id':2,
			'name':'组2'	
		}
	]
}


ps: 以上的json数据都应当是双引号  由于懒得按shift  代码敲的手指痛

使用 json-server --watch rest-server.json来启动json-server 默认的json-server端口是3000端口  可以使用-p 或 --port来指定端口


bootstrap在angularjs中的导入方式、

首先修改全局配置文件  angular-cli.json文件  6.x版本之后的angularjs就更改了全局配置文件的名称 angular.json

首先angularjs中安装的依赖都存放于node_modules中  
修改build中的styles,在styles中添加bootstrap 的css文件路径"
./node_modules/bootstrap/dist/css/bootstrap.min.css"

	 

关于ES6中的export ，require，import 关键字的简单描述

	export  ES6新增语法 将当前模块中的数据暴露出去    es6中的模块使用严格模式 即 当另一个模块想要引用另外一个模块中的对象或者数据的使用该模块必须使用export来将该对象暴露在模块外

	require 导入与import导入的区别

	require导入方法只能在运行时确定模块的依赖关系及输入/输出的变量，无法进行静态优化
	import导入方式支持编译时静态分析，便于JS引入宏和类型检验。动态绑定
	

angular中的模块定义方式

//首先导入模块 
import { Compoment } from '@angular.core';
@Component(｛
	select:'模块使用的标签名字或者css选择器',
	templateUrl:'.component.html的文件路径',
	styleUrls:[
		'样式文件路径'
	]
	
｝)

export class 暴露给外部的接口名字{
	在其中可以定义变量让模板使用，但是子模版并不能直接访问父模版的属性或者变量
	
}

同级子模版的嵌套

	在相同级别下的模版可以直接的相互嵌套使用
	例如在app目录下有两个子模版  app-test1 app-test2
	在app-test1  html文件中可以直接的调用 app-test2子模版

angular中的的指令与数据绑定

插值，使用  {{}}  的方式来进行插值   例如  <span></span> 这种插值的方式数据是单项绑定的
属性绑定 ， 使用 [] 的方式来进行数据绑定dom属性  例如  <img [src]="通过expot暴漏出的属性名字">
双向绑定 , 使用[( ngModel )] = '' 的方式来绑定属性  例如 <input type="text" [(ngModel)]="">
事件的绑定 (事件名)=‘’ 的方式来绑定事件名  例如  <button (click)='处理事件的函数($event)'>提交</button>

anangular中的指令

if条件判断   ngIf="js代码或值"   例如    

<div *ngif="值" ></div>  假如值为false或者null ，undefined nan 那么该div都不会渲染
使用[]来进行类属性绑定的时候可以使用 [class.col-md-5]="布尔值" 的方式来进行判断来进行样式的添加
else的使用方式  
<div  *ngif="值；else elseName ">
</div>
<ng-template #elseName>
	<div><div>
</ng-template>




for循环   *ngFor="let param of params; let index = index"
可以使用 param来进行数据的绑定或后续操作，使用  let index = index 来获取当前值的循环下标

angualr中操作数据的机制简介

angular中的数据操作是操作的dom属性  并不是操作的html属性
什么事html属性和dom属性
例如  <input type="text">
获取到这个input之后使用   input.value 获取的是dom属性  但是 使用attr(value) 获取到的属性是html属性
input.value获取的值会随着input框中的内容而变化  但是使用attr获取的value并不会变化

angular的路由

由于前后端分离的情况下前端界面大多是单页面应用 当仅仅加载一次html，css和部分js就可以实现网站内容的呈现，
当用户进行点击事件的时候页面并不会刷新而是进行一次页面组件的替换来进行无刷新的内容呈现，这个时候如何进行页面的
组件内容的显示显得尤为重要，
angular的路由是使用@angular/router来实现的

Route,Routes,ActivateRoute,routerLink,router-let的简单使用

路由配置参数

路由的配置在app文件夹下的app-router-model.ts文件夹下配置routes选项

Routes对象：包含整个项目的url结构

Routes对象接收一个列表作为参数列表当中包含一个个map
{
	path:'url路径'，
	component：显示的component组件，
	children:[
		{
			path:'',
			component：‘’
		}
		//显示的子路由
	]
	canActivate:[],//用户访问控制
	canDeactivate:[],//是否满足某种条件，不满足则不会离开页面，
	reselove:{res:类} //在用户访问页面前做的操作  可以在页面展示之前来请求服务器来请求数据
}

未完