Angular4项目搭建实战总结与经验分享

"这篇资源是关于Angular 4实际项目搭建的总结，作者在文中分享了他们的搭建经验，包括选择Angular 4的原因、遇到的问题以及解决方法，同时还提到了项目中的基本配置，如环境部署、路由嵌套、页面布局和公共服务等。" 在深入探讨之前，我们先了解一下Angular 4的基本概念。Angular 4是Google推出的一个前端框架，用于构建单页应用（SPA）。它基于TypeScript，提供了一种声明式编程方式来构建用户界面，同时提供了强大的数据绑定和依赖注入机制。 文章提到，作者在项目开始时选择了Angular 4，原因包括对Angular 1有一定的了解，以及TypeScript对安卓开发者的友好性。Angular 4相较于Angular 1和2/3，进行了性能优化并减少了包的大小，使得项目的加载速度更快。 在项目搭建的过程中，作者遇到了一些常见问题。首先，关于SCSS的使用，当在组件内部直接写样式时，CLI并不会自动编译SCSS为CSS。解决方法是将样式放在单独的SCSS文件中，然后通过`styleUrls`导入。这是一个常见的配置错误，需要开发者注意。 其次，路由配置方面，作者强调了`routesPath`前不能添加`/`，否则会导致路由错误。正确的配置应如下所示： ```typescript const routes: Routes = [ { path: '', redirectTo: '/main', pathMatch: 'full' }, { path: 'main', component: MainComponent } ]; ``` `<router-outlet>`是Angular路由的主要组件，用于渲染路由配置中的组件。作者没有提供完整的例子，但通常在模板中只有一个顶级的`<router-outlet>`，其他嵌套路由会在对应的组件模板中定义。 此外，文章还提到了一些基本功能的配置，如环境部署（可能涉及开发环境与生产环境的切换）、路由嵌套（用于构建复杂的导航结构）、主页面布局（通常包含侧边栏、导航栏、主要内容区和底部）以及公共服务。公共服务涵盖了如加载指示器（loading）、HTTP请求封装（方便统一处理请求和响应）、全局标题（title服务）以及用户信息的存储和获取。 这篇文章是作者在实际项目中使用Angular 4进行搭建的实战经验和总结，对于初学者或者准备开始新项目的人来说，具有一定的参考价值。它提醒我们在项目开始时，需要对框架有深入的理解，以及如何解决实际开发中遇到的问题。