启动Angular过程介绍
启动时加载了哪个页面?
启动时加载了哪些脚本?
这些脚本做了什么事?
默认情况下是index对应的文件是启动时加载的页面
main.ts是启动时的起点文件
main.ts
//核心模块提供的enableProdMode用来,用来关闭angular的开发者模式
import { enableProdMode } from '@angular/core';
//使用哪个模块来启动应用
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
//命令行工具生成的主模块
import { AppModule } from './app/app.module';
//环境配置
import { environment } from './environments/environment';
//如果是生产模式,就关闭angular的开发者模式
if (environment.production) {
enableProdMode();
}
//传入AppModule模块来启动应用,应用的起点
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
启动
1.
2.
3.
4.
5.暴露出来的地址,进行访问
修改
会自动刷新页面
开发准备
cd 到项目目录下
npm install jquery - -save
npm install bootstrap - -save
会自动下载到
同时
会显示
同时把需要试用的js和css加入到项目当中
安装类型描述文件,否则无法认识“$”符号
npm install @types/jquery - -save-dev
npm install @types/bootstrap - -save-dev
项目预览
我们即将要开发的页面
学会划分组件,进行组件化开发
除了App组件是项目创建的时候就被生成的,另外其他六个组件,就需要我们执行命令进行创建生成
ng g component navbar
ng g component footer
ng g component search
ng g component carousel
ng g component product
ng g component stars