如何利用AngularJs快速搭建前端基本框架
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何利用AngularJs快速搭建前端基本框架相关的知识,希望对你有一定的参考价值。
Angular Js 支持页面前端的 MVC 模式开发,在 Angular JS 的支持下,我们可以将页面前端处理的数据与页面展示进行分离,实现优雅的代码结构。
首先,我们需要到 AngularJs 的官网下载这个脚本库。
在页面引用 AngularJs 脚本
AngularJs 是一个独立的脚本库,只需要在页面引用 AngularJs 的脚本文件就可以了,它也可以和 jQuery 一起使用。
创建 WebApp 和控制器
在 AngularJs 中,每个页面被看作一个独立的 WebApp,每个 WebApp 中可以包括多个独立的处理部分,我们称为 Controller,每个 Controller 有自己独立的处理上下文和逻辑。
AngularJs 通过指令 ng-app 来划定这个 WebApp 的作用域,通常可以将这个 ng-app 直接写在 html 标记之上,也可以写在一个元素之上,我们这里写在这个视图中的 div 标记之上。
ng-controller 用来划定 WebApp 中的控制器的作用域。
创建视图
在 AngularJs 中,视图是通过标准的 HTML 实现的。
实现模型和视图的双向绑定
angularjs 支持双向绑定,也就是说既可以从我们的模型获取数据,如果数据被编辑了,编辑之后的内容也通过可以被 angularjs 同步到模型上。
双向绑定实际上是 angularjs 内部支持的,并不需要特别的编码。
参考技术A AngularJs是一款以前后端分离为优势的前端框架,也有人将其称为MVC*框架,它在用户数据交互方面显示出强大的功能,这个主要依赖于它的数据绑定功能。此篇经验我主要来讲一下如何入门开始写基于Angularjs的Web页面。以上是关于如何利用AngularJs快速搭建前端基本框架的主要内容,如果未能解决你的问题,请参考以下文章
使用vue2.x+webpack+vuex+sass+axios+elementUI等快速搭建前端项目框架