angularjs初学笔记

最新推荐文章于 2019-04-25 11:32:15 发布

嗡汤圆

最新推荐文章于 2019-04-25 11:32:15 发布

阅读量671

点赞数

分类专栏： Web前端开发文章标签： javascript jquery mvc angularjs web应用

本文链接：https://blog.csdn.net/tzdwsy/article/details/47375519

版权

前言

需求

在第一次尝试开发WEB应用的时候，由于缺乏经验，同时任务时间紧迫，边学习边开发，错过了angularjs这样一个优秀的MVC前端框架。
(当时甚至还不懂MVC事神马=.=)

后来第一次接触javascript, jquery学会了基本的javascript语法，并解除了jquery-modile, easyui等等优秀的框架，
大大减轻了前端开发的痛苦，但是无论使用什么框架，本质的对DOM的直接操作是避免不了的。于是出现了这样的情况：

1、开发时美工没有就位，因此我苦逼的即写后台，前端HTML, CSS, JS全由我一人承包。。。好不容易做出个模型来，美工过来了(尼玛=.=)
美工开发了一套界面，于是原来的<ul>列表变成了<table>; <input>变成了<div>。。。。等等
由于JS直接和DOM绑定了，因此界面DOM一变，脚本也得跟着改，又写循环脚本甚至得重写。十分麻烦。
2、很多页面的输入组件并没有很好的模块化，导致当很多页面都出现同样功能时候，这些代码得复制好几遍，修改的时候也得在好几个地方修改。有时候一不小心
忘记修改了某个地方就呵呵了。。。。

由上可以看出，即使是前端，逻辑与界面的解耦已经十分必要了。angularjs框架正好满足了这些需要。同时它的一些数据绑定特性也能帮助开发者减少很大一部分DOM和数据处理的代码。

为了便于实践，我打算开一个SpringMVC项目，实际做一个WEB应用出来。可能并不是一个有实际意义的网站，但是尽量能把我认为常用的angularjs特性展示出来。

项目地址：augularjsPractice.边学习边尝试开发。

这篇日志也会随时更新，或者开辟新的专题博文。

angularjs的特点

将应用逻辑与对DOM的操作解耦。这会提高代码的可测试性。
Angular遵循软件工程的MVC模式,并鼓励展现，数据，和逻辑组件之间的松耦合.通过依赖注入（dependency injection），Angular为客户端的Web应用带来了传统服务端的服务，例如独立于视图的控制。
双向数据绑定.

入门

在WEB中引入AngularJs

最简单的页面如下：


<!DOCTYPE HTML>
<html>
    <head>
        <title>测试页 </title>
        <meta charset="utf-8">
        <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="" ng-init="name='World'">
           Hello {
   { name }}！
        </div>