angualr总结

前言

   我们首先应当充分的认识到前端最重要的还是页面布局设计，css样式和javaScript

angualr框架帮助提高了开发效率，利用typescript减少了js面向对象部分的书写。传统前端开发少不了DOM操作，而angualr封装的指令可以让我们轻而易举的获取DOM元素。所以angular开发前端是一个十分简单，容易上手的一个框架。

1、angualr与浏览器交互的方式

    传统前端页面都是用一个一个的html来进行页面展示的，如果创建新的页面的话需要创建新的html页面。浏览器请求到html数据后，直接显示在界面上。那么angualr是一个单页面引用，问题来了，一个单页面引用，它是怎么与浏览器交互的呢？

    在angualr里是通过模块与浏览器进行交互的，准确的说是BrowserModule

从@angular/platform-browser中导入BrowerModule。这个模块在AppModule里导入。

 

2、angualr中的页面

前面已经说了模块是直接和浏览器打交道的，那么模块是页面吗？什么是类似于传统前台的页面呢？

    答案当然不是，但是页面确实和模块有关系。因为模块与浏览器打交道，所以只能把页面放到浏览器里。接着往下走，带你揭开angualr里页面的真面目！

可以简单的认为组件（component）就是页面。看组件，组件就是带有@Component的普通类。1中说了，模块是与浏览器交互的，所以组件只有放到模块里才可以进行页面的展示。那么接着下一个问题又来了，组件是如何放到模块里的呢

   angualr通过@NgModule指令把模块与组件进行了关联。只要组件放在了@NgModule的declarations里，组件就放到了模块里。

    凡是看过module文件的，都会注意到有import字段，还有providers字段，或者还有bootstrap字段。export字段。关于这些字段，往往上有十分详细的解释。请参看下面的官方链接，基本上列举了所有关于angualr框架开发中遇到的问题以及原因。

https://angular.cn/guide/ngmodule-faq

 

在这篇链接中详细说明了在开发过程中注入器，路由，模块，组件他们的关系，以及用法，和不当用法。总之对开发中遇到的问题乃是一大解决问题的利器。在这里，大家一定要看看，我认为不看的人不会后悔，因为不知道它的价值。

 

 

 

3、angualr里的服务

    对于angualr中的服务。angualr本身提供了很多服务，也有一些第三方提供的服务，当然我们也可以写自己的服务。

我对于服务的理解：服务是一个公共的普通的工具类。第一个公共的，类比sqlhelper，很多方法都要操作数据库，那么直接一个sqlhelper工具类就搞定了。那么服务呢，很多组件，很多模块用到了一个方法，比如获取后台数据，那么就写一个工具类，用来直接和后台进行打交道。有着类似作用的工具类在angualr里就成为了服务。现在问一个问题，服务在angualr里怎么使用？

    模块是与浏览器打交道的，所以服务得放到模块里。

通过angualr的注入器使用。通过在服务类的前头加上@Injectable()注解，标识这是一个服务。同时在module的providers字段加上我们服务的声明。这样就完成了服务和模块的融合。关于注入器简单说一些：angualr分为根注入器，和子注入器。通常是通过根注入器获取服务。注意：要避免根注入器和子注入器存放相同的服务。否则会发生一些奇怪的事情。根注入器就是根模块的providers。子注入器就是通过懒加载模块的providers。关于angualr注入器的理解，也请参考2中的链接，其中讲解十分透彻。

 

4、angualr的路由

先说angualr路由解决了什么问题？

 

angualr是单页面引用，它就是通过路由进行页面之间进行跳转的。也就是说当需要进行页面之间的跳转时，就用到了路由了。

优点：路由跳转相当于跳转到一个新的页面了。

缺点：路由跳转后到一个新的页面之后，在这个新页面未被销毁之前，任何再次跳转到这个页面都不会起作用的。也就是说路由跳转的页面对于angualr来说是单例的。

路由传参：路由之间的跳转时可以传参的，传递的都是一些简单的参数，可不能传递对象json，如果页面之间传递json的话，那么可以使用localstorage来作为公共容器来传递json。如果你的页面要传递json的话，我认为你的需求和设计就不合理了。当然这也是angualr在路由传参的缺陷。不可以传递json对象。如果想传递json的话，请看组件通讯。

 

对于路由还有路由守卫（翻译如此，请勿莫怪），是在页面跳转做处理的。

 

 

路由应该如何使用：

    模块是与浏览器进行交互的，那么路由也需要放入模块里， 在angualr里只有一个路由对象，根路由配置就放在这个对象里，子路由的配置也是放在这个对象里，这个对象在代码里有体现。Router 和ActivatedRoute对象都是体现了路由的。有兴趣的，不防打印出来这两个对象，对这个对象的每个属性都点一遍。我就是通过点击他们的属性，了解到angualr的路由是一个对象。每个子路由的配置都是放入这个对象的属性里。

 

 

5、angualr里的属性

最常用的几个属性：

*ngFor *ngIf  *ngSwitch  这三个属性我更愿意用for循环，if语句，switch语句来表示。

对于上面三个属性适用于进行页面拼接的。可以参照书籍，官网进行了解。本篇简要说明下对这几个属性的注意事项：

 

首先来说switch是不容易维护的，如果能够避免使用就避免使用吧。但for循环是必须要使用的。

for循环是从第一个元素，开始循环的，而且对于for循环里面的元素的生命周期也是这个循环里。看下面

 

 

上面的循环是从span开始循环的。而且menudata这个对象出了span就要消失了。

下面三个属性

 [(ngModel)]  @Input @Output 

[(ngModel)]使用来进行数据双向绑定的。一般用于添加和编辑。ts中写一个model，前台进行字段的绑定。

但是要注意一个问题，既然是双向绑定，记得添加到后台后，最好清空一下。否则，这个model还是会存在的。

未完待续。。。。。。