Angular-官⽅⽂档学习-1
Angular
简介
AngularJS 是⼀个 JavaScript 框架。它可通过
AngularJS 通过 扩展了 HTML，且通过 绑定数据到 HTML。
AngularJS 扩展了 HTML
AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义⼀个 AngularJS 应⽤程序。
ng-model 指令把元素值（⽐如输⼊域的值）绑定到应⽤程序。
ng-bind 指令把应⽤程序数据绑定到 HTML 视图。
Angular提倡的⽂件命名⽅式
jquery是什么功能组件
组件名称ponent.ts
组件的HTML模板命名为： 组件名称ponent.html
组件的样式⽂件命名为： 组件名称ponent.css
在使⽤angular前，需要先配置环境
1. node.js
2. 安装完node后可以将npm资源库设置成国内淘宝镜像，下载cnpm
3. 安装CLI
3.1：在安装了cnpm的⽬录下打开命令⾏
3.2：输⼊cnpm install -g @angular/cli
3.3：通过ng v命令可查看是否安装成功
4. 安装TypeScript
4.1：cnpm install -g typescript
4.2：tsc -v可查看是否安装成功
5. 安装saas
5.2：安装saas中间会报⼏次错误，遇到错误重新安装即可
搭建项⽬
1.使⽤命令⾏创建
1.1cnpm下创建项⽬。(做Demo时候可以使⽤)
切换到要创建项⽬的⽬录，命令⾏输⼊：ng new frontend 2.使⽤cnpm安装Primeng
2.1 进⼊项⽬根⽬录
2.2 cnpm install primeng --save
2.3安装第三⽅字体awesome:
cnpm install font-awesome
2.4安装Augular4+动画
cnpm install @angular/animations --save
2.5安装jquery
npm install jquery --save(遇到错误重复安装即可)
npm install @types/jquery --save
2.6命令⾏输⼊ng serve即可通过localhost:4200访问欢迎界⾯
@Component：这是⼀个 Decorator（装饰器），其作⽤类似于 Java ⾥⾯的注解。Decorator 这个语⾔特性⽬前（2017-10）处于Stage 2（草稿）状态，还不是 ECMA 的正式规范。
selector：组件的标签名，外部使⽤者可以这样来使⽤这个组件：。默认情况下，ng 命令⽣成出来的组件都会带上⼀个 app 前缀，如果你不喜欢，可以在 angular-cli.json ⾥⾯修改 prefix 配置项，设置为空字符串将会不带任何前缀。
templateUrl：引⽤外部的 HTML 模板。如果你想直接编写内联模板，可以使⽤ template，⽀持 ES6 引⼊的。
styleUrls：引⽤外部 CSS 样式⽂件，这是⼀个数组，也就意味着可以引⽤多份 CSS ⽂件。
export class AppComponent：这是 ES6 ⾥⾯引⼊的模块和 class 定义⽅式
何为“轻逻辑”？
简⽽⾔之，所谓“轻逻辑”就是说，你不能在模板⾥⾯编写⾮常复杂的 JavaScript 表达式。⽐如，Angular 的模板语法就有规定：你不能在模板⾥⾯ new 对象
不能使⽤=、+=、-=这类的表达式
不能⽤++、–运算符
不能使⽤位运算符
第⼀个组件
命令⾏窗⼝输⼊ ng generate component login --inline-template --inline-style 。
参数generate⽤来⽣成⽂件，参数component说明要⽣成⼀个组件，login是组件名称，后⾯的两个参数是告诉angular-cli：⽣成组件时，请把组件的HTML模板和CSS样式和组件放在同⼀个⽂件中（其实分开⽂件更清晰。)
可以把上⾯的命令改写成 ng g c login -it -is
angular-cli为我们在\src\app⽬录下⽣成了⼀个新⽂件夹login，在login⽬录下⽣成了2个⽂件
@Component修饰配置中的 selector: 'app-login'，意味着可以在其他组件的template中使⽤ <app-login></app-login> 来引⽤这个组件。
什么是模块？
简单来说模块就是提供相对独⽴功能的功能块，每块聚焦于⼀个特定业务领域。Angular内建的很多库是以模块形式提供的，⽐如FormsModule封装了表单处理，HttpModule封装了Http的处理等等。每个Angular应⽤⾄少有⼀个模块类 —— 根模块，我们将通过引导根模块来启动应⽤。按照约定，根模块的类名叫做AppModule，被放在 dule.ts ⽂件中。
import{ BrowserModule }from'@angular/platform-browser';
import{ NgModule }from'@angular/core';
import{ AppRoutingModule }from'./dule';
import{ AppComponent }from'./appponent';
import{ LoginComponent }from'./login/loginponent';
@NgModule({//@NgModule装饰器⽤来为模块定义元数据。
declarations:[
AppComponent,
LoginComponent
],
imports:[
BrowserModule,
AppRoutingModule,
],
providers:[],
bootstrap:[AppComponent]
})
export class AppModule {}
Angular的服务与依赖注⼊
创建⼀个 AuthService , 在 src\app 下建⽴⼀个 core 的⼦⽂件夹（ src/app/core ），命令⾏中输⼊ ng g s core/auth （ s这⾥是service的缩写，core/auth 是说在 core 的⽬录下建⽴ auth 服务相关⽂件
service 添加⼀个⽅法，为这个⽅法指定了返回类型和参数类型。这就是 TypeScript 的好处，有了类型约束，在别处调⽤这个⽅法时，如果给出的参数类型或返回类型不正确，IDE就可以直接告诉你错了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。